@dataif/cli 0.1.0

package/templates/dataif/services/web/src/components/base/radio-buttons/radio-buttons.tsx

@@ -0,0 +1,127 @@
+import { type ReactNode, type Ref, createContext, useContext } from "react";
+import {
+    Radio as AriaRadio,
+    RadioGroup as AriaRadioGroup,
+    type RadioGroupProps as AriaRadioGroupProps,
+    type RadioProps as AriaRadioProps,
+} from "react-aria-components";
+import { cx } from "@/utils/cx";
+
+export interface RadioGroupContextType {
+    size?: "sm" | "md";
+}
+
+const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+export interface RadioButtonBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = "sm" }: RadioButtonBaseProps) => {
+    return (
+        <div
+            className={cx(
+                "flex size-4 min-h-4 min-w-4 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-primary ring-inset",
+                size === "md" && "size-5 min-h-5 min-w-5",
+                isSelected && !isDisabled && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed border-disabled bg-disabled_subtle",
+                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <div
+                className={cx(
+                    "size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-2",
+                    isDisabled && "bg-fg-disabled_subtle",
+                    isSelected && "opacity-100",
+                )}
+            />
+        </div>
+    );
+};
+RadioButtonBase.displayName = "RadioButtonBase";
+
+interface RadioButtonProps extends AriaRadioProps {
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const RadioButton = ({ label, hint, className, size = "sm", ...ariaRadioProps }: RadioButtonProps) => {
+    const context = useContext(RadioGroupContext);
+
+    size = context?.size ?? size;
+
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaRadio
+            {...ariaRadioProps}
+            className={(renderProps) =>
+                cx(
+                    "flex items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocusVisible }) => (
+                <>
+                    <RadioButtonBase
+                        size={size}
+                        isSelected={isSelected}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        className={label || hint ? "mt-0.5" : ""}
+                    />
+                    {(label || hint) && (
+                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaRadio>
+    );
+};
+RadioButton.displayName = "RadioButton";
+
+interface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const RadioGroup = ({ children, className, size = "sm", ...props }: RadioGroupProps) => {
+    return (
+        <RadioGroupContext.Provider value={{ size }}>
+            <AriaRadioGroup {...props} className={cx("flex flex-col gap-4", className)}>
+                {children}
+            </AriaRadioGroup>
+        </RadioGroupContext.Provider>
+    );
+};

package/templates/dataif/services/web/src/components/base/select/combobox.tsx

@@ -0,0 +1,150 @@
+import type { FocusEventHandler, PointerEventHandler, RefAttributes, RefObject } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
+import { SearchLg as SearchIcon } from "@untitledui/icons";
+import type { ComboBoxProps as AriaComboBoxProps, GroupProps as AriaGroupProps, ListBoxProps as AriaListBoxProps } from "react-aria-components";
+import { ComboBox as AriaComboBox, Group as AriaGroup, Input as AriaInput, ListBox as AriaListBox, ComboBoxStateContext } from "react-aria-components";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Popover } from "@/components/base/select/popover";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "@/components/base/select/select";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import { cx } from "@/utils/cx";
+
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    children: AriaListBoxProps<SelectItemType>["children"];
+}
+
+interface ComboBoxValueProps extends AriaGroupProps {
+    size: "sm" | "md";
+    shortcut: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+
+const ComboBoxValue = ({ size, 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];
+
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {({ isDisabled }) => (
+                <>
+                    <SearchIcon className="pointer-events-none size-5 shrink-0 text-fg-quaternary" />
+
+                    <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("text-md font-medium text-primary", isDisabled && "text-disabled")}>{first}</p>
+                                {last && <p className={cx("-ml-0.75 text-md text-tertiary", isDisabled && "text-disabled")}>{last}</p>}
+                            </span>
+                        )}
+
+                        <AriaInput
+                            placeholder={placeholder}
+                            className="z-10 w-full appearance-none bg-transparent text-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",
+                                isDisabled && "to-bg-disabled_subtle",
+                                sizes[size].shortcut,
+                                shortcutClassName,
+                            )}
+                        >
+                            <span
+                                className={cx(
+                                    "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                                    isDisabled && "bg-transparent text-disabled",
+                                )}
+                                aria-hidden="true"
+                            >
+                                ⌘K
+                            </span>
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaGroup>
+    );
+};
+
+export const ComboBox = ({ placeholder = "Search", shortcut = true, size = "sm", children, items, shortcutClassName, ...otherProps }: ComboBoxProps) => {
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    // Resize observer for popover width
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current) return;
+
+        const divRect = placeholderRef.current?.getBoundingClientRect();
+
+        setPopoverWidth(divRect.width + "px");
+    }, [placeholderRef, setPopoverWidth]);
+
+    useResizeObserver({
+        ref: placeholderRef,
+        box: "border-box",
+        onResize,
+    });
+
+    return (
+        <SelectContext.Provider value={{ size }}>
+            <AriaComboBox menuTrigger="focus" {...otherProps}>
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {otherProps.label && (
+                            <Label isRequired={state.isRequired} tooltip={otherProps.tooltip}>
+                                {otherProps.label}
+                            </Label>
+                        )}
+
+                        <ComboBoxValue
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            size={size}
+                            // This is a workaround to correctly calculating the trigger width
+                            // while using ResizeObserver wasn't 100% reliable.
+                            onFocus={onResize}
+                            onPointerEnter={onResize}
+                        />
+
+                        <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={otherProps.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {otherProps.hint && <HintText isInvalid={state.isInvalid}>{otherProps.hint}</HintText>}
+                    </div>
+                )}
+            </AriaComboBox>
+        </SelectContext.Provider>
+    );
+};

package/templates/dataif/services/web/src/components/base/select/multi-select.tsx

@@ -0,0 +1,361 @@
+import type { FocusEventHandler, KeyboardEvent, PointerEventHandler, RefAttributes, RefObject } 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, GroupProps as AriaGroupProps, ListBoxProps as AriaListBoxProps, Key } from "react-aria-components";
+import { ComboBox as AriaComboBox, Group as AriaGroup, Input as AriaInput, ListBox as AriaListBox, ComboBoxStateContext } from "react-aria-components";
+import type { ListData } from "react-stately";
+import { useListData } from "react-stately";
+import { Avatar } from "@/components/base/avatar/avatar";
+import type { IconComponentType } from "@/components/base/badges/badge-types";
+import { HintText } from "@/components/base/input/hint-text";
+import { Label } from "@/components/base/input/label";
+import { Popover } from "@/components/base/select/popover";
+import { type SelectItemType, sizes } from "@/components/base/select/select";
+import { TagCloseX } from "@/components/base/tags/base-components/tag-close-x";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import { cx } from "@/utils/cx";
+import { SelectItem } from "./select-item";
+
+interface ComboBoxValueProps extends AriaGroupProps {
+    size: "sm" | "md";
+    shortcut?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    placeholderIcon?: IconComponentType | null;
+    ref?: RefObject<HTMLDivElement | 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 MultiSelectProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement> {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+    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 MultiSelectBase = ({
+    items,
+    children,
+    size = "sm",
+    selectedItems,
+    onItemCleared,
+    onItemInserted,
+    shortcut,
+    placeholder = "Search",
+    // Omit these props to avoid conflicts with the `Select` component
+    name: _name,
+    className: _className,
+    ...props
+}: MultiSelectProps) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const selectedKeys = selectedItems.items.map((item) => item.id);
+
+    const filter = useCallback(
+        (item: SelectItemType, filterText: string) => {
+            return !selectedKeys.includes(item.id) && contains(item.label || item.supportingText || "", filterText);
+        },
+        [contains, selectedKeys],
+    );
+
+    const accessibleList = useListData({
+        initialItems: items,
+        filter,
+    });
+
+    const onRemove = useCallback(
+        (keys: Set<Key>) => {
+            const key = keys.values().next().value;
+
+            if (!key) return;
+
+            selectedItems.remove(key);
+            onItemCleared?.(key);
+        },
+        [selectedItems, onItemCleared],
+    );
+
+    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);
+            onItemInserted?.(id);
+        }
+
+        accessibleList.setFilterText("");
+    };
+
+    const onInputChange = (value: string) => {
+        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={accessibleList.filterText}
+                // This keeps the combobox popover open and the input value unchanged when an item is selected.
+                selectedKey={null}
+                onSelectionChange={onSelectionChange}
+                {...props}
+            >
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {props.label && (
+                            <Label isRequired={state.isRequired} tooltip={props.tooltip}>
+                                {props.label}
+                            </Label>
+                        )}
+
+                        <MultiSelectTagsValue
+                            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}
+                        />
+
+                        <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 InnerMultiSelect = ({ isDisabled, shortcut, shortcutClassName, placeholder }: Omit<MultiSelectProps, "selectedItems" | "children">) => {
+    const focusManager = useFocusManager();
+    const comboBoxContext = useContext(ComboboxContext);
+    const comboBoxStateContext = useContext(ComboBoxStateContext);
+
+    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;
+        }
+    };
+
+    // Ensure dropdown opens on click even if input is already focused
+    const handleInputMouseDown = (_event: React.MouseEvent<HTMLInputElement>) => {
+        if (comboBoxStateContext && !comboBoxStateContext.isOpen) {
+            comboBoxStateContext.open();
+        }
+    };
+
+    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
+        // Do nothing when tab is clicked to move focus from the tag to the input element.
+        if (event.key === "Tab") {
+            return;
+        }
+
+        event.preventDefault();
+
+        const isFirstTag = comboBoxContext?.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 });
+                }
+
+                comboBoxContext.onRemove(new Set([value]));
+                break;
+
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+            case "Escape":
+                comboBoxStateContext?.close();
+                break;
+        }
+    };
+
+    const isSelectionEmpty = comboBoxContext?.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 &&
+                comboBoxContext?.selectedItems?.items?.map((value) => (
+                    <span key={value.id} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-1.25 ring-1 ring-primary ring-inset">
+                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
+
+                        <p className="ml-1.25 truncate text-sm font-medium whitespace-nowrap text-secondary select-none">{value?.label}</p>
+
+                        <TagCloseX
+                            size="md"
+                            isDisabled={isDisabled}
+                            className="ml-0.75"
+                            // For workaround, onKeyDown is added to the button
+                            onKeyDown={(event) => handleTagKeyDown(event, value.id)}
+                            onPress={() => comboBoxContext.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}
+                    onMouseDown={handleInputMouseDown}
+                    className="w-full flex-[1_0_0] appearance-none bg-transparent text-md text-ellipsis text-primary caret-alpha-black/90 outline-none 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 text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                                isDisabled && "bg-transparent text-disabled",
+                            )}
+                        >
+                            ⌘K
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const MultiSelectTagsValue = ({
+    size,
+    shortcut,
+    placeholder,
+    shortcutClassName,
+    placeholderIcon: Icon = SearchLg,
+    // Omit this prop to avoid invalid HTML attribute warning
+    isDisabled: _isDisabled,
+    ...otherProps
+}: ComboBoxValueProps) => {
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {({ isDisabled }) => (
+                <>
+                    {Icon && <Icon className="pointer-events-none size-5 text-fg-quaternary" />}
+                    <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
+                        <InnerMultiSelect
+                            isDisabled={isDisabled}
+                            size={size}
+                            shortcut={shortcut}
+                            shortcutClassName={shortcutClassName}
+                            placeholder={placeholder}
+                        />
+                    </FocusScope>
+                </>
+            )}
+        </AriaGroup>
+    );
+};
+
+const MultiSelect = MultiSelectBase as typeof MultiSelectBase & {
+    Item: typeof SelectItem;
+};
+
+MultiSelect.Item = SelectItem;
+
+export { MultiSelect as MultiSelect };

package/templates/dataif/services/web/src/components/base/select/popover.tsx

@@ -0,0 +1,32 @@
+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 "@/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) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+
+                    state.isEntering &&
+                        "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                    state.isExiting &&
+                        "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    props.size === "md" && "max-h-80!",
+
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};