@majapisoftwares/ui 4.0.2

package/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,7 @@
+export type CopyButtonProps = {
+    text: string;
+    copyText?: string;
+    copiedText?: string;
+    className?: string;
+};
+export default function CopyButton({ text, copyText, copiedText, className, }: CopyButtonProps): import("react").JSX.Element;

package/components/CopyButton/CopyButton.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import clsx from "../../utils/clsx";
+import { ClipboardIcon } from "@heroicons/react/24/outline";
+import Button from "../Button";
+export default function CopyButton({ text, copyText = "Copy", copiedText = "Copied!", className, }) {
+    const [copyCount, setCopyCount] = useState(0);
+    const copied = copyCount > 0;
+    useEffect(() => {
+        if (copyCount > 0) {
+            const timeout = setTimeout(() => setCopyCount(0), 1000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [copyCount]);
+    return (<Button type="button" color={copied ? "success" : undefined} size="sm" className={clsx("absolute right-2.5 top-2.5 opacity-0 backdrop-blur-sm focus:opacity-100 group-hover:opacity-100", className)} onClick={() => {
+            window.navigator.clipboard.writeText(text).then(() => {
+                setCopyCount((count) => count + 1);
+            });
+        }} rounded>
+      <span aria-hidden={copied} className={clsx("pointer-events-none flex items-center gap-0.5 transition-[transform,opacity]", copied && "-translate-y-1.5 opacity-0")}>
+        <ClipboardIcon className="mr-2 h-4 w-4"/>
+        {copyText}
+      </span>
+      <span aria-hidden={!copied} className={clsx("pointer-events-none absolute inset-0 flex items-center justify-center transition-[transform,opacity]", !copied && "translate-y-1.5 opacity-0")}>
+        {copiedText}
+      </span>
+    </Button>);
+}

package/components/CopyButton/index.d.ts

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

package/components/CopyButton/index.jsx

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

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from "../Input";
+declare function DateInput({ readOnly, value, onValueChange, ref, ...props }: Omit<InputProps<false>, "value"> & {
+    value?: string;
+    onValueChange?: (value?: string) => void;
+}): import("react").JSX.Element;
+export default DateInput;

package/components/DateInput/DateInput.jsx

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import Input from "../Input";
+import { CalendarIcon } from "@heroicons/react/20/solid";
+import { useRefValue } from "./useRefValue";
+import dayjs from "dayjs";
+function DateInput({ readOnly, value, onValueChange, ref, ...props }) {
+    const realRef = useRefValue(ref);
+    const formattedValue = useMemo(() => (value && value.includes("T") ? value.split("T")[0] : value) || "", [value]);
+    return (<Input {...props} onChange={(e) => onValueChange?.(e.target.value
+            ? `${e.target.value}T${dayjs()
+                .set("hour", 0)
+                .set("minute", 0)
+                .set("second", 0)
+                .set("millisecond", 0)
+                .toISOString()
+                .split("T")[1]}`
+            : e.target.value)} ref={realRef} type="date" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" trailing={!readOnly ? <CalendarIcon className="w-5"/> : undefined} inputClassName="pr-3!" readOnly={readOnly} value={formattedValue}/>);
+}
+export default DateInput;

package/components/DateInput/DateTimeInput.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from "../Input";
+declare function DateTimeInput({ readOnly, ref, ...props }: InputProps<false>): import("react").JSX.Element;
+export default DateTimeInput;

package/components/DateInput/DateTimeInput.jsx

@@ -0,0 +1,8 @@
+import Input from "../Input";
+import { CalendarIcon } from "@heroicons/react/20/solid";
+import { useRefValue } from "./useRefValue";
+function DateTimeInput({ readOnly, ref, ...props }) {
+    const realRef = useRefValue(ref);
+    return (<Input {...props} ref={realRef} type="datetime-local" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" trailing={!readOnly ? <CalendarIcon className="w-5"/> : undefined} inputClassName="pr-3!" readOnly={readOnly}/>);
+}
+export default DateTimeInput;

package/components/DateInput/index.d.ts

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

package/components/DateInput/index.jsx

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

package/components/DateInput/useRefValue.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from "react";
+import "dayjs/locale/pt-br";
+export declare function parseDate(value: string): string;
+export declare function formatDate(value: string): string;
+export declare function useRefValue(ref?: Ref<HTMLInputElement>): import("react").RefObject<HTMLInputElement | null>;

package/components/DateInput/useRefValue.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+import dayjs from "dayjs";
+import "dayjs/locale/pt-br";
+dayjs.locale("pt-br");
+export function parseDate(value) {
+    try {
+        // noinspection SpellCheckingInspection
+        return dayjs(value, "YYYY-MM-DDTHH:mm").toISOString();
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        return value;
+    }
+}
+export function formatDate(value) {
+    try {
+        // noinspection SpellCheckingInspection
+        return dayjs(value).format("YYYY-MM-DDTHH:mm");
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        return value;
+    }
+}
+export function useRefValue(ref) {
+    const realRef = useRef(null);
+    const innerRef = useRef({
+        get value() {
+            return parseDate(realRef.current?.value || "");
+        },
+        set value(value) {
+            if (realRef.current) {
+                realRef.current.value = formatDate(value);
+            }
+        },
+    });
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(innerRef.current);
+            }
+            else {
+                ref.current = innerRef.current;
+            }
+        }
+    }, [ref]);
+    return realRef;
+}

package/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,19 @@
+import React, { ComponentProps, ReactElement, ReactNode } from "react";
+import { DateRange, Matcher, ModifiersClassNames } from "react-day-picker";
+import Button from "../Button";
+import type { DayPickerProps } from "react-day-picker/src/types/props";
+export type { DateRange };
+export default function DatePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, footer, monthFooter, modifiers, modifiersClassNames, disabled, defaultMonth, }: {
+    value?: Date | string;
+    onValueChange?: (value?: Date) => void;
+    children?: (value: string) => ReactElement;
+    buttonProps?: ComponentProps<typeof Button>;
+    fromDate?: Date;
+    toDate?: Date;
+    footer?: ReactNode;
+    monthFooter?: ReactNode;
+    modifiers?: DayPickerProps["modifiers"];
+    modifiersClassNames?: ModifiersClassNames;
+    disabled?: Matcher | Matcher[];
+    defaultMonth?: Date;
+}): React.JSX.Element;

package/components/DatePicker/DatePicker.jsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useMemo, useState, } from "react";
+import { DayPicker, } from "react-day-picker";
+import dayjs from "dayjs";
+import { CalendarIcon } from "@heroicons/react/20/solid";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+import { useDeepCompareEffect } from "react-use";
+import Popover from "../Popover";
+import { dayPickerButtonClassName, dayPickerClassNames, } from "../../styles/DayPicker.classNames";
+export default function DatePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, footer, monthFooter, modifiers, modifiersClassNames, disabled, defaultMonth, }) {
+    const [open, setOpen] = useState(false);
+    const convertedValue = value && typeof value === "string"
+        ? dayjs(value).toDate()
+        : (value || undefined);
+    const [date, setDate] = useState(convertedValue);
+    useDeepCompareEffect(() => {
+        onValueChange?.(date);
+    }, [date || {}]);
+    useDeepCompareEffect(() => {
+        setDate(convertedValue);
+    }, [convertedValue || {}]);
+    const buttonText = useMemo(() => {
+        return date ? dayjs(date).format("ll") : "";
+    }, [date]);
+    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
+      {buttonText}
+    </Button>);
+    const defaultDisabled = useMemo(() => [
+        ...(fromDate
+            ? [
+                {
+                    before: fromDate,
+                },
+            ]
+            : []),
+        ...(toDate
+            ? [
+                {
+                    after: toDate,
+                },
+            ]
+            : []),
+    ], [fromDate, toDate]);
+    const onSelect = useCallback((value) => {
+        setOpen(false);
+        setDate(value);
+    }, []);
+    return (<Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>{children2}</Popover.Trigger>
+      <Popover.Content>
+        <DayPicker mode="single" selected={date} onSelect={onSelect} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} footer={monthFooter} modifiers={modifiers} modifiersClassNames={modifiersClassNames} disabled={disabled || defaultDisabled} defaultMonth={defaultMonth}/>
+        {footer}
+      </Popover.Content>
+    </Popover.Root>);
+}

package/components/DatePicker/index.d.ts

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

package/components/DatePicker/index.jsx

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

package/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,16 @@
+import React, { ComponentProps, ReactElement, ReactNode } from "react";
+import { DateRange } from "react-day-picker";
+import Button from "../Button";
+export type { DateRange };
+export default function DateRangePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, min, max, footer, monthFooter, }: {
+    value?: DateRange;
+    onValueChange?: (value?: DateRange) => void;
+    children?: (value: string) => ReactElement;
+    buttonProps?: ComponentProps<typeof Button>;
+    fromDate?: Date;
+    toDate?: Date;
+    min?: number;
+    max?: number;
+    footer?: ReactNode;
+    monthFooter?: ReactNode;
+}): React.JSX.Element;

package/components/DateRangePicker/DateRangePicker.jsx

@@ -0,0 +1,56 @@
+import React, { useMemo, useState, } from "react";
+import { DayPicker } from "react-day-picker";
+import dayjs from "dayjs";
+import { CalendarIcon } from "@heroicons/react/20/solid";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+import { useDeepCompareEffect } from "react-use";
+import Popover from "../Popover";
+import { dayPickerButtonClassName, dayPickerClassNames, } from "../../styles/DayPicker.classNames";
+export default function DateRangePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, min, max, footer, monthFooter, }) {
+    const [range, setRange] = useState(value);
+    useDeepCompareEffect(() => {
+        onValueChange?.(range);
+    }, [range || {}]);
+    useDeepCompareEffect(() => {
+        setRange(value);
+    }, [value || {}]);
+    const buttonText = useMemo(() => {
+        let buttonText = "";
+        if (range?.from) {
+            if (!range.to) {
+                buttonText = dayjs(range.from).format("ll");
+            }
+            else if (range.to) {
+                buttonText = `${dayjs(range.from).format("ll")} – ${dayjs(range.to).format("ll")}`;
+            }
+        }
+        return buttonText;
+    }, [range]);
+    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
+      {buttonText}
+    </Button>);
+    const hidden = useMemo(() => [
+        ...(fromDate
+            ? [
+                {
+                    before: fromDate,
+                },
+            ]
+            : []),
+        ...(toDate
+            ? [
+                {
+                    after: toDate,
+                },
+            ]
+            : []),
+    ], [fromDate, toDate]);
+    return (<Popover.Root>
+      <Popover.Trigger asChild>{children2}</Popover.Trigger>
+      <Popover.Content>
+        <DayPicker mode="range" defaultMonth={value?.from} selected={range} onSelect={setRange} numberOfMonths={2} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} hidden={hidden} min={min} max={max} footer={monthFooter} excludeDisabled/>
+        {footer}
+      </Popover.Content>
+    </Popover.Root>);
+}

package/components/DateRangePicker/index.d.ts

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

package/components/DateRangePicker/index.jsx

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

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,25 @@
+import * as RDialog from "@radix-ui/react-dialog";
+import { DialogContentProps } from "@radix-ui/react-dialog";
+import { ReactNode } from "react";
+export interface DialogProps {
+    title: ReactNode;
+    description?: ReactNode;
+    contentClassName?: string;
+    contentOverflowClassName?: string;
+    closeButtonClassName?: string;
+    overlayClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    hideTitle?: boolean;
+    contentProps?: Omit<DialogContentProps, "children">;
+    hideCloseButton?: boolean;
+}
+declare function Dialog({ children, title, description, open, onOpenChange, contentClassName, contentOverflowClassName, closeButtonClassName, overlayClassName, titleClassName, descriptionClassName, hideTitle, contentProps, hideCloseButton, }: {
+    children: ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+} & DialogProps): import("react").JSX.Element;
+declare namespace Dialog {
+    var Close: import("react").ForwardRefExoticComponent<RDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+}
+export default Dialog;

package/components/Dialog/Dialog.jsx

@@ -0,0 +1,35 @@
+import * as RDialog from "@radix-ui/react-dialog";
+import { Fragment } from "react";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+import { modalContentClassName } from "../../styles/Modal.classNames";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+export default function Dialog({ children, title, description, open, onOpenChange, contentClassName, contentOverflowClassName, closeButtonClassName, overlayClassName, titleClassName, descriptionClassName, hideTitle, contentProps, hideCloseButton, }) {
+    const TitleWrapper = !hideTitle ? Fragment : VisuallyHidden;
+    return (<RDialog.Root open={open} onOpenChange={onOpenChange}>
+      <RDialog.Portal>
+        <RDialog.Overlay className={clsx("ui-dialog-overlay", "fixed inset-0 z-20 flex items-center justify-center bg-black/50", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
+          <RDialog.Content className={clsx(modalContentClassName, "ui-dialog-content", "relative p-0 focus:outline-hidden", contentClassName, contentProps?.className)} {...(!description ? { "aria-describedby": undefined } : {})} {...contentProps}>
+            <div className={clsx("flex max-h-[85vh] w-[90vw] max-w-[450px] flex-col gap-3 overflow-auto p-4", contentOverflowClassName)}>
+              <TitleWrapper>
+                <RDialog.Title className={clsx("ui-dialog-title", "text-lg leading-none font-medium text-zinc-900 dark:text-zinc-50", titleClassName)}>
+                  {title}
+                </RDialog.Title>
+              </TitleWrapper>
+              {description && (<RDialog.Description className={clsx("ui-dialog-description", "text-zinc-700 dark:text-zinc-300", descriptionClassName)}>
+                  {description}
+                </RDialog.Description>)}
+              {children}
+              {!hideCloseButton && (<RDialog.Close asChild>
+                  <Button className={clsx("absolute top-1 right-1 p-1.5", "ui-dialog-close-button", closeButtonClassName)} aria-label="Close" variant="text" icon>
+                    <XMarkIcon />
+                  </Button>
+                </RDialog.Close>)}
+            </div>
+          </RDialog.Content>
+        </RDialog.Overlay>
+      </RDialog.Portal>
+    </RDialog.Root>);
+}
+Dialog.Close = RDialog.Close;

package/components/Dialog/Dialogs.d.ts

@@ -0,0 +1 @@
+export default function Dialogs(): import("react").JSX.Element;

package/components/Dialog/Dialogs.jsx

@@ -0,0 +1,21 @@
+import { useSnapshot } from "valtio";
+import dialogsState, { closeDialog } from "./dialogs.state";
+import { useEffect } from "react";
+import Dialog from "./Dialog";
+export default function Dialogs() {
+    const { dialogs, setRendered } = useSnapshot(dialogsState);
+    useEffect(() => {
+        setRendered(true);
+        return () => {
+            setRendered(false);
+        };
+    }, [setRendered]);
+    return (<>
+      {dialogs.map((dialog) => (<Dialog key={dialog._id} open={dialog.open} onOpenChange={() => {
+                closeDialog(dialog._id);
+                dialog.props.onClose?.(dialog._id);
+            }} {...dialog.props} title={dialog.props.title} description={dialog.props.description}>
+          {dialog.props.content}
+        </Dialog>))}
+    </>);
+}

package/components/Dialog/dialogs.state.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { DialogProps } from "./Dialog";
+export type IDialog = {
+    _id: string;
+    open: boolean;
+    props: {
+        content: ReactNode;
+        onClose?: (_id: string) => void;
+    } & DialogProps;
+};
+declare const dialogsState: {
+    rendered: boolean;
+    setRendered(rendered: boolean): void;
+    dialogs: IDialog[];
+    add({ _id, open, ...dialog }: Partial<Omit<IDialog, "props">> & IDialog["props"]): void;
+    remove(_id: string): void;
+    update(dialog: Pick<IDialog, "_id"> & Partial<Omit<IDialog, "_id">>): void;
+};
+export declare function showDialog(dialog: Partial<Omit<IDialog, "props">> & IDialog["props"]): void;
+export declare function closeDialog(_id: string): void;
+export default dialogsState;

package/components/Dialog/dialogs.state.js

@@ -0,0 +1,40 @@
+import { proxy, ref } from "valtio";
+import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
+import { find } from "lodash-es";
+const dialogsState = proxy({
+    rendered: false,
+    setRendered(rendered) {
+        dialogsState.rendered = rendered;
+    },
+    dialogs: [],
+    add({ _id = isomorphicObjectId().toString(), open = true, ...dialog }) {
+        if (!dialogsState.rendered) {
+            console.error("<Dialogs /> is not rendered. The dialog will be ignored.");
+        }
+        dialogsState.dialogs.push({
+            _id,
+            open,
+            props: ref(dialog),
+        });
+    },
+    remove(_id) {
+        dialogsState.dialogs.splice(dialogsState.dialogs.findIndex((n) => n._id === _id), 1);
+    },
+    update(dialog) {
+        const updateDialog = find(dialogsState.dialogs, { _id: dialog._id });
+        if (updateDialog) {
+            Object.assign(updateDialog, dialog);
+        }
+    },
+});
+export function showDialog(dialog) {
+    dialogsState.add(dialog);
+}
+export function closeDialog(_id) {
+    dialogsState.update({
+        _id,
+        open: false,
+    });
+    setTimeout(() => dialogsState.remove(_id), 300);
+}
+export default dialogsState;

package/components/Dialog/index.d.ts

@@ -0,0 +1,6 @@
+import Dialog from "./Dialog";
+export * from "./Dialogs";
+export { default as Dialogs } from "./Dialogs";
+export default Dialog;
+export { default as dialogsState } from "./dialogs.state";
+export * from "./dialogs.state";

package/components/Dialog/index.jsx

@@ -0,0 +1,7 @@
+import Dialog from "./Dialog";
+export * from "./Dialogs";
+export { default as Dialogs } from "./Dialogs";
+export default Dialog;
+// noinspection JSUnusedGlobalSymbols
+export { default as dialogsState } from "./dialogs.state";
+export * from "./dialogs.state";

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+export type DialogProps = {
+    open?: boolean;
+    onClose?: (open: boolean) => void;
+    onChangeOpen?: (open: boolean) => void;
+    title?: ReactNode;
+    children: ReactNode;
+    position?: "left" | "right";
+    actions?: ReactNode;
+    hideOverlay?: boolean;
+    className?: string;
+    noPadding?: boolean;
+    panelClassName?: string;
+};
+export default function Drawer({ open: defaultOpen, onClose, onChangeOpen, title, children, position, actions, hideOverlay, className, noPadding, panelClassName, }: DialogProps): import("react").JSX.Element;

package/components/Drawer/Drawer.jsx

@@ -0,0 +1,72 @@
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { Dialog as HuiDialog, Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import Button from "../Button/Button";
+import Group from "../Group/Group";
+import clsx from "../../utils/clsx";
+export default function Drawer({ open: defaultOpen, onClose, onChangeOpen, title, children, position = "left", actions, hideOverlay, className, noPadding, panelClassName, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    useEffect(() => {
+        if (onClose && !open) {
+            onClose(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    useEffect(() => {
+        if (onChangeOpen) {
+            onChangeOpen(open || false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    return (<Transition.Root show={open} as={Fragment}>
+      <HuiDialog as="div" className={clsx("relative z-20", className)} onClose={setOpen}>
+        {!hideOverlay ? (<Transition.Child as={Fragment} enter="ease-in-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in-out duration-300" leaveFrom="opacity-100" leaveTo="opacity-0">
+            <div className="fixed inset-0 bg-black/70 bg-opacity-75 transition-opacity"/>
+          </Transition.Child>) : (<div className="fixed inset-0"/>)}
+
+        <div className="fixed inset-0 overflow-hidden">
+          <div className="absolute inset-0 overflow-hidden">
+            <div className={clsx("pointer-events-none fixed inset-y-0 flex max-w-full", {
+            ["left-0 pr-10"]: !noPadding && position === "left",
+            ["right-0 pl-10"]: !noPadding && position === "right",
+        })}>
+              <Transition.Child as={Fragment} enter="transform transition ease-in-out duration-300 sm:duration-500" enterFrom={position === "right"
+            ? "translate-x-full"
+            : "-translate-x-full"} enterTo={position === "right" ? "translate-x-0" : "translate-x-0"} leave="transform transition ease-in-out duration-300 sm:duration-500" leaveFrom={position === "right" ? "translate-x-0" : "translate-x-0"} leaveTo={position === "right"
+            ? "translate-x-full"
+            : "-translate-x-full"}>
+                <HuiDialog.Panel className="pointer-events-auto w-screen max-w-md">
+                  <div className={clsx("flex h-full flex-col divide-y divide-zinc-200 bg-white shadow-xl dark:bg-zinc-900", panelClassName)}>
+                    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-6">
+                      <div className="sticky top-0 z-10 bg-white/95 px-4 py-6 backdrop-blur-sm sm:px-6 [@supports(backdrop-filter:blur(0))]:bg-white/50 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75">
+                        <div className="flex items-start">
+                          {title && (<HuiDialog.Title className="text-lg font-medium text-zinc-900">
+                              {title}
+                            </HuiDialog.Title>)}
+                          <div className="grow"/>
+                          <div className="ml-3 flex h-7 items-center">
+                            <Button icon variant="text" onClick={useCallback(() => setOpen(false), [])}>
+                              <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="relative flex-1 px-4 pt-1 sm:px-6">
+                        {children}
+                      </div>
+                    </div>
+                    {actions && (<Group className="shrink-0 justify-end px-4 py-4">
+                        {actions}
+                      </Group>)}
+                  </div>
+                </HuiDialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </HuiDialog>
+    </Transition.Root>);
+}

package/components/Drawer/index.d.ts

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

package/components/Drawer/index.jsx

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

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,33 @@
+import React, { ComponentProps } from "react";
+import * as RDropdownMenu from "@radix-ui/react-dropdown-menu";
+declare function DropdownMenuContent({ className, arrowClassName, children, sideOffset, collisionPadding, ...props }: ComponentProps<typeof RDropdownMenu.Content> & {
+    arrowClassName?: string;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof RDropdownMenu.Separator>): React.JSX.Element;
+declare function DropdownMenuItem({ className, href, target, ...props }: ComponentProps<typeof RDropdownMenu.Item> & {
+    href?: string;
+    target?: string;
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof RDropdownMenu.Item>): React.JSX.Element;
+declare function DropdownMenuItemIndicator({ className, ...props }: ComponentProps<typeof RDropdownMenu.ItemIndicator>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, indicatorClassName, ...props }: ComponentProps<typeof RDropdownMenu.CheckboxItem> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, children, sideOffset, alignOffset, ...props }: ComponentProps<typeof RDropdownMenu.SubContent>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, href, children, ...props }: ComponentProps<typeof RDropdownMenu.SubTrigger> & {
+    href?: string;
+}): React.JSX.Element;
+declare const DropdownMenu: {
+    Root: React.FC<RDropdownMenu.DropdownMenuProps>;
+    Trigger: React.ForwardRefExoticComponent<RDropdownMenu.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DropdownMenuContent;
+    Item: typeof DropdownMenuItem;
+    Separator: typeof DropdownMenuSeparator;
+    CheckboxItem: typeof DropdownMenuCheckboxItem;
+    Label: typeof DropdownMenuLabel;
+    ItemIndicator: typeof DropdownMenuItemIndicator;
+    Sub: React.FC<RDropdownMenu.DropdownMenuSubProps>;
+    SubContent: typeof DropdownMenuSubContent;
+    SubTrigger: typeof DropdownMenuSubTrigger;
+};
+export default DropdownMenu;