@openway/ui 1.0.0 → 1.0.1

package/dist/useInfiniteScroll-DAlgjUN4.d.cts

@@ -0,0 +1,325 @@
+import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
+import { Placement } from '@floating-ui/react';
+
+type EmptySize = "sm" | "md" | "lg";
+type EmptyPresetImage = "default" | "search" | "error" | "folder" | "simple";
+type EmptyLayout = "vertical" | "horizontal";
+interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML div
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Kích cỡ của Empty component:
+     * - 'sm': Nhỏ gọn, thích hợp cho dropdown, popover, bảng nhỏ
+     * - 'md': Tiêu chuẩn, thích hợp cho card, section, modal
+     * - 'lg': Lớn, thích hợp cho toàn trang, dashboard
+     * @default 'md'
+     */
+    size?: EmptySize;
+    /**
+     * Bố cục hiển thị:
+     * - 'vertical': Xếp dọc ảnh -> tiêu đề -> mô tả -> hành động
+     * - 'horizontal': Dàn ngang ảnh bên trái, nội dung & hành động bên phải
+     * @default 'vertical'
+     */
+    layout?: EmptyLayout;
+    /**
+     * Ảnh hoặc minh họa:
+     * - Tên preset: 'default' | 'search' | 'error' | 'folder' | 'simple'
+     * - URL hình ảnh (string bắt đầu bằng http://, https://, /, hoặc ./)
+     * - ReactNode tùy biến (SVG icon, custom component, v.v.)
+     * @default 'default'
+     */
+    image?: EmptyPresetImage | (string & {}) | ReactNode;
+    /**
+     * Kích thước tùy chỉnh cho ảnh / illustration (pixel hoặc chuỗi kích thước CSS)
+     */
+    imageSize?: number | string;
+    /**
+     * Class tùy biến cho phần bao ngoài của ảnh
+     */
+    imageClassName?: string;
+    /**
+     * Thuộc tính alt cho hình ảnh khi truyền URL
+     * @default 'Empty'
+     */
+    imageAlt?: string;
+    /**
+     * Tiêu đề của trạng thái rỗng
+     */
+    title?: ReactNode;
+    /**
+     * Class tùy biến cho tiêu đề
+     */
+    titleClassName?: string;
+    /**
+     * Đoạn văn bản mô tả chi tiết hoặc hướng dẫn thao tác
+     */
+    description?: ReactNode;
+    /**
+     * Class tùy biến cho phần mô tả
+     */
+    descriptionClassName?: string;
+    /**
+     * Nút bấm hoặc nhóm hành động bên dưới (Call-to-Action)
+     */
+    actions?: ReactNode;
+    /**
+     * Class tùy biến cho khu vực chứa actions
+     */
+    actionsClassName?: string;
+    /**
+     * Nội dung bổ sung tùy biến bên dưới hoặc thay thế
+     */
+    children?: ReactNode;
+}
+
+type SelectSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SelectVariant = "outline" | "filled" | "ghost" | "other";
+type SelectColor = "primary" | "secondary" | "error" | "success" | "warning" | "info" | "neutral";
+type SelectRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type SelectSearchMode = "client" | "server";
+type SelectSearchPlacement = "trigger" | "menu" | "both";
+type SelectFilterLayout = "vertical" | "grid";
+type LabelPlacement = "top" | "left" | "floating";
+interface SelectOptionItem<TData = unknown> {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    description?: ReactNode;
+    icon?: ReactNode;
+    data?: TData;
+}
+type SelectFilterType = "string" | "text" | "number" | "date" | "date-range" | "checkbox-group" | "custom";
+interface SelectFilterField<TValue = unknown> {
+    /** Tên định danh trường lọc (dùng làm key trong object filters) */
+    name: string;
+    /** Loại component lọc */
+    type: SelectFilterType;
+    /** Nhãn hiển thị của bộ lọc */
+    label?: ReactNode;
+    /** Placeholder cho input */
+    placeholder?: string;
+    /** Giá trị mặc định */
+    defaultValue?: TValue;
+    /** Giá trị điều khiển */
+    value?: TValue;
+    /** Số cột chiếm trong grid layout (1, 2, 3...) */
+    colSpan?: number;
+    /** Danh sách options (dùng cho checkbox-group hoặc select con) */
+    options?: {
+        label: ReactNode;
+        value: string | number;
+        disabled?: boolean;
+    }[];
+    /** Props truyền thêm vào component tương ứng (InputProps, DatePickerProps, ...) */
+    props?: Record<string, unknown>;
+    /** Custom render khi type="custom" */
+    render?: (fieldState: {
+        value: TValue | undefined;
+        onChange: (val: TValue) => void;
+    }) => ReactNode;
+}
+interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> {
+    /** Ref chuyển tiếp tới root wrapper element */
+    ref?: Ref<HTMLDivElement>;
+    /** Kích thước: xs, sm, md, lg, xl. Mặc định 'md' */
+    size?: SelectSize;
+    /** Biến thể giao diện: outline, filled, ghost, other. Mặc định 'outline' */
+    variant?: SelectVariant;
+    /** Chủ đề màu sắc: primary, secondary, error, success, warning, info, neutral. Mặc định 'primary' */
+    color?: SelectColor;
+    /** Độ bo góc: none, sm, md, lg, xl, full */
+    radius?: SelectRadius;
+    /** Danh sách các tùy chọn */
+    options: SelectOptionItem<TData>[];
+    /** ID định danh cho Select */
+    id?: string;
+    /** Nhãn tiêu đề của Select */
+    label?: ReactNode;
+    /** Vị trí nhãn: top, left, floating. Mặc định 'top' */
+    labelPlacement?: LabelPlacement;
+    /** ClassName tùy biến cho nhãn */
+    labelClassName?: string;
+    /** Văn bản gợi ý khi chưa chọn */
+    placeholder?: string;
+    /** Văn bản hướng dẫn bên dưới */
+    helperText?: ReactNode;
+    /** Thông báo lỗi khi không hợp lệ */
+    errorMessage?: ReactNode;
+    /** Trạng thái không hợp lệ */
+    isInvalid?: boolean;
+    /** Bắt buộc chọn */
+    isRequired?: boolean;
+    /** Vô hiệu hóa Select */
+    isDisabled?: boolean;
+    /** Chỉ đọc, không cho phép thay đổi */
+    readOnly?: boolean;
+    /** Tên trường form HTML để submit */
+    name?: string;
+    /** Cho phép tìm kiếm. Mặc định false */
+    searchable?: boolean;
+    /** Chế độ tìm kiếm: 'client' (fuzzy search) hoặc 'server' (debounce + API). Mặc định 'client' */
+    searchMode?: SelectSearchMode;
+    /** Vị trí ô tìm kiếm: 'trigger' (trên trigger), 'menu' (trong dropdown), 'both'. Mặc định 'trigger' */
+    searchPlacement?: SelectSearchPlacement;
+    /** Placeholder cho ô tìm kiếm */
+    searchPlaceholder?: string;
+    /** Trường dùng để tìm kiếm (mặc định ['label', 'value']), hỗ trợ string, mảng hoặc hàm accessor tương tự CheckboxGroup */
+    searchField?: (keyof SelectOptionItem<TData> | string | ((item: SelectOptionItem<TData>) => string | undefined | null))[] | (keyof SelectOptionItem<TData> | string);
+    /** Giá trị từ khóa tìm kiếm (khi controlled) */
+    searchValue?: string;
+    /** Callback khi từ khóa thay đổi */
+    onSearchChange?: (value: string) => void;
+    /** Cấu hình danh sách các bộ lọc hiển thị bên trong dropdown menu */
+    menuFilters?: SelectFilterField<unknown>[];
+    /** Giá trị điều khiển cho các bộ lọc trong menu */
+    menuFilterValues?: Partial<TFilters>;
+    /** Bố cục danh sách bộ lọc: 'vertical' hoặc 'grid'. Mặc định 'vertical' */
+    menuFilterLayout?: SelectFilterLayout;
+    /** Số cột khi menuFilterLayout='grid'. Mặc định 2 */
+    menuFilterGridCols?: number;
+    /** Hiển thị nút Reset / Xóa bộ lọc. Mặc định true khi có menuFilters */
+    showResetFilters?: boolean;
+    /** Văn bản nút Reset bộ lọc. Mặc định 'Xoá bộ lọc' */
+    resetFiltersText?: ReactNode;
+    /** Callback khi bất kỳ filter nào trong menu thay đổi */
+    onMenuFilterChange?: (filters: TFilters) => void;
+    /** Nội dung tùy biến trên đầu menu (trước hoặc thay thế filter) */
+    menuHeader?: ReactNode;
+    /** Nội dung tùy biến dưới đáy menu */
+    menuFooter?: ReactNode;
+    /** Nội dung tùy biến ở đáy danh sách tùy chọn bên trong vùng cuộn (ví dụ: Sentinel/Skeleton/Spinner khi phân trang Infinite Scroll) */
+    listFooter?: ReactNode;
+    /** Callback được gọi sau khi debounce khi search query hoặc menu filters thay đổi (ở Server mode) */
+    onSearch?: (query: string, filters: TFilters) => void | Promise<void>;
+    /** Thời gian trì hoãn debounce tính theo ms. Mặc định 300 */
+    debounceMs?: number;
+    /** Hàm custom predicate lọc options ở chế độ client */
+    filterFn?: (option: SelectOptionItem<TData>, query: string, filters: TFilters) => boolean;
+    /** Trạng thái đang tải dữ liệu */
+    isLoading?: boolean;
+    /** Văn bản hiển thị khi không có dữ liệu */
+    emptyText?: ReactNode;
+    /** Props tùy biến chuyển tiếp đến component Empty */
+    emptyProps?: Partial<EmptyProps>;
+    /** Hiển thị nút xoá nhanh toàn bộ giá trị đã chọn */
+    clearable?: boolean;
+    /** Render menu qua Portal để tránh bị che bởi overflow hidden. Mặc định true */
+    portal?: boolean;
+    /** Vị trí hiển thị của popup dropdown. Mặc định 'bottom-start' */
+    placement?: Placement;
+    /** Chiều cao tối đa của vùng cuộn menu. Mặc định 280px */
+    maxMenuHeight?: number | string;
+    /** Bật/tắt animation khi dropdown menu xuất hiện/biến mất. Mặc định true */
+    animated?: boolean;
+    /** Thời lượng hiệu ứng tính bằng mili-giây (ms). Mặc định 150 */
+    animationDuration?: number;
+    /** Icon hoặc nội dung ở đầu trigger */
+    startContent?: ReactNode;
+    /** Icon hoặc nội dung ở cuối trigger */
+    endContent?: ReactNode;
+    /** Tùy biến render từng option trong menu */
+    renderOption?: (option: SelectOptionItem<TData>, state: {
+        selected: boolean;
+        active: boolean;
+    }) => ReactNode;
+    /** ClassName tùy biến cho wrapper ngoài cùng */
+    className?: string;
+    /** ClassName cho phần trigger box */
+    triggerClassName?: string;
+    /** ClassName cho popup dropdown menu */
+    menuClassName?: string;
+}
+/** Props cho component Select (Single Select) */
+interface SelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {
+    /** Giá trị đã chọn (controlled) */
+    value?: string | number | null;
+    /** Giá trị mặc định ban đầu (uncontrolled) */
+    defaultValue?: string | number | null;
+    /** Callback khi giá trị thay đổi */
+    onChange?: (value: string | number | null, option?: SelectOptionItem<TData> | null) => void;
+    /** Tùy biến render giá trị hiển thị trên trigger */
+    renderValue?: (selected: SelectOptionItem<TData>) => ReactNode;
+}
+/** Alias cho SelectProps */
+type SingleSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> = SelectProps<TData, TFilters>;
+/** Props cho component MultiSelect */
+interface MultiSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {
+    /** Danh sách giá trị đã chọn (controlled) */
+    value?: (string | number)[];
+    /** Danh sách giá trị mặc định ban đầu (uncontrolled) */
+    defaultValue?: (string | number)[];
+    /** Callback khi giá trị thay đổi */
+    onChange?: (values: (string | number)[], options?: SelectOptionItem<TData>[]) => void;
+    /** Giới hạn số lượng tag Badge hiển thị trước khi gom thành +N */
+    maxTagCount?: number;
+    /** Tự động ghim bảo lưu các mục đã chọn khi tìm kiếm (tương tự CheckboxGroup). Mặc định true */
+    preserveSelected?: boolean;
+    /** Tùy biến render giá trị hiển thị trên trigger */
+    renderValue?: (selected: SelectOptionItem<TData>[]) => ReactNode;
+}
+
+/**
+ * Các tùy chọn cấu hình cho hook `useInfiniteScroll`.
+ */
+interface UseInfiniteScrollOptions {
+    /**
+     * Callback được gọi khi người dùng cuộn đến cuối hoặc phần tử sentinel xuất hiện trong tầm nhìn.
+     */
+    onLoadMore: () => void | Promise<void>;
+    /**
+     * Cho biết còn dữ liệu để tải tiếp hay không.
+     * Nếu là `false`, `onLoadMore` sẽ không được kích hoạt.
+     * @default true
+     */
+    hasMore?: boolean;
+    /**
+     * Trạng thái đang tải dữ liệu của trang hiện tại / tiếp theo.
+     * Nếu là `true`, `onLoadMore` sẽ tạm hoãn cho đến khi lượt tải trước hoàn tất.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Vô hiệu hóa toàn bộ cơ chế theo dõi cuộn vô hạn.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Khoảng cách biên rootMargin của IntersectionObserver (vd: "100px", "0px 0px 100px 0px").
+     * Giúp kích hoạt tải trước khi người dùng chạm tới đáy danh sách để trải nghiệm mượt mà hơn.
+     * @default "100px"
+     */
+    rootMargin?: string;
+    /**
+     * Ngưỡng hiển thị threshold của IntersectionObserver (từ 0.0 đến 1.0).
+     * @default 0
+     */
+    threshold?: number | number[];
+    /**
+     * Phần tử gốc hoặc RefObject làm khung cuộn cho IntersectionObserver.
+     * Nếu là `null` hoặc `undefined`, sẽ dùng viewport của trình duyệt hoặc khung cuộn cha gần nhất.
+     * @default null
+     */
+    root?: Element | null | RefObject<Element | null>;
+}
+/**
+ * Kết quả trả về từ hook `useInfiniteScroll`.
+ */
+interface UseInfiniteScrollReturn {
+    /**
+     * Ref callback gắn vào phần tử sentinel ở cuối danh sách để theo dõi bằng IntersectionObserver.
+     */
+    sentinelRef: (node: HTMLElement | null) => void;
+    /**
+     * Trạng thái phần tử sentinel có đang nằm trong tầm quan sát hay không.
+     */
+    isIntersecting: boolean;
+}
+/**
+ * Hook `useInfiniteScroll` độc lập hỗ trợ tải dữ liệu vô tận qua IntersectionObserver.
+ */
+declare function useInfiniteScroll({ onLoadMore, hasMore, isLoading, disabled, rootMargin, threshold, root, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+
+export { type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type UseInfiniteScrollOptions as U, type EmptyPresetImage as a, type SelectOptionItem as b, type SelectSize as c, type SelectVariant as d, type SelectColor as e, type SelectRadius as f, type SelectSearchPlacement as g, type SelectFilterField as h, type SelectFilterLayout as i, type EmptyLayout as j, type EmptySize as k, type SelectFilterType as l, type SelectSearchMode as m, type SingleSelectProps as n, type UseInfiniteScrollReturn as o, useInfiniteScroll as u };

package/dist/useInfiniteScroll-DAlgjUN4.d.ts

@@ -0,0 +1,325 @@
+import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
+import { Placement } from '@floating-ui/react';
+
+type EmptySize = "sm" | "md" | "lg";
+type EmptyPresetImage = "default" | "search" | "error" | "folder" | "simple";
+type EmptyLayout = "vertical" | "horizontal";
+interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML div
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Kích cỡ của Empty component:
+     * - 'sm': Nhỏ gọn, thích hợp cho dropdown, popover, bảng nhỏ
+     * - 'md': Tiêu chuẩn, thích hợp cho card, section, modal
+     * - 'lg': Lớn, thích hợp cho toàn trang, dashboard
+     * @default 'md'
+     */
+    size?: EmptySize;
+    /**
+     * Bố cục hiển thị:
+     * - 'vertical': Xếp dọc ảnh -> tiêu đề -> mô tả -> hành động
+     * - 'horizontal': Dàn ngang ảnh bên trái, nội dung & hành động bên phải
+     * @default 'vertical'
+     */
+    layout?: EmptyLayout;
+    /**
+     * Ảnh hoặc minh họa:
+     * - Tên preset: 'default' | 'search' | 'error' | 'folder' | 'simple'
+     * - URL hình ảnh (string bắt đầu bằng http://, https://, /, hoặc ./)
+     * - ReactNode tùy biến (SVG icon, custom component, v.v.)
+     * @default 'default'
+     */
+    image?: EmptyPresetImage | (string & {}) | ReactNode;
+    /**
+     * Kích thước tùy chỉnh cho ảnh / illustration (pixel hoặc chuỗi kích thước CSS)
+     */
+    imageSize?: number | string;
+    /**
+     * Class tùy biến cho phần bao ngoài của ảnh
+     */
+    imageClassName?: string;
+    /**
+     * Thuộc tính alt cho hình ảnh khi truyền URL
+     * @default 'Empty'
+     */
+    imageAlt?: string;
+    /**
+     * Tiêu đề của trạng thái rỗng
+     */
+    title?: ReactNode;
+    /**
+     * Class tùy biến cho tiêu đề
+     */
+    titleClassName?: string;
+    /**
+     * Đoạn văn bản mô tả chi tiết hoặc hướng dẫn thao tác
+     */
+    description?: ReactNode;
+    /**
+     * Class tùy biến cho phần mô tả
+     */
+    descriptionClassName?: string;
+    /**
+     * Nút bấm hoặc nhóm hành động bên dưới (Call-to-Action)
+     */
+    actions?: ReactNode;
+    /**
+     * Class tùy biến cho khu vực chứa actions
+     */
+    actionsClassName?: string;
+    /**
+     * Nội dung bổ sung tùy biến bên dưới hoặc thay thế
+     */
+    children?: ReactNode;
+}
+
+type SelectSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SelectVariant = "outline" | "filled" | "ghost" | "other";
+type SelectColor = "primary" | "secondary" | "error" | "success" | "warning" | "info" | "neutral";
+type SelectRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type SelectSearchMode = "client" | "server";
+type SelectSearchPlacement = "trigger" | "menu" | "both";
+type SelectFilterLayout = "vertical" | "grid";
+type LabelPlacement = "top" | "left" | "floating";
+interface SelectOptionItem<TData = unknown> {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    description?: ReactNode;
+    icon?: ReactNode;
+    data?: TData;
+}
+type SelectFilterType = "string" | "text" | "number" | "date" | "date-range" | "checkbox-group" | "custom";
+interface SelectFilterField<TValue = unknown> {
+    /** Tên định danh trường lọc (dùng làm key trong object filters) */
+    name: string;
+    /** Loại component lọc */
+    type: SelectFilterType;
+    /** Nhãn hiển thị của bộ lọc */
+    label?: ReactNode;
+    /** Placeholder cho input */
+    placeholder?: string;
+    /** Giá trị mặc định */
+    defaultValue?: TValue;
+    /** Giá trị điều khiển */
+    value?: TValue;
+    /** Số cột chiếm trong grid layout (1, 2, 3...) */
+    colSpan?: number;
+    /** Danh sách options (dùng cho checkbox-group hoặc select con) */
+    options?: {
+        label: ReactNode;
+        value: string | number;
+        disabled?: boolean;
+    }[];
+    /** Props truyền thêm vào component tương ứng (InputProps, DatePickerProps, ...) */
+    props?: Record<string, unknown>;
+    /** Custom render khi type="custom" */
+    render?: (fieldState: {
+        value: TValue | undefined;
+        onChange: (val: TValue) => void;
+    }) => ReactNode;
+}
+interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> {
+    /** Ref chuyển tiếp tới root wrapper element */
+    ref?: Ref<HTMLDivElement>;
+    /** Kích thước: xs, sm, md, lg, xl. Mặc định 'md' */
+    size?: SelectSize;
+    /** Biến thể giao diện: outline, filled, ghost, other. Mặc định 'outline' */
+    variant?: SelectVariant;
+    /** Chủ đề màu sắc: primary, secondary, error, success, warning, info, neutral. Mặc định 'primary' */
+    color?: SelectColor;
+    /** Độ bo góc: none, sm, md, lg, xl, full */
+    radius?: SelectRadius;
+    /** Danh sách các tùy chọn */
+    options: SelectOptionItem<TData>[];
+    /** ID định danh cho Select */
+    id?: string;
+    /** Nhãn tiêu đề của Select */
+    label?: ReactNode;
+    /** Vị trí nhãn: top, left, floating. Mặc định 'top' */
+    labelPlacement?: LabelPlacement;
+    /** ClassName tùy biến cho nhãn */
+    labelClassName?: string;
+    /** Văn bản gợi ý khi chưa chọn */
+    placeholder?: string;
+    /** Văn bản hướng dẫn bên dưới */
+    helperText?: ReactNode;
+    /** Thông báo lỗi khi không hợp lệ */
+    errorMessage?: ReactNode;
+    /** Trạng thái không hợp lệ */
+    isInvalid?: boolean;
+    /** Bắt buộc chọn */
+    isRequired?: boolean;
+    /** Vô hiệu hóa Select */
+    isDisabled?: boolean;
+    /** Chỉ đọc, không cho phép thay đổi */
+    readOnly?: boolean;
+    /** Tên trường form HTML để submit */
+    name?: string;
+    /** Cho phép tìm kiếm. Mặc định false */
+    searchable?: boolean;
+    /** Chế độ tìm kiếm: 'client' (fuzzy search) hoặc 'server' (debounce + API). Mặc định 'client' */
+    searchMode?: SelectSearchMode;
+    /** Vị trí ô tìm kiếm: 'trigger' (trên trigger), 'menu' (trong dropdown), 'both'. Mặc định 'trigger' */
+    searchPlacement?: SelectSearchPlacement;
+    /** Placeholder cho ô tìm kiếm */
+    searchPlaceholder?: string;
+    /** Trường dùng để tìm kiếm (mặc định ['label', 'value']), hỗ trợ string, mảng hoặc hàm accessor tương tự CheckboxGroup */
+    searchField?: (keyof SelectOptionItem<TData> | string | ((item: SelectOptionItem<TData>) => string | undefined | null))[] | (keyof SelectOptionItem<TData> | string);
+    /** Giá trị từ khóa tìm kiếm (khi controlled) */
+    searchValue?: string;
+    /** Callback khi từ khóa thay đổi */
+    onSearchChange?: (value: string) => void;
+    /** Cấu hình danh sách các bộ lọc hiển thị bên trong dropdown menu */
+    menuFilters?: SelectFilterField<unknown>[];
+    /** Giá trị điều khiển cho các bộ lọc trong menu */
+    menuFilterValues?: Partial<TFilters>;
+    /** Bố cục danh sách bộ lọc: 'vertical' hoặc 'grid'. Mặc định 'vertical' */
+    menuFilterLayout?: SelectFilterLayout;
+    /** Số cột khi menuFilterLayout='grid'. Mặc định 2 */
+    menuFilterGridCols?: number;
+    /** Hiển thị nút Reset / Xóa bộ lọc. Mặc định true khi có menuFilters */
+    showResetFilters?: boolean;
+    /** Văn bản nút Reset bộ lọc. Mặc định 'Xoá bộ lọc' */
+    resetFiltersText?: ReactNode;
+    /** Callback khi bất kỳ filter nào trong menu thay đổi */
+    onMenuFilterChange?: (filters: TFilters) => void;
+    /** Nội dung tùy biến trên đầu menu (trước hoặc thay thế filter) */
+    menuHeader?: ReactNode;
+    /** Nội dung tùy biến dưới đáy menu */
+    menuFooter?: ReactNode;
+    /** Nội dung tùy biến ở đáy danh sách tùy chọn bên trong vùng cuộn (ví dụ: Sentinel/Skeleton/Spinner khi phân trang Infinite Scroll) */
+    listFooter?: ReactNode;
+    /** Callback được gọi sau khi debounce khi search query hoặc menu filters thay đổi (ở Server mode) */
+    onSearch?: (query: string, filters: TFilters) => void | Promise<void>;
+    /** Thời gian trì hoãn debounce tính theo ms. Mặc định 300 */
+    debounceMs?: number;
+    /** Hàm custom predicate lọc options ở chế độ client */
+    filterFn?: (option: SelectOptionItem<TData>, query: string, filters: TFilters) => boolean;
+    /** Trạng thái đang tải dữ liệu */
+    isLoading?: boolean;
+    /** Văn bản hiển thị khi không có dữ liệu */
+    emptyText?: ReactNode;
+    /** Props tùy biến chuyển tiếp đến component Empty */
+    emptyProps?: Partial<EmptyProps>;
+    /** Hiển thị nút xoá nhanh toàn bộ giá trị đã chọn */
+    clearable?: boolean;
+    /** Render menu qua Portal để tránh bị che bởi overflow hidden. Mặc định true */
+    portal?: boolean;
+    /** Vị trí hiển thị của popup dropdown. Mặc định 'bottom-start' */
+    placement?: Placement;
+    /** Chiều cao tối đa của vùng cuộn menu. Mặc định 280px */
+    maxMenuHeight?: number | string;
+    /** Bật/tắt animation khi dropdown menu xuất hiện/biến mất. Mặc định true */
+    animated?: boolean;
+    /** Thời lượng hiệu ứng tính bằng mili-giây (ms). Mặc định 150 */
+    animationDuration?: number;
+    /** Icon hoặc nội dung ở đầu trigger */
+    startContent?: ReactNode;
+    /** Icon hoặc nội dung ở cuối trigger */
+    endContent?: ReactNode;
+    /** Tùy biến render từng option trong menu */
+    renderOption?: (option: SelectOptionItem<TData>, state: {
+        selected: boolean;
+        active: boolean;
+    }) => ReactNode;
+    /** ClassName tùy biến cho wrapper ngoài cùng */
+    className?: string;
+    /** ClassName cho phần trigger box */
+    triggerClassName?: string;
+    /** ClassName cho popup dropdown menu */
+    menuClassName?: string;
+}
+/** Props cho component Select (Single Select) */
+interface SelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {
+    /** Giá trị đã chọn (controlled) */
+    value?: string | number | null;
+    /** Giá trị mặc định ban đầu (uncontrolled) */
+    defaultValue?: string | number | null;
+    /** Callback khi giá trị thay đổi */
+    onChange?: (value: string | number | null, option?: SelectOptionItem<TData> | null) => void;
+    /** Tùy biến render giá trị hiển thị trên trigger */
+    renderValue?: (selected: SelectOptionItem<TData>) => ReactNode;
+}
+/** Alias cho SelectProps */
+type SingleSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> = SelectProps<TData, TFilters>;
+/** Props cho component MultiSelect */
+interface MultiSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {
+    /** Danh sách giá trị đã chọn (controlled) */
+    value?: (string | number)[];
+    /** Danh sách giá trị mặc định ban đầu (uncontrolled) */
+    defaultValue?: (string | number)[];
+    /** Callback khi giá trị thay đổi */
+    onChange?: (values: (string | number)[], options?: SelectOptionItem<TData>[]) => void;
+    /** Giới hạn số lượng tag Badge hiển thị trước khi gom thành +N */
+    maxTagCount?: number;
+    /** Tự động ghim bảo lưu các mục đã chọn khi tìm kiếm (tương tự CheckboxGroup). Mặc định true */
+    preserveSelected?: boolean;
+    /** Tùy biến render giá trị hiển thị trên trigger */
+    renderValue?: (selected: SelectOptionItem<TData>[]) => ReactNode;
+}
+
+/**
+ * Các tùy chọn cấu hình cho hook `useInfiniteScroll`.
+ */
+interface UseInfiniteScrollOptions {
+    /**
+     * Callback được gọi khi người dùng cuộn đến cuối hoặc phần tử sentinel xuất hiện trong tầm nhìn.
+     */
+    onLoadMore: () => void | Promise<void>;
+    /**
+     * Cho biết còn dữ liệu để tải tiếp hay không.
+     * Nếu là `false`, `onLoadMore` sẽ không được kích hoạt.
+     * @default true
+     */
+    hasMore?: boolean;
+    /**
+     * Trạng thái đang tải dữ liệu của trang hiện tại / tiếp theo.
+     * Nếu là `true`, `onLoadMore` sẽ tạm hoãn cho đến khi lượt tải trước hoàn tất.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Vô hiệu hóa toàn bộ cơ chế theo dõi cuộn vô hạn.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Khoảng cách biên rootMargin của IntersectionObserver (vd: "100px", "0px 0px 100px 0px").
+     * Giúp kích hoạt tải trước khi người dùng chạm tới đáy danh sách để trải nghiệm mượt mà hơn.
+     * @default "100px"
+     */
+    rootMargin?: string;
+    /**
+     * Ngưỡng hiển thị threshold của IntersectionObserver (từ 0.0 đến 1.0).
+     * @default 0
+     */
+    threshold?: number | number[];
+    /**
+     * Phần tử gốc hoặc RefObject làm khung cuộn cho IntersectionObserver.
+     * Nếu là `null` hoặc `undefined`, sẽ dùng viewport của trình duyệt hoặc khung cuộn cha gần nhất.
+     * @default null
+     */
+    root?: Element | null | RefObject<Element | null>;
+}
+/**
+ * Kết quả trả về từ hook `useInfiniteScroll`.
+ */
+interface UseInfiniteScrollReturn {
+    /**
+     * Ref callback gắn vào phần tử sentinel ở cuối danh sách để theo dõi bằng IntersectionObserver.
+     */
+    sentinelRef: (node: HTMLElement | null) => void;
+    /**
+     * Trạng thái phần tử sentinel có đang nằm trong tầm quan sát hay không.
+     */
+    isIntersecting: boolean;
+}
+/**
+ * Hook `useInfiniteScroll` độc lập hỗ trợ tải dữ liệu vô tận qua IntersectionObserver.
+ */
+declare function useInfiniteScroll({ onLoadMore, hasMore, isLoading, disabled, rootMargin, threshold, root, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+
+export { type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type UseInfiniteScrollOptions as U, type EmptyPresetImage as a, type SelectOptionItem as b, type SelectSize as c, type SelectVariant as d, type SelectColor as e, type SelectRadius as f, type SelectSearchPlacement as g, type SelectFilterField as h, type SelectFilterLayout as i, type EmptyLayout as j, type EmptySize as k, type SelectFilterType as l, type SelectSearchMode as m, type SingleSelectProps as n, type UseInfiniteScrollReturn as o, useInfiniteScroll as u };