@lark-apaas/client-toolkit 1.0.3 → 1.0.5

package/lib/components/User/UserSelectUI/ActionButtons.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDown, X } from "lucide-react";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Spinner } from "./Spinner.js";
+const ActionButtons_ActionButtons = /*#__PURE__*/ forwardRef(function({ loading, canClear, isOpen, disabled, onClear, onToggle }, ref) {
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: "flex flex-shrink-0 items-center gap-1 pr-2.5 ml-auto",
+        children: [
+            loading && /*#__PURE__*/ jsx(Spinner, {
+                className: "text-muted-foreground"
+            }),
+            canClear && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: onClear,
+                "data-select-interactive": "true",
+                className: clsxWithTw('flex size-3 items-center justify-center rounded-full bg-foreground/60 transition-colors duration-200', 'cursor-pointer hover:bg-primary', 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'),
+                children: /*#__PURE__*/ jsx(X, {
+                    size: 11,
+                    strokeWidth: 3,
+                    className: "text-white"
+                })
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "data-select-interactive": "true",
+                className: clsxWithTw('flex size-3 items-center justify-center rounded-full text-muted-foreground transition-all duration-200 cursor-pointer', {
+                    'rotate-180': isOpen,
+                    'opacity-50 cursor-not-allowed': disabled
+                }),
+                onClick: ()=>{
+                    if (!disabled) onToggle();
+                },
+                children: /*#__PURE__*/ jsx(ChevronDown, {
+                    size: 12,
+                    strokeWidth: 3
+                })
+            })
+        ]
+    });
+});
+ActionButtons_ActionButtons.displayName = 'ActionButtons';
+export { ActionButtons_ActionButtons as ActionButtons };

package/lib/components/User/UserSelectUI/Dropdown.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface DropdownProps {
+    isOpen: boolean;
+    fetching: boolean;
+    searchResults: IUserProfile[];
+    onSelect: (user: IUserProfile) => void;
+    isSelected: (userId: string) => boolean;
+    onOptionMouseDown?: () => void;
+}
+export declare function Dropdown({ isOpen, fetching, searchResults, onSelect, isSelected, onOptionMouseDown, }: DropdownProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/Dropdown.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Check } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+function Dropdown({ isOpen, fetching, searchResults, onSelect, isSelected, onOptionMouseDown }) {
+    if (!isOpen) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "absolute top-full left-0 right-0 z-50 mt-1 rounded-md border border-solid border-border bg-card shadow-lg",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "max-h-[165px] overflow-y-auto p-[3px]",
+            children: fetching ? /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-center px-3 py-2",
+                children: /*#__PURE__*/ jsx(Spinner, {
+                    className: "text-primary"
+                })
+            }) : 0 === searchResults.length ? /*#__PURE__*/ jsx("div", {
+                className: "px-2 py-[5px] text-[14px] leading-[22px] text-muted-foreground",
+                children: "无结果，建议更换搜索词"
+            }) : searchResults.map((user)=>{
+                const selected = isSelected(user.user_id);
+                const displayName = user.name?.trim() || '无效人员';
+                return /*#__PURE__*/ jsxs("div", {
+                    className: "relative flex cursor-pointer items-center gap-2 rounded-sm py-1 pl-3 pr-[7px] text-foreground transition-colors hover:bg-foreground/8",
+                    onMouseDown: (event)=>{
+                        onOptionMouseDown?.();
+                        event.preventDefault();
+                    },
+                    onClick: ()=>onSelect(user),
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex min-w-0 flex-1 items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ jsxs(Avatar, {
+                                    className: "h-6 w-6 flex-shrink-0",
+                                    children: [
+                                        /*#__PURE__*/ jsx(AvatarImage, {
+                                            src: user.avatar,
+                                            alt: displayName
+                                        }),
+                                        /*#__PURE__*/ jsx(AvatarFallback, {
+                                            className: "bg-muted text-[12px] text-foreground",
+                                            children: displayName.slice(0, 1)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: clsxWithTw('truncate text-[14px] leading-[20px]', selected ? 'text-primary' : void 0),
+                                    title: displayName,
+                                    children: displayName
+                                })
+                            ]
+                        }),
+                        selected ? /*#__PURE__*/ jsx(Check, {
+                            size: 12,
+                            className: "text-primary",
+                            strokeWidth: 3
+                        }) : null
+                    ]
+                }, user.user_id);
+            })
+        })
+    });
+}
+export { Dropdown };

package/lib/components/User/UserSelectUI/MultipleSelectionTags.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface MultipleSelectionTagsProps {
+    displayUsers: IUserProfile[];
+    allUsers: IUserProfile[];
+    hiddenCount: number;
+    onRemove: (userId: string, event: React.MouseEvent) => void;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    measureRef?: React.RefObject<HTMLDivElement>;
+    moreIndicatorRef?: React.RefObject<HTMLSpanElement>;
+    maxWidth?: number | null;
+}
+export declare function MultipleSelectionTags({ displayUsers, onRemove, }: MultipleSelectionTagsProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/MultipleSelectionTags.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
+import { X } from "lucide-react";
+function MultipleSelectionTags({ displayUsers, onRemove }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: displayUsers?.map((user, index)=>/*#__PURE__*/ jsxs(Badge, {
+                variant: "secondary",
+                "data-user-tag": true,
+                className: clsxWithTw('cursor-pointer flex items-center pl-0.5 pr-2 max-w-[200px] group bg-foreground/10 hover:bg-foreground/10 transition-colors rounded-full whitespace-nowrap my-[3px]', index > 0 ? 'ml-0' : ''),
+                children: [
+                    /*#__PURE__*/ jsxs(Avatar, {
+                        className: "size-[20px] flex-shrink-0",
+                        children: [
+                            /*#__PURE__*/ jsx(AvatarImage, {
+                                src: user.avatar
+                            }),
+                            /*#__PURE__*/ jsx(AvatarFallback, {
+                                className: "bg-primary/10 text-[10px]",
+                                children: user.name.slice(0, 1)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "inline-block truncate text-foreground text-[14px] leading-[20px]",
+                        title: user.name,
+                        children: user.name
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        "data-select-interactive": "true",
+                        className: "h-3 w-3 p-0 rounded-full opacity-60 hover:opacity-100 transition-all duration-200 cursor-pointer flex-shrink-0",
+                        onClick: (e)=>onRemove(user.user_id, e),
+                        title: `移除 ${user.name}`,
+                        children: /*#__PURE__*/ jsx(X, {
+                            size: 10,
+                            strokeWidth: 3
+                        })
+                    })
+                ]
+            }, user.user_id))
+    });
+}
+export { MultipleSelectionTags };

package/lib/components/User/UserSelectUI/SingleSelectionPreview.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { IUserProfile } from '../../../apis/udt-types';
+interface SingleSelectionPreviewProps {
+    user: IUserProfile;
+    canClear: boolean;
+    isOpen: boolean;
+}
+export declare function SingleSelectionPreview({ user, canClear, isOpen, }: SingleSelectionPreviewProps): React.JSX.Element;
+export {};

package/lib/components/User/UserSelectUI/SingleSelectionPreview.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { clsxWithTw } from "../../../utils/utils.js";
+function SingleSelectionPreview({ user, canClear, isOpen }) {
+    const displayName = user.name?.trim() ?? '';
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('pointer-events-none absolute top-1/2 z-0 flex -translate-y-1/2 items-center gap-1 rounded-md text-sm text-foreground/70', {
+            'opacity-50': isOpen
+        }),
+        style: {
+            left: 'calc(0.75rem + 1px)',
+            right: canClear ? '3.5rem' : '2.5rem',
+            maxWidth: canClear ? 'calc(100% - 3.5rem)' : 'calc(100% - 2.5rem)'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Avatar, {
+                className: "h-5 w-5 flex-shrink-0",
+                children: [
+                    /*#__PURE__*/ jsx(AvatarImage, {
+                        src: user.avatar
+                    }),
+                    /*#__PURE__*/ jsx(AvatarFallback, {
+                        className: "text-[11px] text-foreground",
+                        children: displayName.slice(0, 1)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "truncate text-[14px] leading-[20px] text-foreground",
+                title: displayName,
+                children: displayName
+            })
+        ]
+    });
+}
+export { SingleSelectionPreview };

package/lib/components/User/UserSelectUI/Spinner.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function Spinner({ className }: React.ComponentProps<'svg'>): React.JSX.Element;

package/lib/components/User/UserSelectUI/Spinner.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Loader2Icon } from "lucide-react";
+import { clsxWithTw } from "../../../utils/utils.js";
+function Spinner({ className }) {
+    return /*#__PURE__*/ jsx(Loader2Icon, {
+        role: "status",
+        "aria-label": "Loading",
+        strokeWidth: 2,
+        className: clsxWithTw('size-4 animate-spin', className)
+    });
+}
+export { Spinner };

package/lib/components/User/UserSelectUI/UserSelectUI.d.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
+import React from 'react';
+import type { UserSelectProps } from './types';
+export declare const UserSelectUI: React.FC<UserSelectProps>;

package/lib/components/User/UserSelectUI/UserSelectUI.js

@@ -0,0 +1,230 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { debounce } from "lodash";
+import { clsxWithTw } from "../../../utils/utils.js";
+import { Input } from "../../ui/input.js";
+import { MultipleSelectionTags } from "./MultipleSelectionTags.js";
+import { SingleSelectionPreview } from "./SingleSelectionPreview.js";
+import { ActionButtons } from "./ActionButtons.js";
+import { Dropdown } from "./Dropdown.js";
+const UserSelectUI = ({ mode = 'single', value, onChange, placeholder = '请选择用户', disabled = false, allowClear = true, onSearch, loading = false, options = [] })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [fetching, setFetching] = useState(false);
+    const fetchRef = useRef(0);
+    const inputRef = useRef(null);
+    const isUserSearchingRef = useRef(false);
+    const onSearchRef = useRef(onSearch);
+    const optionsRef = useRef(options);
+    const dropdownInteractionRef = useRef(false);
+    const debouncedSearchRef = useRef();
+    const triggerRef = useRef(null);
+    const inputContainerRef = useRef(null);
+    const actionButtonsRef = useRef(null);
+    useEffect(()=>{
+        onSearchRef.current = onSearch;
+    }, [
+        onSearch
+    ]);
+    useEffect(()=>{
+        optionsRef.current = options;
+    }, [
+        options
+    ]);
+    const selectedUsers = useMemo(()=>{
+        if (!value) return [];
+        return Array.isArray(value) ? value : [
+            value
+        ];
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        const debounced = debounce(async (searchValue)=>{
+            const latestOnSearch = onSearchRef.current;
+            const latestOptions = optionsRef.current;
+            if (!latestOnSearch) {
+                const filtered = latestOptions.filter((user)=>user.name.toLowerCase().includes(searchValue.toLowerCase()));
+                setSearchResults(filtered);
+                return;
+            }
+            fetchRef.current += 1;
+            const fetchId = fetchRef.current;
+            setFetching(true);
+            try {
+                const results = await latestOnSearch(searchValue);
+                if (fetchId === fetchRef.current) setSearchResults(results);
+            } catch (error) {
+                console.error('Search failed:', error);
+                if (fetchId === fetchRef.current) setSearchResults([]);
+            } finally{
+                if (fetchId === fetchRef.current) setFetching(false);
+            }
+        }, 500);
+        debouncedSearchRef.current = debounced;
+        return ()=>{
+            debounced.cancel();
+        };
+    }, []);
+    const handleSearch = (value)=>{
+        setSearchText(value);
+        isUserSearchingRef.current = true;
+        if (!isOpen) setIsOpen(true);
+        debouncedSearchRef.current?.(value);
+    };
+    const handleInputFocus = ()=>{
+        setIsOpen(true);
+    };
+    const handleInputBlur = ()=>{
+        setTimeout(()=>{
+            if ('multiple' === mode && dropdownInteractionRef.current) {
+                dropdownInteractionRef.current = false;
+                inputRef.current?.focus();
+                return;
+            }
+            dropdownInteractionRef.current = false;
+            const inputElement = inputRef.current;
+            if (!inputElement || 'undefined' == typeof document) return void setIsOpen(false);
+            const activeElement = document.activeElement;
+            if (activeElement !== inputElement) setIsOpen(false);
+        }, 150);
+    };
+    const handleSelect = (user)=>{
+        if (!onChange) return;
+        if ('single' === mode) {
+            onChange(user);
+            setIsOpen(false);
+            setSearchText('');
+            isUserSearchingRef.current = false;
+            inputRef.current?.blur();
+        } else {
+            const isAlreadySelected = selectedUsers.some((u)=>u.user_id === user.user_id);
+            if (isAlreadySelected) {
+                const newValue = selectedUsers.filter((u)=>u.user_id !== user.user_id);
+                onChange(newValue);
+            } else onChange([
+                ...selectedUsers,
+                user
+            ]);
+            isUserSearchingRef.current = false;
+            setSearchText('');
+            setTimeout(()=>{
+                inputRef.current?.focus();
+            }, 0);
+        }
+    };
+    const handleRemove = (userId, e)=>{
+        e.stopPropagation();
+        if (!onChange) return;
+        if ('single' === mode) onChange(void 0);
+        else {
+            const newValue = selectedUsers.filter((u)=>u.user_id !== userId);
+            onChange(newValue);
+        }
+    };
+    const handleClear = (e)=>{
+        e.stopPropagation();
+        if (!onChange) return;
+        onChange('single' === mode ? void 0 : []);
+        setSearchText('');
+        setIsOpen(false);
+    };
+    const isSelected = (userId)=>selectedUsers.some((u)=>u.user_id === userId);
+    const hasSelection = selectedUsers.length > 0;
+    const singleSelectedUser = 'single' === mode && hasSelection ? selectedUsers[0] : void 0;
+    const showSingleSelection = !!singleSelectedUser && 0 === searchText.length;
+    const canClear = allowClear && hasSelection && !disabled;
+    const inputPlaceholder = hasSelection ? '' : placeholder;
+    const focusInputAtStart = ()=>{
+        const input = inputRef.current;
+        if (!input) return;
+        try {
+            input.setSelectionRange(0, 0);
+        } catch  {}
+    };
+    const toggleDropdown = ()=>{
+        if (disabled) return;
+        setIsOpen((prev)=>{
+            const next = !prev;
+            if (!prev && !disabled) inputRef.current?.focus();
+            return next;
+        });
+    };
+    const handleTriggerMouseDown = (event)=>{
+        if (disabled) return;
+        const target = event.target;
+        if (target.closest('[data-select-interactive="true"]')) return;
+        if (inputRef.current && (target === inputRef.current || inputRef.current.contains(target))) return;
+        event.preventDefault();
+        inputRef.current?.focus();
+        if ('single' === mode) if ('undefined' != typeof window) window.requestAnimationFrame(()=>focusInputAtStart());
+        else focusInputAtStart();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                ref: triggerRef,
+                className: clsxWithTw('group relative flex w-full flex-wrap items-center gap-2 rounded-md border bg-background text-sm transition-colors', disabled ? 'cursor-not-allowed opacity-50' : '', isOpen ? 'border-primary' : 'border-border'),
+                onMouseDown: handleTriggerMouseDown,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: clsxWithTw('flex-1 flex flex-wrap items-center gap-1 gap-y-0', 'multiple' === mode && hasSelection ? 'pl-1' : 'py-0'),
+                        children: [
+                            hasSelection && 'multiple' === mode && /*#__PURE__*/ jsx(MultipleSelectionTags, {
+                                displayUsers: selectedUsers,
+                                allUsers: selectedUsers,
+                                hiddenCount: 0,
+                                onRemove: handleRemove
+                            }),
+                            showSingleSelection && singleSelectedUser && /*#__PURE__*/ jsx(SingleSelectionPreview, {
+                                user: singleSelectedUser,
+                                canClear: canClear,
+                                isOpen: isOpen
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                ref: inputContainerRef,
+                                className: clsxWithTw('relative min-w-[120px] flex-grow', 'multiple' === mode && hasSelection ? 'mr-1' : ''),
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    ref: inputRef,
+                                    value: searchText,
+                                    onChange: (e)=>handleSearch(e.target.value),
+                                    onFocus: handleInputFocus,
+                                    onBlur: handleInputBlur,
+                                    placeholder: inputPlaceholder,
+                                    disabled: disabled,
+                                    className: clsxWithTw('relative z-[1] h-8 border-0 !bg-transparent text-[14px] shadow-none focus-visible:ring-0 focus-visible:ring-offset-0', 'multiple' === mode && hasSelection ? 'px-0' : 'pl-3 pr-2')
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ActionButtons, {
+                        ref: actionButtonsRef,
+                        loading: loading,
+                        canClear: canClear,
+                        isOpen: isOpen,
+                        disabled: disabled,
+                        onClear: handleClear,
+                        onToggle: toggleDropdown
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Dropdown, {
+                isOpen: isOpen,
+                fetching: fetching,
+                searchResults: searchResults,
+                onSelect: handleSelect,
+                isSelected: isSelected,
+                onOptionMouseDown: ()=>{
+                    if ('multiple' === mode) dropdownInteractionRef.current = true;
+                }
+            }),
+            isOpen && /*#__PURE__*/ jsx("div", {
+                className: "fixed inset-0 z-40",
+                onClick: ()=>setIsOpen(false)
+            })
+        ]
+    });
+};
+export { UserSelectUI };

package/lib/components/User/UserSelectUI/index.d.ts

@@ -0,0 +1,2 @@
+export { UserSelectUI } from './UserSelectUI';
+export type { UserSelectProps, UserSelectValue } from './types';

package/lib/components/User/UserSelectUI/index.js

@@ -0,0 +1,2 @@
+import { UserSelectUI } from "./UserSelectUI.js";
+export { UserSelectUI };

package/lib/components/User/UserSelectUI/types.d.ts

@@ -0,0 +1,14 @@
+import type { IUserProfile } from '../../../apis/udt-types';
+export type UserSelectValue = IUserProfile | IUserProfile[];
+export interface UserSelectProps {
+    value?: UserSelectValue;
+    onChange?: (value: UserSelectValue) => void;
+    defaultValue?: UserSelectValue;
+    mode?: 'single' | 'multiple';
+    placeholder?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    onSearch?: (searchText: string) => Promise<IUserProfile[]>;
+    loading?: boolean;
+    options?: IUserProfile[];
+}

package/lib/components/User/UserWithAvatar.js

@@ -1,11 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Avatar, Typography } from "antd";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { OverflowTooltipText } from "../ui/overflow-tooltip-text.js";
 import { clsxWithTw } from "../../utils/utils.js";
-const avatarSizeMap = {
-    small: 16,
-    medium: 20,
-    large: 24
+const avatarDimensionClassMap = {
+    small: 'h-4 w-4',
+    medium: 'h-5 w-5',
+    large: 'h-6 w-6'
+};
+const avatarFallbackTextClassMap = {
+    small: 'text-[10px]',
+    medium: 'text-[12px]',
+    large: 'text-[14px]'
+};
+const sizeClassMap = {
+    small: 'py-0.5 pl-0.5 pr-1.5 max-w-[148px]',
+    medium: 'py-0.5 pl-0.5 pr-2 max-w-[172px]',
+    large: 'py-1 pl-1 pr-2.5 max-w-[196px]'
 };
 const textVariantMap = {
     small: 'text-[12px] leading-[16px]',
@@ -14,26 +25,32 @@ const textVariantMap = {
 };
 function UserWithAvatar({ data, size = 'medium', mode = 'tag', className }) {
     const { avatar, name } = data;
-    const displayName = name || '无效人员';
+    const displayName = name?.trim() || '无效人员';
+    const formatSize = [
+        'small',
+        'medium',
+        'large'
+    ].includes(size) ? size : 'medium';
     return /*#__PURE__*/ jsxs("div", {
-        className: clsxWithTw('flex items-center gap-1 rounded-full', {
-            'bg-[rgba(31,35,41,0.1)]': 'tag' === mode,
-            'py-0.5 pl-0.5 pr-1.5 max-w-[148px]': 'small' === size,
-            'py-0.5 pl-0.5 pr-2 max-w-[172px]': 'medium' === size,
-            'py-1 pl-1 pr-2.5 max-w-[196px]': 'large' === size
+        className: clsxWithTw('flex min-w-0 items-center gap-1 rounded-full', sizeClassMap[formatSize], {
+            'bg-muted': 'tag' === mode
         }, className),
         children: [
-            /*#__PURE__*/ jsx(Avatar, {
-                src: avatar,
-                size: avatarSizeMap[size],
-                className: "shrink-0 border-0"
+            /*#__PURE__*/ jsxs(Avatar, {
+                className: clsxWithTw(avatarDimensionClassMap[formatSize]),
+                children: [
+                    /*#__PURE__*/ jsx(AvatarImage, {
+                        src: avatar,
+                        alt: displayName
+                    }),
+                    /*#__PURE__*/ jsx(AvatarFallback, {
+                        className: clsxWithTw('text-foreground leading-none', avatarFallbackTextClassMap[formatSize])
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(Typography.Text, {
-                ellipsis: {
-                    tooltip: displayName
-                },
-                className: textVariantMap[size],
-                children: displayName
+            /*#__PURE__*/ jsx(OverflowTooltipText, {
+                text: displayName,
+                className: clsxWithTw('text-card-foreground', textVariantMap[formatSize])
             })
         ]
     });

package/lib/components/index.d.ts

@@ -1,8 +1,5 @@
-export * from './SidebarNav';
-export * from './User';
-export * from './SidebarNav';
-export * from './User';
-export * from './theme';
 export * from './AppContainer';
 export * from './ErrorRender';
 export * from './NotFoundRender';
+export * from './theme';
+export * from './User';

package/lib/components/index.js

@@ -1,6 +1,5 @@
-export * from "./SidebarNav/index.js";
-export * from "./User/index.js";
-export * from "./theme/index.js";
 export * from "./AppContainer/index.js";
 export * from "./ErrorRender/index.js";
 export * from "./NotFoundRender/index.js";
+export * from "./theme/index.js";
+export * from "./User/index.js";

package/lib/components/ui/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/lib/components/ui/avatar.js

@@ -0,0 +1,27 @@
+"use client"
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Fallback, Image, Root } from "@radix-ui/react-avatar";
+import { clsxWithTw } from "../../utils/utils.js";
+function Avatar({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Root, {
+        "data-slot": "avatar",
+        className: clsxWithTw("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+        ...props
+    });
+}
+function AvatarImage({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Image, {
+        "data-slot": "avatar-image",
+        className: clsxWithTw("aspect-square size-full", className),
+        ...props
+    });
+}
+function AvatarFallback({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Fallback, {
+        "data-slot": "avatar-fallback",
+        className: clsxWithTw("bg-muted flex size-full items-center justify-center rounded-full", className),
+        ...props
+    });
+}
+export { Avatar, AvatarFallback, AvatarImage };