untitledui 0.1.5 → 0.1.8

package/templates/default/src/components/shared/radio-groups/radio-group-radio-button.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import type { FC } from "react";
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-type RadioGroupItemType = {
-    value: string;
-    title: string;
-    disabled?: boolean;
-    description: string;
-    secondaryTitle: string;
-    icon: FC<{ className?: string }>;
-};
-
-interface RadioGroupRadioButtonProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: RadioGroupItemType[];
-}
-
-export const RadioGroupRadioButton = ({ items, size = "sm", className, ...props }: RadioGroupRadioButtonProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((plan) => (
-                <Radio
-                    isDisabled={plan.disabled}
-                    key={plan.value}
-                    value={plan.value}
-                    className={({ isDisabled, isSelected, isFocusVisible }) =>
-                        cx(
-                            "relative flex cursor-pointer rounded-xl bg-primary p-4 transition duration-100 ring-inset",
-                            size === "md" ? "gap-3" : "gap-2",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isSelected, isDisabled, isFocusVisible }) => (
-                        <>
-                            <div
-                                className={cx(
-                                    "relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full transition-inherit-all ring-inset",
-                                    size === "md" ? "size-5" : "size-4",
-                                    isSelected ? "bg-brand-solid" : "ring-1 ring-border-primary",
-                                    isDisabled && "bg-disabled_subtle ring-1 ring-border-disabled",
-                                    isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                                )}
-                            >
-                                <div
-                                    className={cx(
-                                        "absolute rounded-full bg-fg-white opacity-0 transition-inherit-all",
-                                        size === "md" ? "size-2" : "size-1.5",
-                                        isSelected ? "opacity-100" : "opacity-0",
-                                        isDisabled && "bg-fg-disabled_subtle",
-                                    )}
-                                />
-                            </div>
-
-                            <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
-                                <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
-                                    <span className={cx("tt-sm-md text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
-                                    <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
-                                </Label>
-                                <Text slot="description" className={cx("tt-sm text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
-                                    {plan.description}
-                                </Text>
-                            </div>
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-groups.tsx

@@ -1,8 +0,0 @@
-"use client";
-
-export { RadioGroupIconSimple as IconSimple } from "./radio-group-icon-simple";
-export { RadioGroupIconCard as IconCard } from "./radio-group-icon-card";
-export { RadioGroupAvatar as Avatar } from "./radio-group-avatar";
-export { RadioGroupPaymentIcon as PaymentIcon } from "./radio-group-payment-icon";
-export { RadioGroupRadioButton as RadioButton } from "./radio-group-radio-button";
-export { RadioGroupCheckbox as Checkbox } from "./radio-group-checkbox";

package/templates/default/src/components/shared/select/combobox.tsx

@@ -1,161 +0,0 @@
-"use client";
-
-import type { FocusEventHandler, PointerEventHandler, RefAttributes } from "react";
-import { useCallback, useContext, useRef, useState } from "react";
-import { SearchLg as SearchIcon } from "@untitledui/icons";
-import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps } from "react-aria-components";
-import {
-    Button as AriaButton,
-    ComboBox as AriaComboBox,
-    Group as AriaGroup,
-    Input as AriaInput,
-    ListBox as AriaListBox,
-    ComboBoxStateContext,
-} from "react-aria-components";
-import { useHotkeys } from "react-hotkeys-hook";
-import { cx } from "@/components/utils/cx";
-import { useResizeObserver } from "@/hooks/use-resize-observer";
-import HintText from "../input/hint-text";
-import Label from "../input/label";
-import { ComboBoxTagsValue } from "./multi-select";
-import { Popover } from "./popover";
-import { type CommonProps, SelectContext, type SelectItemType, sizes } from "./select";
-
-type ComboBoxTypes = "search" | "tags";
-
-interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
-    shortcut?: boolean;
-    type?: ComboBoxTypes;
-    items?: SelectItemType[];
-    popoverClassName?: string;
-    shortcutClassName?: string;
-    children: AriaListBoxProps<SelectItemType>["children"];
-}
-
-interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
-    size: "sm" | "md";
-    shortcut: boolean;
-    isDisabled: boolean;
-    placeholder?: string;
-    shortcutClassName?: string;
-    onFocus?: FocusEventHandler;
-    onPointerEnter?: PointerEventHandler;
-}
-
-const ComboBoxValue = ({ size, isDisabled, shortcut, placeholder, shortcutClassName, ...otherProps }: ComboBoxValueProps) => {
-    const state = useContext(ComboBoxStateContext);
-
-    const value = state?.selectedItem?.value || null;
-    const inputValue = state?.inputValue || null;
-
-    const first = inputValue?.split(value?.supportingText)?.[0] || "";
-    const last = inputValue?.split(first)[1];
-
-    useHotkeys("meta+k", () => state?.setOpen(true), { enabled: !isDisabled && shortcut });
-
-    return (
-        <AriaGroup
-            {...otherProps}
-            className={({ isFocusWithin, isDisabled }) =>
-                cx(
-                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition-shadow duration-200 ease-in-out ring-inset",
-                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
-                    isFocusWithin && "ring-2 ring-border-brand",
-                    sizes[size].root,
-                )
-            }
-        >
-            <AriaButton>
-                <SearchIcon className="size-5 text-fg-quaternary" />
-            </AriaButton>
-
-            <div className="relative flex w-full items-center gap-2">
-                {inputValue && (
-                    <span className="absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 gap-2 truncate" aria-hidden="true">
-                        <p className={cx("tt-md-md text-primary", isDisabled && "text-disabled")}>{first}</p>
-                        {last && <p className={cx("-ml-[3px] tt-md text-tertiary", isDisabled && "text-disabled")}>{last}</p>}
-                    </span>
-                )}
-                <AriaInput
-                    placeholder={placeholder}
-                    className="z-10 w-full appearance-none bg-transparent tt-md text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
-                />
-            </div>
-
-            {shortcut && (
-                <div
-                    className={cx(
-                        "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
-                        sizes[size].shortcut,
-                        shortcutClassName,
-                    )}
-                >
-                    <span
-                        className={cx(
-                            "pointer-events-none rounded px-1 py-px tt-xs-md text-quaternary ring-1 ring-border-secondary select-none ring-inset",
-                            isDisabled && "bg-transparent text-disabled",
-                        )}
-                        aria-hidden="true"
-                    >
-                        ⌘K
-                    </span>
-                </div>
-            )}
-        </AriaGroup>
-    );
-};
-
-export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = true, size = "sm", children, items, ...rest }: ComboBoxProps) => {
-    const placeholderRef = useRef<HTMLDivElement>(null);
-    const [popoverWidth, setPopoverWidth] = useState("");
-
-    // Resize observer for popover width
-    const onResize = useCallback(() => {
-        if (!placeholderRef.current) return;
-        let divRect = placeholderRef.current?.getBoundingClientRect();
-        setPopoverWidth(divRect.width + "px");
-    }, [placeholderRef, setPopoverWidth]);
-
-    useResizeObserver({
-        ref: placeholderRef,
-        onResize: onResize,
-        box: "border-box",
-    });
-
-    return (
-        <SelectContext.Provider value={{ type, size }}>
-            <AriaComboBox menuTrigger="focus" {...rest}>
-                {(state) => (
-                    <div className="flex flex-col gap-1.5">
-                        {rest.label && (
-                            <Label isRequired={state.isRequired} tooltip={rest.tooltip}>
-                                {rest.label}
-                            </Label>
-                        )}
-
-                        <ComboBoxValue
-                            ref={placeholderRef}
-                            placeholder={placeholder}
-                            shortcut={shortcut}
-                            size={size}
-                            // This is a workaround to correctly calculating the trigger width
-                            // while using ResizeObserver wasn't 100% reliable.
-                            onFocus={onResize}
-                            onPointerEnter={onResize}
-                            {...state}
-                            {...rest}
-                        />
-
-                        <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={rest.popoverClassName}>
-                            <AriaListBox items={items} className="size-full outline-hidden">
-                                {children}
-                            </AriaListBox>
-                        </Popover>
-
-                        {rest.hint && <HintText isInvalid={state.isInvalid}>{rest.hint}</HintText>}
-                    </div>
-                )}
-            </AriaComboBox>
-        </SelectContext.Provider>
-    );
-};

package/templates/default/src/components/shared/select/multi-select.tsx

@@ -1,373 +0,0 @@
-"use client";
-
-import type { FocusEventHandler, KeyboardEvent, PointerEventHandler, RefAttributes } from "react";
-import { createContext, useCallback, useContext, useRef, useState } from "react";
-import { SearchLg } from "@untitledui/icons";
-import { FocusScope, useFilter, useFocusManager } from "react-aria";
-import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps, Key } from "react-aria-components";
-import {
-    Button as AriaButton,
-    ComboBox as AriaComboBox,
-    Group as AriaGroup,
-    Input as AriaInput,
-    ListBox as AriaListBox,
-    ComboBoxStateContext,
-} from "react-aria-components";
-import { useHotkeys } from "react-hotkeys-hook";
-import type { ListData } from "react-stately";
-import { useListData } from "react-stately";
-import { cx } from "@/components/utils/cx";
-import { useResizeObserver } from "@/hooks/use-resize-observer";
-import Avatar from "../avatar/avatar";
-import type { IconComponentType } from "../badges/badge-types";
-import HintText from "../input/hint-text";
-import Label from "../input/label";
-import { TagCloseX } from "../tags/base-components/tag-close-x";
-import { Popover } from "./popover";
-import { type SelectItemType, sizes } from "./select";
-import SelectItem from "./select-item";
-
-interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
-    size: "sm" | "md";
-    shortcut?: boolean;
-    isDisabled?: boolean;
-    placeholder?: string;
-    shortcutClassName?: string;
-    placeholderIcon?: IconComponentType | null;
-    onFocus?: FocusEventHandler;
-    onPointerEnter?: PointerEventHandler;
-}
-
-const ComboboxContext = createContext<{
-    size: "sm" | "md";
-    selectedKeys: Key[];
-    selectedItems: ListData<SelectItemType>;
-    onRemove: (keys: Set<Key>) => void;
-    onInputChange: (value: string) => void;
-}>({
-    size: "sm",
-    selectedKeys: [],
-    selectedItems: {} as ListData<SelectItemType>,
-    onRemove: () => {},
-    onInputChange: () => {},
-});
-
-interface CommonProps {
-    hint?: string;
-    label?: string;
-    tooltip?: string;
-    size?: "sm" | "md";
-    placeholder?: string;
-}
-
-interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
-    shortcut?: boolean;
-    items?: SelectItemType[];
-    popoverClassName?: string;
-    shortcutClassName?: string;
-    selectedItems: ListData<SelectItemType>;
-    placeholderIcon?: IconComponentType | null;
-    children: AriaListBoxProps<SelectItemType>["children"];
-    onItemCleared?: (key: Key) => void;
-    onItemInserted?: (key: Key) => void;
-}
-
-export const ComboBox = ({
-    name,
-    items,
-    children,
-    className,
-    size = "sm",
-    selectedItems,
-    onItemCleared,
-    onItemInserted,
-    shortcut,
-    placeholder = "Search",
-    ...props
-}: ComboBoxProps) => {
-    const { contains } = useFilter({ sensitivity: "base" });
-    const selectedKeys = selectedItems.items.map((i) => i?.id);
-
-    const filter = useCallback(
-        (item: SelectItemType, filterText: string) => {
-            return !selectedKeys.includes(item.id) && contains(item.label, filterText);
-        },
-        [contains, selectedKeys],
-    );
-
-    const accessibleList = useListData({
-        initialItems: items,
-        filter,
-    });
-
-    const [fieldState, setFieldState] = useState<{
-        selectedKey: Key | null;
-        inputValue: string;
-    }>({
-        selectedKey: null,
-        inputValue: "",
-    });
-
-    const onRemove = useCallback(
-        (keys: Set<Key>) => {
-            const key = keys.values().next().value;
-
-            if (!key) return;
-
-            selectedItems.remove(key);
-            onItemCleared?.(key);
-        },
-        [selectedItems, onItemCleared],
-    );
-
-    // TODO: `onSelectionChange` is being called on blur thus causing the already deleted item to reappear
-    const onSelectionChange = (id: Key | null) => {
-        if (!id) {
-            return;
-        }
-
-        const item = accessibleList.getItem(id);
-
-        if (!item) {
-            return;
-        }
-
-        if (!selectedKeys.includes(id as string)) {
-            selectedItems.append(item);
-            setFieldState({
-                inputValue: "",
-                selectedKey: id,
-            });
-            onItemInserted?.(id);
-        }
-
-        accessibleList.setFilterText("");
-    };
-
-    const onInputChange = (value: string) => {
-        setFieldState((prev) => ({
-            inputValue: value,
-            selectedKey: value === "" ? null : prev.selectedKey,
-        }));
-
-        accessibleList.setFilterText(value);
-    };
-
-    const placeholderRef = useRef<HTMLDivElement>(null);
-    const [popoverWidth, setPopoverWidth] = useState("");
-
-    // Resize observer for popover width
-    const onResize = useCallback(() => {
-        if (!placeholderRef.current) return;
-        let divRect = placeholderRef.current?.getBoundingClientRect();
-        setPopoverWidth(divRect.width + "px");
-    }, [placeholderRef, setPopoverWidth]);
-
-    useResizeObserver({
-        ref: placeholderRef,
-        onResize: onResize,
-        box: "border-box",
-    });
-
-    return (
-        <ComboboxContext.Provider
-            value={{
-                size,
-                selectedKeys,
-                selectedItems,
-                onInputChange,
-                onRemove,
-            }}
-        >
-            <AriaComboBox
-                allowsEmptyCollection
-                menuTrigger="focus"
-                items={accessibleList.items}
-                onInputChange={onInputChange}
-                inputValue={fieldState.inputValue}
-                selectedKey={fieldState.selectedKey}
-                onSelectionChange={onSelectionChange}
-                {...props}
-            >
-                {(state) => (
-                    <div className="flex flex-col gap-1.5">
-                        {props.label && (
-                            <Label isRequired={state.isRequired} tooltip={props.tooltip}>
-                                {props.label}
-                            </Label>
-                        )}
-
-                        <ComboBoxTagsValue
-                            size={size}
-                            shortcut={shortcut}
-                            ref={placeholderRef}
-                            placeholder={placeholder}
-                            // This is a workaround to correctly calculating the trigger width
-                            // while using ResizeObserver wasn't 100% reliable.
-                            onFocus={onResize}
-                            onPointerEnter={onResize}
-                            {...state}
-                            {...props}
-                        />
-
-                        <Popover size={"md"} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={props?.popoverClassName}>
-                            <AriaListBox selectionMode="multiple" className="size-full outline-hidden">
-                                {children}
-                            </AriaListBox>
-                        </Popover>
-
-                        {props.hint && <HintText isInvalid={state.isInvalid}>{props.hint}</HintText>}
-                    </div>
-                )}
-            </AriaComboBox>
-        </ComboboxContext.Provider>
-    );
-};
-
-const InnerComboBox = ({ isDisabled, shortcut, shortcutClassName, placeholder }: ComboBoxValueProps) => {
-    const focusManager = useFocusManager();
-    const selectContext = useContext(ComboboxContext);
-
-    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-        const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
-
-        if (!isCaretAtStart && event.currentTarget.value !== "") {
-            return;
-        }
-
-        switch (event.key) {
-            case "Backspace":
-            case "ArrowLeft":
-                focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                break;
-            case "ArrowRight":
-                focusManager?.focusNext({ wrap: false, tabbable: false });
-                break;
-        }
-    };
-
-    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
-        event.preventDefault();
-
-        const isFirstTag = selectContext?.selectedItems?.items?.[0]?.id === value;
-
-        switch (event.key) {
-            case " ":
-            case "Enter":
-            case "Backspace":
-                if (isFirstTag) {
-                    focusManager?.focusNext({ wrap: false, tabbable: false });
-                } else {
-                    focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                }
-
-                selectContext.onRemove(new Set([value]));
-                break;
-
-            case "ArrowLeft":
-                focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                break;
-            case "ArrowRight":
-                focusManager?.focusNext({ wrap: false, tabbable: false });
-                break;
-        }
-    };
-
-    const isSelectionEmpty = selectContext?.selectedItems?.items?.length === 0;
-
-    return (
-        <div className="relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
-            {!isSelectionEmpty &&
-                // TODO: Use <TagList /> here
-                selectContext?.selectedItems?.items?.map((value) => (
-                    <span key={value.id} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-[5px] ring-1 ring-border-primary ring-inset">
-                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
-
-                        <p className="ml-[5px] truncate tt-sm-md whitespace-nowrap text-secondary select-none">{value?.label}</p>
-
-                        <TagCloseX
-                            size="md"
-                            isDisabled={isDisabled}
-                            className="ml-[3px]"
-                            // For workaround, onKeyDown is added to the button
-                            onKeyDown={(event) => handleTagKeyDown(event, value.id)}
-                            onPress={() => selectContext.onRemove(new Set([value.id]))}
-                        />
-                    </span>
-                ))}
-
-            <div className={cx("relative flex min-w-[20%] flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
-                <AriaInput
-                    placeholder={placeholder}
-                    onKeyDown={handleInputKeyDown}
-                    className="w-full flex-[1_0_0] appearance-none bg-transparent tt-md text-ellipsis text-primary caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
-                />
-
-                {shortcut && (
-                    <div
-                        aria-hidden="true"
-                        className={cx(
-                            "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
-                            shortcutClassName,
-                        )}
-                    >
-                        <span
-                            className={cx(
-                                "pointer-events-none rounded px-1 py-px tt-xs-md text-quaternary ring-1 ring-border-secondary select-none ring-inset",
-                                isDisabled && "bg-transparent text-disabled",
-                            )}
-                        >
-                            ⌘K
-                        </span>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export const ComboBoxTagsValue = ({
-    size,
-    isDisabled,
-    shortcut,
-    placeholder,
-    shortcutClassName,
-    placeholderIcon: Icon = SearchLg,
-    ...otherProps
-}: ComboBoxValueProps) => {
-    const state = useContext(ComboBoxStateContext);
-
-    useHotkeys("meta+k", () => state?.setOpen(true), { enabled: !isDisabled && shortcut });
-
-    return (
-        <AriaGroup
-            {...otherProps}
-            className={({ isFocusWithin, isDisabled }) =>
-                cx(
-                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-200 ease-in-out ring-inset",
-                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
-                    isFocusWithin && "ring-2 ring-border-brand",
-                    sizes[size].root,
-                )
-            }
-        >
-            {Icon && (
-                <AriaButton>
-                    <Icon className="size-5 text-fg-quaternary" />
-                </AriaButton>
-            )}
-
-            <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
-                <InnerComboBox size={size} isDisabled={isDisabled} shortcut={shortcut} shortcutClassName={shortcutClassName} placeholder={placeholder} />
-            </FocusScope>
-        </AriaGroup>
-    );
-};
-
-const MultiSelect = ComboBox as typeof ComboBox & {
-    Item: typeof SelectItem;
-};
-
-MultiSelect.Item = SelectItem;
-
-export { MultiSelect as MultiSelect };

package/templates/default/src/components/shared/select/popover.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import type { RefAttributes } from "react";
-import type { PopoverProps as AriaPopoverProps } from "react-aria-components";
-import { Popover as AriaPopover } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
-    size: "sm" | "md";
-}
-
-export const Popover = (props: PopoverProps) => {
-    return (
-        <AriaPopover
-            placement="bottom"
-            containerPadding={0}
-            offset={4}
-            {...props}
-            className={(state) =>
-                cx(
-                    "max-h-64! w-(--trigger-width) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-border-secondary_alt outline-hidden will-change-transform",
-
-                    // scrollbar styles
-                    // "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-alpha-black/15 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-primary [&::-webkit-scrollbar]:w-2",
-                    state.isEntering &&
-                        "duration-150 ease-out animate-in fade-in placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
-                    state.isExiting &&
-                        "duration-100 ease-in animate-out fade-out placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
-                    props.size === "md" && "max-h-80!",
-
-                    typeof props.className === "function" ? props.className(state) : props.className,
-                )
-            }
-        />
-    );
-};