@majapisoftwares/ui 4.0.2

package/components/Button/Button.d.ts

@@ -0,0 +1,111 @@
+import { UnstyledButtonProps } from "./UnstyledButton";
+import { ReactElement, Ref } from "react";
+declare const styles: {
+    root: string;
+    variant: {
+        filled: string;
+        light: string;
+        outlined: string;
+        text: string;
+        custom: string;
+    };
+    color: {
+        primary: string;
+        success: string;
+        error: string;
+        gray: string;
+        default: string;
+    };
+    variantColor: {
+        "filled-primary": string;
+        "filled-success": string;
+        "filled-error": string;
+        "filled-gray": string;
+        "filled-default": string;
+        "light-primary": string;
+        "light-success": string;
+        "light-error": string;
+        "light-gray": string;
+        "light-default": string;
+        "outlined-primary": string;
+        "outlined-success": string;
+        "outlined-error": string;
+        "outlined-gray": string;
+        "outlined-default": string;
+        "text-primary": string;
+        "text-success": string;
+        "text-error": string;
+        "text-gray": string;
+        "text-default": string;
+    };
+    disabled: string;
+    size: {
+        xs: {
+            button: string;
+        };
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    icon: {
+        xs: {
+            button: string;
+            icon: string;
+            leading: string;
+            trailing: string;
+        };
+        sm: {
+            button: string;
+            icon: string;
+            leading: string;
+            trailing: string;
+        };
+        md: {
+            button: string;
+            icon: string;
+            leading: string;
+            trailing: string;
+        };
+        lg: {
+            button: string;
+            icon: string;
+            leading: string;
+            trailing: string;
+        };
+        xl: {
+            button: string;
+            icon: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+};
+export type ButtonProps<T extends HTMLElement = HTMLButtonElement> = Omit<UnstyledButtonProps<T>, "size"> & {
+    variant?: keyof (typeof styles)["variant"];
+    color?: keyof (typeof styles)["color"];
+    size?: keyof (typeof styles)["size"];
+    icon?: boolean;
+    leading?: ReactElement<{
+        className?: string;
+    }>;
+    trailing?: ReactElement<{
+        className?: string;
+    }>;
+    loading?: boolean;
+    disabled?: boolean;
+    rounded?: boolean;
+    trailingClassName?: string;
+    leadingClassName?: string;
+    ref?: Ref<T>;
+};
+declare const Button: <T extends HTMLElement = HTMLButtonElement>({ variant, color, size, className, trailingClassName, leadingClassName, icon, type, leading, trailing, children, loading, disabled, rounded, ...props }: ButtonProps<T>) => import("react").JSX.Element;
+export default Button;

package/components/Button/Button.jsx

@@ -0,0 +1,129 @@
+import UnstyledButton from "./UnstyledButton";
+import clsx from "../../utils/clsx";
+import { cloneElement } from "react";
+import Loading from "../Loading";
+const styles = {
+    root: clsx("appearance-none select-none border transition-colors inline-flex items-center justify-center font-medium leading-4 focus:outline-hidden cursor-pointer", "ring-offset-zinc-100 focus-visible:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:ring-offset-zinc-900"),
+    variant: {
+        filled: "shadow-xs",
+        light: "shadow-xs",
+        outlined: "shadow-xs",
+        text: "",
+        custom: "",
+    },
+    color: {
+        primary: "",
+        success: "",
+        error: "",
+        gray: "",
+        default: "",
+    },
+    variantColor: {
+        "filled-primary": "bg-primary-500 hover:bg-primary-500/80 text-on-primary border-transparent active:border-primary-700 dark:active:border-primary-300",
+        "filled-success": "bg-success-500 hover:bg-success-500/80 text-white border-transparent active:border-success-700 dark:active:border-success-300",
+        "filled-error": "bg-red-500 hover:bg-red-500/80 text-white border-transparent active:border-red-700 dark:active:border-red-300",
+        "filled-gray": "bg-zinc-500 hover:bg-zinc-500/80 text-white border-transparent active:border-zinc-500 dark:active:border-zinc-400",
+        "filled-default": "bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-300 dark:hover:bg-zinc-400 text-zinc-900 border-transparent active:border-zinc-400 dark:active:border-zinc-300",
+        "light-primary": "border-transparent text-primary-500 bg-primary-500/20 hover:bg-primary-500/30 active:border-primary-700",
+        "light-success": "border-transparent text-success-500 bg-success-500/20 hover:bg-success-500/30 active:border-success-700",
+        "light-error": "border-transparent text-error-500 bg-error-500/20 hover:bg-error-500/30 active:border-error-700",
+        "light-gray": "border-transparent text-zinc-500 dark:text-zinc-300 bg-zinc-500/20 hover:bg-zinc-500/30 dark:hover:bg-zinc-400/30 active:border-zinc-700 dark:active:border-zinc-500",
+        "light-default": "border-transparent dark:text-white bg-zinc-300/30 dark:bg-white/20 hover:bg-zinc-300/70 dark:hover:bg-white/30 active:border-zinc-400",
+        "outlined-primary": "border-primary-500 text-primary-500 hover:bg-primary-500/10 active:border-primary-700",
+        "outlined-success": "border-success-500 text-success-500 hover:bg-success-500/10 active:border-success-700",
+        "outlined-error": "border-error-500 text-error-500 hover:bg-error-500/10 active:border-error-700",
+        "outlined-gray": "border-zinc-400 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-500/10 active:border-zinc-700",
+        "outlined-default": clsx("border-zinc-300 hover:bg-zinc-500/5 active:border-zinc-400", "dark:text-white dark:border-zinc-700 dark:hover:bg-zinc-500/5 dark:active:border-zinc-500"),
+        "text-primary": "text-primary-500 hover:bg-primary-500/5 border-transparent active:border-primary-500",
+        "text-success": "text-success-500 hover:bg-success-500/5 border-transparent active:border-success-500",
+        "text-error": "text-error-500 hover:bg-error-500/5 border-transparent active:border-error-500",
+        "text-gray": "text-zinc-500 dark:text-zinc-400 hover:bg-zinc-500/5 border-transparent active:border-zinc-500",
+        "text-default": "hover:bg-zinc-500/5 dark:hover:bg-white/5 border-transparent active:border-zinc-500/50 dark:active:border-white/50",
+    },
+    disabled: "opacity-50 pointer-events-none",
+    size: {
+        xs: {
+            button: "px-2 py-1 text-xs",
+        },
+        sm: {
+            button: "px-2 py-1.5 text-sm",
+        },
+        md: {
+            button: "px-3 py-2 text-sm",
+        },
+        lg: {
+            button: "px-5 py-3 text-md",
+        },
+        xl: {
+            button: "px-6 py-4 text-lg",
+        },
+    },
+    icon: {
+        xs: {
+            button: "p-1.5",
+            icon: "w-3 h-3",
+            leading: "mr-1.5 -ml-0.5",
+            trailing: "ml-1.5 -mr-0.5",
+        },
+        sm: {
+            button: "p-2",
+            icon: "w-4 h-4",
+            leading: "mr-1.5",
+            trailing: "ml-1.5",
+        },
+        md: {
+            button: "p-2",
+            icon: "w-5 h-5",
+            leading: "-my-0.5 mr-2 -ml-1",
+            trailing: "-my-0.5 ml-2 -mr-1",
+        },
+        lg: {
+            button: "p-3",
+            icon: "w-6 h-6",
+            leading: "-my-1 mr-3 -ml-2",
+            trailing: "-my-1 ml-3 -mr-2",
+        },
+        xl: {
+            button: "p-4",
+            icon: "w-7 h-7",
+            leading: "-my-2 mr-4 -ml-2",
+            trailing: "-my-2 ml-4 -mr-2",
+        },
+    },
+};
+const Button = ({ variant = "outlined", color = "default", size = "md", className, trailingClassName, leadingClassName, icon, type = "button", leading, trailing, children, loading, disabled, rounded, ...props }) => {
+    if (loading) {
+        if (icon) {
+            children = <Loading className="my-auto"/>;
+        }
+        else {
+            trailing = <Loading className="mr-0 h-auto w-auto"/>;
+        }
+    }
+    return (<UnstyledButton {...props} className={clsx(styles.root, styles.variant[variant], variant !== "custom" && styles.color[color], variant !== "custom" && styles.variantColor[`${variant}-${color}`], icon ? styles.icon[size].button : styles.size[size].button, rounded ? "rounded-full" : "rounded-sm", {
+            [styles.disabled]: disabled,
+        }, className)} type={type} disabled={disabled}>
+      {leading &&
+            cloneElement(leading, {
+                className: clsx(styles.icon[size].icon, styles.icon[size].leading, leading?.props?.className, leadingClassName),
+            })}
+      {!icon
+            ? children
+            : Array.isArray(children)
+                ? children.map((child, key) => cloneElement(child, {
+                    key,
+                    className: clsx(styles.icon[size].icon, child?.props?.className),
+                }))
+                : (() => {
+                    const child = children;
+                    return cloneElement(child, {
+                        className: clsx(styles.icon[size].icon, child?.props?.className),
+                    });
+                })()}
+      {trailing &&
+            cloneElement(trailing, {
+                className: clsx(styles.icon[size].icon, styles.icon[size].trailing, trailing?.props?.className, trailingClassName),
+            })}
+    </UnstyledButton>);
+};
+export default Button;

package/components/Button/UnstyledButton.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLProps } from "react";
+export type UnstyledButtonProps<T extends HTMLElement = HTMLButtonElement> = {
+    href?: string | null;
+    target?: string;
+    rel?: string;
+    download?: string;
+    as?: string;
+} & Omit<HTMLProps<T>, "ref" | "href">;
+declare const UnstyledButton: <T extends HTMLElement = HTMLButtonElement>({ href, as, ...props }: UnstyledButtonProps<T>) => import("react").JSX.Element;
+export default UnstyledButton;

package/components/Button/UnstyledButton.jsx

@@ -0,0 +1,13 @@
+import NextLink from "next/link";
+const UnstyledButton = ({ href, as, ...props }) => {
+    if (as) {
+        const Component = as;
+        return <Component {...props}/>;
+    }
+    if (href) {
+        const props2 = props;
+        return (<NextLink {...props2} href={href} tabIndex={props2.disabled ? -1 : undefined}/>);
+    }
+    return (<button {...props}/>);
+};
+export default UnstyledButton;

package/components/Button/index.d.ts

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

package/components/Button/index.jsx

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

package/components/Carousel/Carousel.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { EmblaOptionsType, EmblaPluginType } from "embla-carousel";
+export type CarouselProps = {
+    children?: ReactNode;
+    carouselClassName?: string;
+    className?: string;
+    navigation?: boolean;
+    plugins?: EmblaPluginType[];
+} & EmblaOptionsType;
+declare function Carousel({ children, className, carouselClassName, navigation, plugins, ...options }: CarouselProps): import("react").JSX.Element;
+declare namespace Carousel {
+    var Slide: typeof CarouselSlide;
+}
+export default Carousel;
+export interface CarouselSlideProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function CarouselSlide({ children, className }: CarouselSlideProps): import("react").JSX.Element;

package/components/Carousel/Carousel.jsx

@@ -0,0 +1,55 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import useEmblaCarousel from "embla-carousel-react";
+import clsx from "../../utils/clsx";
+import { useEffect, useState } from "react";
+import Button from "../Button";
+import { useMeasure } from "react-use";
+import { mergeRefs } from "react-merge-refs";
+export default function Carousel({ children, className, carouselClassName, navigation, plugins, ...options }) {
+    const [emblaRef, embla] = useEmblaCarousel(options, plugins);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [ref, { width, height }] = useMeasure();
+    useEffect(() => {
+        function updateCanScroll() {
+            if (embla) {
+                setCanScrollPrev(embla.canScrollPrev());
+                setCanScrollNext(embla.canScrollNext());
+            }
+        }
+        if (embla) {
+            embla.reInit();
+            updateCanScroll();
+            embla.on("select", updateCanScroll);
+            embla.on("reInit", updateCanScroll);
+        }
+        return () => {
+            if (embla) {
+                embla.off("select", updateCanScroll);
+                embla.off("reInit", updateCanScroll);
+            }
+        };
+    }, [embla, width, height]);
+    return (<div data-axis={options.axis}>
+      <div className={clsx("overflow-hidden", className)} ref={mergeRefs([ref, emblaRef])}>
+        <div className={clsx("flex", carouselClassName)}>{children}</div>
+        {navigation && (<div className="flex h-full">
+            <Button icon variant="text" className={clsx({
+                hidden: !canScrollPrev,
+            })} disabled={!canScrollPrev} onClick={() => embla?.scrollPrev()}>
+              <ChevronLeftIcon />
+            </Button>
+            <div className="grow"/>
+            <Button icon variant="text" className={clsx({
+                hidden: !canScrollNext,
+            })} disabled={!canScrollNext} onClick={() => embla?.scrollNext()}>
+              <ChevronRightIcon />
+            </Button>
+          </div>)}
+      </div>
+    </div>);
+}
+Carousel.Slide = CarouselSlide;
+function CarouselSlide({ children, className }) {
+    return (<div className={clsx("min-w-0 flex-[0_0_auto]", className)}>{children}</div>);
+}

package/components/Carousel/index.d.ts

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

package/components/Carousel/index.jsx

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

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+export type CheckboxProps = {
+    label?: ReactNode;
+    description?: ReactNode;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    inputClassName?: string;
+    labelOuterClassName?: string;
+    error?: boolean;
+    helpText?: ReactNode;
+    indeterminate?: boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare function Checkbox({ id, label, description, className, labelClassName, descriptionClassName, inputClassName, labelOuterClassName, type, error, helpText, indeterminate, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+export default Checkbox;

package/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useId, useRef, } from "react";
+import { defaultTextStyles } from "../Text";
+import clsx from "../../utils/clsx";
+import { mergeRefs } from "react-merge-refs";
+const defaultLabelClassName = defaultTextStyles.variant.label;
+const defaultDescriptionClassName = defaultTextStyles.variant.secondary;
+function Checkbox({ id, label, description, className, labelClassName, descriptionClassName, inputClassName, labelOuterClassName, type = "checkbox", error, helpText, indeterminate, ref, ...props }) {
+    const innerRef = useRef(null);
+    const defaultInputId = useId();
+    const descriptionId = useId();
+    id = id || defaultInputId;
+    labelClassName = labelClassName
+        ? `${defaultLabelClassName} ${labelClassName}`
+        : defaultLabelClassName;
+    descriptionClassName = descriptionClassName
+        ? `${defaultDescriptionClassName} ${descriptionClassName}`
+        : defaultDescriptionClassName;
+    inputClassName = clsx("ui-checkbox", inputClassName);
+    if (error) {
+        labelClassName = clsx(labelClassName, "text-error-500 dark:text-error-500");
+        description = helpText || description;
+        if (description === helpText) {
+            descriptionClassName = clsx(descriptionClassName, "text-error-400 dark:text-error-600");
+        }
+    }
+    useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = !!indeterminate;
+        }
+    }, [indeterminate]);
+    return (<div className={clsx("relative flex items-start", className)}>
+      <div className="flex h-5 items-center">
+        <input {...props} id={id} aria-describedby={descriptionId} type={type} className={inputClassName} ref={mergeRefs([ref, innerRef])}/>
+      </div>
+      {(label || description) && (<div className={clsx("ml-3 text-sm", labelOuterClassName)}>
+          {label && (<label htmlFor={id} className={labelClassName}>
+              {label}
+            </label>)}
+          {description && (<p id={descriptionId} className={descriptionClassName}>
+              {description}
+            </p>)}
+        </div>)}
+    </div>);
+}
+export default Checkbox;

package/components/Checkbox/index.d.ts

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

package/components/Checkbox/index.js

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

package/components/Code/Code.d.ts

@@ -0,0 +1,12 @@
+import { Language, PrismTheme } from "prism-react-renderer";
+export type CodeProps = {
+    children: string;
+    language: Language;
+    className?: string;
+    copy?: boolean;
+    copyText?: string;
+    copiedText?: string;
+    theme?: PrismTheme;
+    copyClassName?: string;
+};
+export default function Code({ children, language, className, copy, copyText, copiedText, theme, copyClassName, }: CodeProps): import("react").JSX.Element;

package/components/Code/Code.jsx

@@ -0,0 +1,25 @@
+import { Fragment } from "react";
+import { Highlight } from "prism-react-renderer";
+import clsx from "../../utils/clsx";
+import CopyButton from "../CopyButton";
+export default function Code({ children, language, className, copy, copyText, copiedText, theme, copyClassName, }) {
+    return (<div className={clsx("group relative", className, {
+            dark: !theme,
+        })}>
+      <div className="prose max-w-none">
+        <Highlight code={children.trimEnd()} language={language} theme={theme}>
+          {({ className, style, tokens, getTokenProps }) => (<pre className={className} style={style}>
+              <code>
+                {tokens.map((line, lineIndex) => (<Fragment key={lineIndex}>
+                    {line
+                    .filter((token) => !token.empty)
+                    .map((token, tokenIndex) => (<span key={tokenIndex} {...getTokenProps({ token })}/>))}
+                    {"\n"}
+                  </Fragment>))}
+              </code>
+            </pre>)}
+        </Highlight>
+      </div>
+      {copy && (<CopyButton text={children} copyText={copyText} copiedText={copiedText} className={copyClassName}/>)}
+    </div>);
+}

package/components/Code/Json.d.ts

@@ -0,0 +1,5 @@
+export type JsonProps = {
+    json: any;
+    className?: string;
+};
+export default function Json({ json, className }: JsonProps): import("react").JSX.Element;

package/components/Code/Json.jsx

@@ -0,0 +1,7 @@
+import Code from "./Code";
+import { isNil } from "lodash-es";
+export default function Json({ json, className }) {
+    return (<Code language="js" className={className}>
+      {JSON.stringify(isNil(json) ? null : json, null, 2)}
+    </Code>);
+}

package/components/Code/index.d.ts

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

package/components/Code/index.jsx

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

package/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -0,0 +1,17 @@
+import { MenuProps } from "../Menu/Menu";
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button";
+export type ConfirmationButtonProps = {
+    confirmation: string;
+    label: ReactNode;
+    confirm?: string;
+    onConfirm: () => void;
+    loading?: boolean;
+    className?: string;
+    cancel?: string;
+    position?: MenuProps["position"];
+    buttonClassName?: string;
+    buttonProps?: Partial<ButtonProps>;
+    menuProps?: Partial<MenuProps>;
+};
+export default function ConfirmationButton({ label, confirm, confirmation, onConfirm, loading, className, cancel, position, buttonClassName, buttonProps, menuProps, }: ConfirmationButtonProps): import("react").JSX.Element;

package/components/ConfirmationButton/ConfirmationButton.jsx

@@ -0,0 +1,13 @@
+import Menu from "../Menu/Menu";
+import Button from "../Button";
+export default function ConfirmationButton({ label, confirm, confirmation, onConfirm, loading, className, cancel = "Cancel", position, buttonClassName, buttonProps, menuProps, }) {
+    return (<Menu position={position} button={<Button color="error" loading={loading} className={buttonClassName} {...buttonProps}>
+          {label}
+        </Button>} className={className} {...menuProps}>
+      <Menu.Label>{confirmation}</Menu.Label>
+      <Menu.Item className="text-red-500!" onClick={onConfirm}>
+        {confirm || label}
+      </Menu.Item>
+      <Menu.Item>{cancel}</Menu.Item>
+    </Menu>);
+}

package/components/ConfirmationButton/index.d.ts

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

package/components/ConfirmationButton/index.jsx

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

package/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentProps } from "react";
+import * as RContextMenu from "@radix-ui/react-context-menu";
+declare function ContextMenuContent({ className, children, ...props }: ComponentProps<typeof RContextMenu.Content>): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ComponentProps<typeof RContextMenu.Separator>): React.JSX.Element;
+declare function ContextMenuItem({ className, href, ...props }: ComponentProps<typeof RContextMenu.Item> & {
+    href?: string;
+}): React.JSX.Element;
+declare function ContextMenuItemIndicator({ className, ...props }: ComponentProps<typeof RContextMenu.ItemIndicator>): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, indicatorClassName, ...props }: ComponentProps<typeof RContextMenu.CheckboxItem> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
+declare function ContextMenuSubContent({ className, children, sideOffset, alignOffset, ...props }: ComponentProps<typeof RContextMenu.SubContent>): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, href, children, ...props }: ComponentProps<typeof RContextMenu.SubTrigger> & {
+    href?: string;
+}): React.JSX.Element;
+declare const ContextMenu: {
+    Root: React.FC<RContextMenu.ContextMenuProps>;
+    Trigger: React.ForwardRefExoticComponent<RContextMenu.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+    Content: typeof ContextMenuContent;
+    Item: typeof ContextMenuItem;
+    Separator: typeof ContextMenuSeparator;
+    CheckboxItem: typeof ContextMenuCheckboxItem;
+    ItemIndicator: typeof ContextMenuItemIndicator;
+    Sub: React.FC<RContextMenu.ContextMenuSubProps>;
+    SubContent: typeof ContextMenuSubContent;
+    SubTrigger: typeof ContextMenuSubTrigger;
+};
+export default ContextMenu;

package/components/ContextMenu/ContextMenu.jsx

@@ -0,0 +1,70 @@
+import React, { Fragment } from "react";
+import * as RContextMenu from "@radix-ui/react-context-menu";
+import { CheckIcon } from "@heroicons/react/16/solid";
+import Link from "next/link";
+import clsx from "../../utils/clsx";
+import { dropdownCheckboxItemClassName, dropdownItemClassName, dropdownItemIndicatorClassName, dropdownSeparatorClassName, dropdownSubTriggerClassName, } from "../../styles/Dropdown.classNames";
+import { modalContentClassName } from "../../styles/Modal.classNames";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+function ContextMenuContent({ className, children, ...props }) {
+    return (<RContextMenu.Portal>
+      <RContextMenu.Content {...props} className={clsx(modalContentClassName, "ui-context-menu-content", className)}>
+        {children}
+      </RContextMenu.Content>
+    </RContextMenu.Portal>);
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (<RContextMenu.Separator {...props} className={clsx(dropdownSeparatorClassName, "ui-context-menu-separator", className)}/>);
+}
+function ContextMenuItem({ className, href, ...props }) {
+    const Wrapper = href ? Link : Fragment;
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Wrapper {...(href ? { href } : {})}>
+      <RContextMenu.Item {...props} className={clsx(dropdownItemClassName, "ui-context-menu-item", className)}/>
+    </Wrapper>);
+}
+function ContextMenuItemIndicator({ className, ...props }) {
+    return (<RContextMenu.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-context-menu-checkbox-item-indicator", className)} {...props}/>);
+}
+function ContextMenuCheckboxItem({ className, children, indicatorClassName, ...props }) {
+    return (<RContextMenu.CheckboxItem {...props} className={clsx(dropdownCheckboxItemClassName, "ui-context-menu-checkbox-item", className)}>
+      <ContextMenuItemIndicator className={clsx("ui-context-menu-checkbox-item-indicator", indicatorClassName)}>
+        <CheckIcon />
+      </ContextMenuItemIndicator>
+      {children}
+    </RContextMenu.CheckboxItem>);
+}
+function ContextMenuSubContent({ className, children, sideOffset = 2, alignOffset = -4, ...props }) {
+    return (<RContextMenu.Portal>
+      <RContextMenu.SubContent sideOffset={sideOffset} alignOffset={alignOffset} {...props} className={clsx(modalContentClassName, "ui-context-menu-sub-content", className)}>
+        {children}
+      </RContextMenu.SubContent>
+    </RContextMenu.Portal>);
+}
+function ContextMenuSubTrigger({ className, href, children, ...props }) {
+    const Wrapper = href ? Link : Fragment;
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Wrapper {...(href ? { href } : {})}>
+      <RContextMenu.SubTrigger {...props} className={clsx(dropdownSubTriggerClassName, "ui-context-menu-sub-trigger", className)}>
+        {children}
+        <div className={clsx("absolute right-1.5 top-1.5 inline-flex items-center justify-center", "[&>svg]:h-4 [&>svg]:w-4")}>
+          <ChevronRightIcon />
+        </div>
+      </RContextMenu.SubTrigger>
+    </Wrapper>);
+}
+const ContextMenu = {
+    Root: RContextMenu.Root,
+    Trigger: RContextMenu.Trigger,
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    Separator: ContextMenuSeparator,
+    CheckboxItem: ContextMenuCheckboxItem,
+    ItemIndicator: ContextMenuItemIndicator,
+    Sub: RContextMenu.Sub,
+    SubContent: ContextMenuSubContent,
+    SubTrigger: ContextMenuSubTrigger,
+};
+export default ContextMenu;

package/components/ContextMenu/index.d.ts

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

package/components/ContextMenu/index.jsx

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