@lark-apaas/client-toolkit 0.1.0-alpha.1 → 0.1.0-alpha.log.10

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 };

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "secondary" | "destructive" | "outline";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/lib/components/ui/badge.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { clsxWithTw } from "../../utils/utils.js";
+const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "span";
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "badge",
+        className: clsxWithTw(badgeVariants({
+            variant
+        }), className),
+        ...props
+    });
+}
+export { Badge, badgeVariants };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost";
+    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/lib/components/ui/button.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { clsxWithTw } from "../../utils/utils.js";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline"
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "button",
+        className: clsxWithTw(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ...props
+    });
+}
+export { Button, buttonVariants };

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/lib/components/ui/input.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsxWithTw } from "../../utils/utils.js";
+const Input = /*#__PURE__*/ forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ jsx("input", {
+        ref: ref,
+        type: type,
+        "data-slot": "input",
+        className: clsxWithTw("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
+        ...props
+    }));
+Input.displayName = "Input";
+export { Input };

package/lib/components/ui/overflow-tooltip-text.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface OverflowTooltipTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    text: string;
+}
+/**
+ * Displays truncated inline text and shows a tooltip with the full content when overflowed.
+ */
+export declare function OverflowTooltipText({ text, className, ...props }: OverflowTooltipTextProps): React.JSX.Element;

package/lib/components/ui/overflow-tooltip-text.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function OverflowTooltipText({ text, className, ...props }) {
+    const textRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const checkOverflow = useCallback(()=>{
+        const el = textRef.current;
+        if (!el) return;
+        setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
+    }, []);
+    useLayoutEffect(()=>{
+        checkOverflow();
+    }, [
+        checkOverflow
+    ]);
+    useEffect(()=>{
+        const el = textRef.current;
+        if (!el) return;
+        const observer = new ResizeObserver(()=>{
+            checkOverflow();
+        });
+        observer.observe(el);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        checkOverflow
+    ]);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            checkOverflow();
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        checkOverflow
+    ]);
+    const textNode = /*#__PURE__*/ jsx("span", {
+        ref: textRef,
+        className: clsxWithTw('inline-block truncate', className),
+        ...props,
+        children: text
+    });
+    if (!isOverflowing) return textNode;
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            delayDuration: 80,
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: textNode
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    sideOffset: 4,
+                    className: "bg-[rgb(31,35,41)] text-white ring-0",
+                    children: text
+                })
+            ]
+        })
+    });
+}
+export { OverflowTooltipText };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/lib/components/ui/popover.js

@@ -0,0 +1,35 @@
+"use client"
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
+import { clsxWithTw } from "../../utils/utils.js";
+function Popover({ ...props }) {
+    return /*#__PURE__*/ jsx(Root, {
+        "data-slot": "popover",
+        ...props
+    });
+}
+function PopoverTrigger({ ...props }) {
+    return /*#__PURE__*/ jsx(Trigger, {
+        "data-slot": "popover-trigger",
+        ...props
+    });
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(Content, {
+            "data-slot": "popover-content",
+            align: align,
+            sideOffset: sideOffset,
+            className: clsxWithTw("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+            ...props
+        })
+    });
+}
+function PopoverAnchor({ ...props }) {
+    return /*#__PURE__*/ jsx(Anchor, {
+        "data-slot": "popover-anchor",
+        ...props
+    });
+}
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Minimal shadcn/ui-compatible Skeleton primitive.
+ * Mirrors the upstream API so that downstream components can swap in seamlessly.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/ui/skeleton.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsxWithTw } from "../../utils/utils.js";
+const Skeleton = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: clsxWithTw('animate-pulse rounded-md bg-accent', className),
+        ...props
+    }));
+Skeleton.displayName = 'Skeleton';
+export { Skeleton };

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };