@openway/ui 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1,10 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, Ref, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SVGProps, ReactElement, CSSProperties, HTMLProps, RefObject, MouseEvent } from 'react';
+import react, { ButtonHTMLAttributes, Ref, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SVGProps, ReactElement, CSSProperties, HTMLProps, RefObject, MouseEvent, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
 import { ToastT, ToasterProps as ToasterProps$1 } from 'sonner';
 import { Placement, ExtendedRefs, ReferenceType, FloatingContext } from '@floating-ui/react';
+import { E as EmptyProps, a as EmptyPresetImage, S as SelectProps, M as MultiSelectProps, b as SelectOptionItem, c as SelectSize, d as SelectVariant, e as SelectColor, f as SelectRadius, g as SelectSearchPlacement, h as SelectFilterField, i as SelectFilterLayout } from './useInfiniteScroll-DAlgjUN4.js';
+export { B as BaseSelectProps, j as EmptyLayout, k as EmptySize, l as SelectFilterType, m as SelectSearchMode, n as SingleSelectProps, U as UseInfiniteScrollOptions, o as UseInfiniteScrollReturn, u as useInfiniteScroll } from './useInfiniteScroll-DAlgjUN4.js';
+import { Accept, DropzoneRootProps } from 'react-dropzone';
 import { ImageProps } from 'next/image';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { TableFeatures, FilterFn, RowData, TableOptions, ColumnHelper, ReactTable, ColumnDef, Row, PaginationState, OnChangeFn, SortingState, RowSelectionState, ColumnVisibilityState, FilterFnOption, ColumnFiltersState, Header, Column } from '@tanstack/react-table';
+export { Column, ColumnDef, ColumnFiltersState, ColumnHelper, ColumnVisibilityState, Header, OnChangeFn, PaginationState, ReactTable, Row, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { RankingInfo } from '@tanstack/match-sorter-utils';
+export { RankingInfo } from '@tanstack/match-sorter-utils';
 
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonVariant = "filled" | "soft" | "ghost" | "text" | "outline" | "other";
@@ -1109,7 +1116,108 @@ type CheckboxColor = "primary" | "secondary" | "error" | "success" | "warning" |
 type CheckboxRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
 type CheckboxLabelPlacement = "right" | "left";
 type CheckboxGroupOrientation = "horizontal" | "vertical";
+type CheckboxSearchMode = "client" | "server";
+/**
+ * Đại diện cho một phần tử tùy chọn checkbox trong danh sách options của CheckboxGroup
+ */
+interface CheckboxOptionItem<TData = unknown> {
+    /** Giá trị định danh duy nhất của checkbox */
+    value: string;
+    /** Nhãn hiển thị chính của checkbox */
+    label: ReactNode;
+    /** Đoạn mô tả/chú thích phụ hiển thị bên dưới nhãn */
+    description?: ReactNode;
+    /** Vô hiệu hóa tương tác của ô checkbox này */
+    disabled?: boolean;
+    /** Chế độ chỉ đọc cho ô checkbox này */
+    isReadOnly?: boolean;
+    /** Trạng thái gạch ngang (indeterminate) */
+    indeterminate?: boolean;
+    /** Dữ liệu gốc đính kèm (dùng khi tìm kiếm hoặc lưu trữ ngữ cảnh nâng cao) */
+    data?: TData;
+    /** Cho phép mở rộng các trường tùy biến phục vụ tìm kiếm theo searchField */
+    [key: string]: unknown;
+}
+/**
+ * Cấu hình tập trung các cờ trạng thái / tính năng của Checkbox
+ */
+interface CheckboxConfig {
+    /**
+     * Đánh dấu trường bắt buộc (hiển thị dấu * đỏ cạnh label)
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trạng thái báo lỗi (viền đỏ, aria-invalid="true")
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải (vô hiệu hóa tương tác, aria-busy="true")
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Trạng thái trung gian (indeterminate / gạch ngang) - thường dùng cho "Chọn tất cả"
+     * @default false
+     */
+    indeterminate?: boolean;
+}
+/**
+ * Cấu hình tập trung các cờ trạng thái / tính năng của CheckboxGroup
+ */
+interface CheckboxGroupConfig {
+    /**
+     * Đánh dấu trường bắt buộc chọn
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trạng thái báo lỗi cho cả nhóm
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải cho cả nhóm
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị spinner cho các checkbox con đang tải
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Chế độ chỉ đọc cho cả nhóm
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Kích hoạt thanh tìm kiếm tích hợp
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Trạng thái đang tải tìm kiếm (Server mode)
+     * @default false
+     */
+    isSearching?: boolean;
+    /**
+     * Tự động bảo lưu các mục đã chọn khi lọc tìm kiếm
+     * @default true
+     */
+    preserveSelected?: boolean;
+}
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /**
+     * Cấu hình tập trung các cờ trạng thái / tính năng (isRequired, isInvalid, isLoading, indeterminate,...)
+     */
+    config?: CheckboxConfig;
     /**
      * Ref chuyển tiếp đến phần tử HTML input (React 19)
      */
@@ -1141,29 +1249,9 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
     /**
      * Tùy chỉnh độ bo góc của ô checkbox:
      * - 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
-     * @default theo từng `size` (xs: rounded-xs, sm: rounded-sm, md: rounded-md, lg: rounded-md, xl: rounded-lg)
+     * @default 'md'
      */
     radius?: CheckboxRadius;
-    /**
-     * Trạng thái trung gian (indeterminate / gạch ngang) - thường dùng cho "Chọn tất cả"
-     * @default false
-     */
-    indeterminate?: boolean;
-    /**
-     * Trạng thái đang tải (hiển thị spinner và vô hiệu hóa tương tác)
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Trạng thái báo lỗi (viền đỏ, aria-invalid="true")
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Đánh dấu trường bắt buộc (hiển thị dấu * đỏ cạnh label)
-     * @default false
-     */
-    isRequired?: boolean;
     /**
      * Nhãn văn bản hiển thị cạnh ô checkbox
      */
@@ -1208,11 +1296,72 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
      */
     helperClassName?: string;
 }
-interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+interface CheckboxGroupProps<TData = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * Cấu hình tập trung các cờ trạng thái / tính năng
+     */
+    config?: CheckboxGroupConfig;
     /**
      * Ref chuyển tiếp đến container thẻ div của nhóm (React 19)
      */
     ref?: Ref<HTMLDivElement>;
+    /**
+     * Danh sách các tùy chọn checkbox dạng mảng dữ liệu (Data-driven)
+     * @default []
+     */
+    options?: CheckboxOptionItem<TData>[];
+    /**
+     * Chế độ tìm kiếm: 'client' (lọc tại chỗ) hoặc 'server' (gọi API sau debounce)
+     * @default 'client'
+     */
+    searchMode?: CheckboxSearchMode;
+    /**
+     * Placeholder hiển thị trong ô tìm kiếm
+     * @default 'Tìm kiếm...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Giá trị từ khóa tìm kiếm (khi kiểm soát Controlled)
+     */
+    searchValue?: string;
+    /**
+     * Giá trị từ khóa tìm kiếm mặc định ban đầu (Uncontrolled)
+     */
+    defaultSearchValue?: string;
+    /**
+     * Callback kích hoạt khi từ khóa tìm kiếm thay đổi
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Tùy biến className cho ô input tìm kiếm
+     */
+    searchClassName?: string;
+    /**
+     * Trường dữ liệu để so khớp khi tìm kiếm ở mode client.
+     * - Có thể truyền 1 field (string, ví dụ 'label', 'email', 'code')
+     * - Hoặc nhiều fields (string[], ví dụ ['label', 'email', 'description']) để tìm kiếm mở rộng (OR).
+     * @default 'label'
+     */
+    searchField?: string | string[];
+    /**
+     * Hàm tùy biến lọc dữ liệu ở mode client
+     */
+    filterFn?: (option: CheckboxOptionItem<TData>, query: string) => boolean;
+    /**
+     * Callback được gọi sau khi debounce khi người dùng gõ tìm kiếm (ở Server mode).
+     * Có thể trả về Promise danh sách options mới hoặc cập nhật prop options từ ngoài.
+     */
+    onSearch?: (query: string) => void | Promise<CheckboxOptionItem<TData>[] | void>;
+    /**
+     * Thời gian trì hoãn debounce tính theo mili-giây (Server mode).
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Nội dung hiển thị khi không có kết quả tìm kiếm
+     * @default 'Không tìm thấy kết quả'
+     */
+    emptyText?: ReactNode;
     /**
      * Mảng các giá trị được chọn (Controlled mode)
      */
@@ -1249,26 +1398,6 @@ interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Chế độ chỉ đọc cho toàn bộ checkbox trong nhóm
-     * @default false
-     */
-    isReadOnly?: boolean;
-    /**
-     * Trạng thái đang tải cho toàn bộ checkbox trong nhóm
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Trạng thái báo lỗi cho cả nhóm
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Đánh dấu nhóm bắt buộc phải chọn
-     * @default false
-     */
-    isRequired?: boolean;
     /**
      * Tiêu đề / Nhãn chung cho cả nhóm checkbox
      */
@@ -1305,40 +1434,42 @@ interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
      * Tùy biến className cho helperText hoặc errorMessage của nhóm
      */
     helperClassName?: string;
-    /**
-     * Danh sách các component con (thường là các Checkbox)
-     */
-    children?: ReactNode;
 }
 
-declare function Checkbox({ size: sizeProp, variant: variantProp, color: colorProp, radius: radiusProp, indeterminate, isLoading: isLoadingProp, isInvalid: isInvalidProp, isRequired: isRequiredProp, label: labelProp, children, helperText, errorMessage, labelPlacement: labelPlacementProp, icon, indeterminateIcon, wrapperClassName, boxClassName, labelClassName, helperClassName, className, checked: checkedProp, defaultChecked, disabled: disabledProp, readOnly: readOnlyProp, onChange, value, id: idProp, name: nameProp, ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
-
-declare function CheckboxGroup({ value: valueProp, defaultValue, onChange, size, color, variant, radius, disabled, isReadOnly, isLoading, isInvalid: isInvalidProp, isRequired, label, helperText, errorMessage, orientation, labelPlacement, className, wrapperClassName, labelClassName, helperClassName, children, ref, ...props }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ size, variant, color, radius, config, label: labelProp, children, helperText, errorMessage, labelPlacement, icon, indeterminateIcon, wrapperClassName, boxClassName, labelClassName, helperClassName, className, checked: checkedProp, defaultChecked, disabled, readOnly, onChange, value, id: idProp, name, ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxGroupContextValue {
-    name?: string;
-    value?: string[];
-    onChange?: (val: string, checked: boolean) => void;
-    size?: CheckboxSize;
-    color?: CheckboxColor;
-    variant?: CheckboxVariant;
-    radius?: CheckboxRadius;
-    disabled?: boolean;
-    isReadOnly?: boolean;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
-    labelPlacement?: CheckboxLabelPlacement;
-}
-declare const CheckboxGroupContext: react.Context<CheckboxGroupContextValue | undefined>;
-declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | undefined;
+declare function CheckboxGroup<TData = unknown>({ value: valueProp, defaultValue, onChange, size, color, variant, radius, disabled, label, helperText, errorMessage, orientation, labelPlacement, className, wrapperClassName, labelClassName, helperClassName, options, config, searchMode, searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchClassName, searchField, filterFn, onSearch, debounceMs, emptyText, children, ref, ...props }: CheckboxGroupProps<TData>): react_jsx_runtime.JSX.Element;
 
 type RadioSize = "xs" | "sm" | "md" | "lg" | "xl";
 type RadioVariant = "filled" | "outline" | "soft" | "other";
 type RadioColor = "primary" | "secondary" | "error" | "success" | "warning" | "info" | "neutral";
 type RadioLabelPlacement = "right" | "left";
 type RadioGroupOrientation = "horizontal" | "vertical";
+/**
+ * Cau hinh tap trung cac co trang thai / tinh nang cua Radio
+ */
+interface RadioConfig {
+    /**
+     * Danh dau bat buoc
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trang thai bao loi (vien do)
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trang thai dang tai (hien thi spinner va vo hieu hoa tuong tac)
+     * @default false
+     */
+    isLoading?: boolean;
+}
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /**
+     * Cau hinh tap trung cac co trang thai / tinh nang
+     */
+    config?: RadioConfig;
     /**
      * Ref chuyen tiep den phan tu HTML input (React 19)
      */
@@ -1367,21 +1498,6 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
      * @default 'primary'
      */
     color?: RadioColor;
-    /**
-     * Trang thai dang tai (hien thi spinner va vo hieu hoa tuong tac)
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Trang thai bao loi (vien do, aria-invalid="true")
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Danh dau truong bat buoc (hien thi dau * do canh label)
-     * @default false
-     */
-    isRequired?: boolean;
     /**
      * Nhan van ban hien thi canh o radio
      */
@@ -1422,125 +1538,214 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
      */
     helperClassName?: string;
 }
-interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+type RadioSearchMode = "client" | "server";
+interface RadioOptionItem<TData = unknown> {
     /**
-     * Ref chuyen tiep den container the div cua nhom (React 19)
+     * Gia tri dinh danh duy nhat cua radio option
      */
-    ref?: Ref<HTMLDivElement>;
+    value: string;
     /**
-     * Gia tri dang duoc chon (Controlled mode) - string don hoac null de bo chon
+     * Nhan van ban hoac node hien thi
      */
-    value?: string | null;
+    label?: ReactNode;
     /**
-     * Gia tri mac dinh ban dau (Uncontrolled mode)
+     * Doan van ban huong dan/chu thich ben duoi
      */
-    defaultValue?: string | null;
+    description?: ReactNode;
     /**
-     * Callback kich hoat khi radio duoc chon thay doi
+     * Vo hieu hoa rieng cho option nay
      */
-    onChange?: (value: string | null) => void;
+    disabled?: boolean;
     /**
-     * Kich co ap dung chung cho tat ca cac radio con
-     * @default 'md'
+     * Che do chi doc rieng cho option nay
      */
-    size?: RadioSize;
+    isReadOnly?: boolean;
     /**
-     * Mau sac ap dung chung cho tat ca cac radio con
-     * @default 'primary'
+     * Du lieu goc tuy chinh gan kem
      */
-    color?: RadioColor;
+    data?: TData;
     /**
-     * Bien the ap dung chung cho tat ca cac radio con
-     * @default 'filled'
+     * Ho tro cac truong tuy y khac de phuc vu loc theo searchField
      */
-    variant?: RadioVariant;
+    [key: string]: unknown;
+}
+/**
+ * Cau hinh tap trung cac co trang thai / tinh nang cua RadioGroup
+ */
+interface RadioGroupConfig {
     /**
-     * Vo hieu hoa toan bo cac radio trong nhom
+     * Danh dau bat buoc chon
      * @default false
      */
-    disabled?: boolean;
+    isRequired?: boolean;
     /**
-     * Che do chi doc cho toan bo radio trong nhom
+     * Trang thai bao loi cua nhom
      * @default false
      */
-    isReadOnly?: boolean;
+    isInvalid?: boolean;
     /**
-     * Trang thai dang tai cho toan bo radio trong nhom
+     * Trang thai dang tai cua nhom
      * @default false
      */
     isLoading?: boolean;
     /**
-     * Trang thai bao loi cho ca nhom
+     * Che do chi doc cho nhom
      * @default false
      */
-    isInvalid?: boolean;
+    isReadOnly?: boolean;
     /**
-     * Danh dau nhom bat buoc phai chon
+     * Bat o tim kiem cho nhom Radio
      * @default false
      */
-    isRequired?: boolean;
+    searchable?: boolean;
     /**
-     * Tieu de / Nhan chung cho ca nhom radio
+     * Trang thai dang tai tim kiem (Server mode)
+     * @default false
      */
-    label?: ReactNode;
+    isSearching?: boolean;
     /**
-     * Huong sap xep cac radio:
-     * - 'vertical': Sap xep theo chieu doc (mac dinh)
-     * - 'horizontal': Sap xep theo chieu ngang
-     * @default 'vertical'
+     * Tu dong bao luu va hien thi muc da chon khi loc tim kiem
+     * @default true
      */
-    orientation?: RadioGroupOrientation;
+    preserveSelected?: boolean;
+}
+interface RadioGroupProps<TData = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "children"> {
     /**
-     * Vi tri dat nhan cua cac radio con trong nhom
-     * @default 'right'
+     * Cau hinh tap trung cac co trang thai / tinh nang
      */
-    labelPlacement?: RadioLabelPlacement;
+    config?: RadioGroupConfig;
     /**
-     * Doan van ban huong dan/chu thich cho nhom
+     * Ref chuyen tiep den container the div cua nhom (React 19)
      */
-    helperText?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
     /**
-     * Thong bao loi hien thi cho ca nhom (se tu dong kich hoat isInvalid)
+     * Danh sach cac option cua radio group (Data-driven pattern)
      */
-    errorMessage?: ReactNode;
+    options?: RadioOptionItem<TData>[];
     /**
-     * Tuy bien className cho container boc ngoai cung cua nhom
+     * Gia tri dang duoc chon (Controlled mode) - string don hoac null de bo chon
      */
-    wrapperClassName?: string;
+    value?: string | null;
     /**
-     * Tuy bien className cho tieu de nhan cua nhom
+     * Gia tri mac dinh ban dau (Uncontrolled mode)
      */
-    labelClassName?: string;
+    defaultValue?: string | null;
     /**
-     * Tuy bien className cho helperText hoac errorMessage cua nhom
+     * Callback kich hoat khi radio duoc chon thay doi
      */
-    helperClassName?: string;
+    onChange?: (value: string | null) => void;
     /**
-     * Danh sach cac component con (thuong la cac Radio)
+     * Placeholder cho o input tim kiem
+     */
+    searchPlaceholder?: string;
+    /**
+     * Gia tri tim kiem hien tai (Controlled search)
+     */
+    searchValue?: string;
+    /**
+     * Callback khi gia tri tim kiem thay doi
+     */
+    onSearchChange?: (val: string) => void;
+    /**
+     * Che do tim kiem:
+     * - 'client': Loc danh sach bang fuzzy matching qua match-sorter-utils (mac dinh)
+     * - 'server': Goi API tim kiem bat dong bo qua onSearch
+     * @default 'client'
+     */
+    searchMode?: RadioSearchMode;
+    /**
+     * Cac truong du lieu can loc (trong che do client search).
+     * Co the la 1 key hoac mang cac keys (vd: ['label', 'description', 'code'])
+     * @default 'label'
+     */
+    searchField?: string | string[];
+    /**
+     * Custom filter function cho che do client search
+     */
+    filterFn?: (item: RadioOptionItem<TData>, query: string) => boolean;
+    /**
+     * Callback tim kiem bat dong bo cho server search mode
+     */
+    onSearch?: (query: string) => Promise<RadioOptionItem<TData>[]>;
+    /**
+     * Thoi gian debounce khi nguoi dung nhap tu khoa tim kiem (ms)
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Thong bao hien thi khi khong tim thay ket qua
+     * @default 'Khong tim thay ket qua'
+     */
+    emptyText?: ReactNode;
+    /**
+     * Tuy bien className cho khung chua o tim kiem
+     */
+    searchClassName?: string;
+    /**
+     * Kich thuoc o input tim kiem
+     */
+    searchInputSize?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Kich co ap dung chung cho tat ca cac radio con
+     * @default 'md'
      */
-    children?: ReactNode;
-}
-
-declare function Radio({ size: sizeProp, variant: variantProp, color: colorProp, isLoading: isLoadingProp, isInvalid: isInvalidProp, isRequired: isRequiredProp, label, helperText, errorMessage, labelPlacement: labelPlacementProp, dotIcon, wrapperClassName, boxClassName, labelClassName, helperClassName, className, checked: checkedProp, defaultChecked, disabled: disabledProp, readOnly: readOnlyProp, onChange, value, id: idProp, name: nameProp, ref, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
-
-declare function RadioGroup({ value: valueProp, defaultValue, onChange, size, color, variant, disabled, isReadOnly, isLoading, isInvalid: isInvalidProp, isRequired, label, helperText, errorMessage, orientation, labelPlacement, className, wrapperClassName, labelClassName, helperClassName, children, ref, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
-
-interface RadioGroupContextValue {
-    name: string;
-    value?: string | null;
-    onChange?: (val: string | null) => void;
     size?: RadioSize;
+    /**
+     * Mau sac ap dung chung cho tat ca cac radio con
+     * @default 'primary'
+     */
     color?: RadioColor;
+    /**
+     * Bien the ap dung chung cho tat ca cac radio con
+     * @default 'filled'
+     */
     variant?: RadioVariant;
+    /**
+     * Vo hieu hoa toan bo cac radio trong nhom
+     * @default false
+     */
     disabled?: boolean;
-    isReadOnly?: boolean;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
+    /**
+     * Tieu de / Nhan chung cho ca nhom radio
+     */
+    label?: ReactNode;
+    /**
+     * Huong sap xep cac radio:
+     * - 'vertical': Sap xep theo chieu doc (mac dinh)
+     * - 'horizontal': Sap xep theo chieu ngang
+     * @default 'vertical'
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Vi tri dat nhan cua cac radio con trong nhom
+     * @default 'right'
+     */
     labelPlacement?: RadioLabelPlacement;
+    /**
+     * Doan van ban huong dan/chu thich cho nhom
+     */
+    helperText?: ReactNode;
+    /**
+     * Thong bao loi hien thi cho ca nhom (se tu dong kich hoat isInvalid)
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Tuy bien className cho container boc ngoai cung cua nhom
+     */
+    wrapperClassName?: string;
+    /**
+     * Tuy bien className cho tieu de nhan cua nhom
+     */
+    labelClassName?: string;
+    /**
+     * Tuy bien className cho helperText hoac errorMessage cua nhom
+     */
+    helperClassName?: string;
 }
-declare const RadioGroupContext: react.Context<RadioGroupContextValue | undefined>;
-declare const useRadioGroupContext: () => RadioGroupContextValue | undefined;
+
+declare function Radio({ size, variant, color, disabled, readOnly, config, labelPlacement, label, helperText, errorMessage, dotIcon, wrapperClassName, boxClassName, labelClassName, helperClassName, className, checked: checkedProp, defaultChecked, onChange, value, id: idProp, name, ref, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+declare function RadioGroup<TData = unknown>({ options, value: valueProp, defaultValue, onChange, size, color, variant, disabled, label, helperText, errorMessage, orientation, labelPlacement, className, wrapperClassName, labelClassName, helperClassName, config, searchPlaceholder, searchValue: searchValueProp, onSearchChange, searchMode, searchField, filterFn, onSearch, debounceMs, emptyText, searchClassName, searchInputSize: searchInputSizeProp, ref, ...props }: RadioGroupProps<TData>): react_jsx_runtime.JSX.Element;
 
 type ToggleSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ToggleVariant = "filled" | "outline" | "soft" | "other";
@@ -1744,6 +1949,19 @@ declare function TrashIcon({ width, height, className, ...props }: SVGProps<SVGS
 
 declare function UploadIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
+interface AvatarIconProps extends SVGProps<SVGSVGElement> {
+    variant?: "solid" | "outline";
+}
+declare function AvatarIcon({ width, height, variant, className, ...props }: AvatarIconProps): react_jsx_runtime.JSX.Element;
+
+declare function ArrowUpDownIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function ArrowUpIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function ArrowDownIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function SlidersHorizontalIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
 /**
  * Các kích cỡ tiêu chuẩn của Alert:
  * - 'xs': Siêu nhỏ (text-xs, padding p-2)
@@ -3099,7 +3317,6 @@ interface TabsContextValue {
     destroyInactiveTabPane: boolean;
     onCloseTab?: (key: string | number) => void;
 }
-declare const TabsContext: react.Context<TabsContextValue | null>;
 declare function useTabsContext(): TabsContextValue;
 
 /**
@@ -4323,6 +4540,11 @@ interface CalendarProps {
      * Class CSS bổ sung cho container lịch
      */
     className?: string;
+    /**
+     * Hiển thị viền ngoài của Calendar
+     * @default true
+     */
+    bordered?: boolean;
 }
 interface DatePickerConfig {
     /**
@@ -4541,11 +4763,16 @@ interface DatePickerProps {
      * Class CSS cho popover chứa lịch
      */
     popoverClassName?: string;
+    /**
+     * Có render popover thông qua Portal (gắn vào document.body) hay không
+     * @default true
+     */
+    portal?: boolean;
 }
 
-declare function DatePicker({ ref, value: controlledValue, defaultValue, onChange, format, displayFormat: customDisplayFormat, defaultView, locale, firstDayOfWeek, minDate, maxDate, isDateDisabled, size, variant, color, radius, label, labelPlacement, placeholder, helperText, errorMessage, name, id, autoComplete, viewTabs, view: controlledView, onViewChange, onClear, placement, disabled, readOnly, config, className, wrapperClassName, inputWrapperClassName, labelClassName, helperClassName, popoverClassName, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ ref, value: controlledValue, defaultValue, onChange, format, displayFormat: customDisplayFormat, defaultView, locale, firstDayOfWeek, minDate, maxDate, isDateDisabled, size, variant, color, radius, label, labelPlacement, placeholder, helperText, errorMessage, name, id, autoComplete, viewTabs, view: controlledView, onViewChange, onClear, placement, disabled, readOnly, portal, config, className, wrapperClassName, inputWrapperClassName, labelClassName, helperClassName, popoverClassName, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-declare function Calendar({ value: selectedDate, onChange, view, onViewChange, minDate, maxDate, isDateDisabled, locale, firstDayOfWeek, showWeekNumbers, showViewTabs, viewTabs, size, color, radius, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ value: selectedDate, onChange, view, onViewChange, minDate, maxDate, isDateDisabled, locale, firstDayOfWeek, showWeekNumbers, showViewTabs, viewTabs, size, color, radius, className, bordered, }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 declare function CalendarHeader({ currentMonth, view, onViewChange, onPrevMonth, onNextMonth, onPrevYear, onNextYear, onPrevDecade, onNextDecade, size, color, locale, showMonthButtons, }: CalendarHeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -4875,6 +5102,8 @@ interface DateRangeCalendarProps {
     radius?: DateRangePickerRadius;
     /** Custom CSS class cho container */
     className?: string;
+    /** Hiển thị viền ngoài của Calendar @default true */
+    bordered?: boolean;
 }
 /**
  * Cấu hình tập trung các cờ tính năng / trạng thái cho DateRangePicker
@@ -5101,11 +5330,16 @@ interface DateRangePickerProps {
      * CSS class bổ sung cho khung popover lịch
      */
     popoverClassName?: string;
+    /**
+     * Có render popover thông qua Portal (gắn vào document.body) hay không
+     * @default true
+     */
+    portal?: boolean;
 }
 
-declare function DateRangePicker({ ref, value: controlledValue, defaultValue, onChange, separator, format, displayFormat: customDisplayFormat, defaultView, locale, firstDayOfWeek, minDate, maxDate, isDateDisabled, size, variant, color, radius, label, labelPlacement, placeholder, helperText, errorMessage, name, id, autoComplete, viewTabs, view: controlledView, onViewChange, onClear, placement, disabled, readOnly, config, className, wrapperClassName, inputWrapperClassName, labelClassName, helperClassName, popoverClassName, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ ref, value: controlledValue, defaultValue, onChange, separator, format, displayFormat: customDisplayFormat, defaultView, locale, firstDayOfWeek, minDate, maxDate, isDateDisabled, size, variant, color, radius, label, labelPlacement, placeholder, helperText, errorMessage, name, id, autoComplete, viewTabs, view: controlledView, onViewChange, onClear, placement, disabled, readOnly, portal, config, className, wrapperClassName, inputWrapperClassName, labelClassName, helperClassName, popoverClassName, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
-declare function DateRangeCalendar({ value, onChange, view, onViewChange, minDate, maxDate, isDateDisabled, locale, firstDayOfWeek, showWeekNumbers, showViewTabs, viewTabs, size, color, radius, className, }: DateRangeCalendarProps): react_jsx_runtime.JSX.Element;
+declare function DateRangeCalendar({ value, onChange, view, onViewChange, minDate, maxDate, isDateDisabled, locale, firstDayOfWeek, showWeekNumbers, showViewTabs, viewTabs, size, color, radius, className, bordered, }: DateRangeCalendarProps): react_jsx_runtime.JSX.Element;
 
 declare function DateRangeHeader({ month1, month2, view, onViewChange, onPrevMonth, onNextMonth, onPrevYear, onNextYear, onPrevDecade, onNextDecade, size, color, locale, }: DateRangeHeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -6180,80 +6414,6 @@ interface DateTimeRangePickerProps {
  */
 declare function DateTimeRangePicker({ ref, value: controlledValue, defaultValue, onChange, format: customFormat, displayFormat: customDisplayFormat, separator, startLabel, endLabel, layout, locale, defaultView, firstDayOfWeek, minDate, maxDate, isDateDisabled, viewTabs, use12Hours, showSeconds, hourStep, minuteStep, secondStep, minTime, maxTime, disabledHours, disabledMinutes, disabledSeconds, size, variant, color, radius, label, labelPlacement, placeholder, placeholders, helperText, errorMessage, name, id, autoComplete, disabled, readOnly, config, onClear, placement, className, wrapperClassName, inputWrapperClassName, labelClassName, helperClassName, popoverClassName, }: DateTimeRangePickerProps): react_jsx_runtime.JSX.Element;
 
-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;
-}
-
 declare function Empty({ size, layout, image, imageSize, imageClassName, imageAlt, title, titleClassName, description, descriptionClassName, actions, actionsClassName, children, className, role, ref, ...props }: EmptyProps): react_jsx_runtime.JSX.Element;
 
 interface EmptyIllustrationProps extends SVGProps<SVGSVGElement> {
@@ -6261,185 +6421,40 @@ interface EmptyIllustrationProps extends SVGProps<SVGSVGElement> {
 }
 declare function EmptyIllustration({ preset, ...props }: EmptyIllustrationProps): react_jsx_runtime.JSX.Element;
 
-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";
-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' */
+declare function Select<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>>({ ref, options, value, defaultValue, onChange, size, variant, color, radius, id: idProp, label, labelPlacement, placeholder, helperText, errorMessage, isInvalid: isInvalidProp, isDisabled, readOnly, isRequired, name, searchable, searchMode, searchPlacement, searchPlaceholder, searchField, searchValue: searchValueProp, onSearchChange, menuFilters, menuFilterValues: controlledFilterValues, menuFilterLayout, menuFilterGridCols, showResetFilters, resetFiltersText, onMenuFilterChange, menuHeader, menuFooter, listFooter, onSearch, debounceMs, filterFn, isLoading, emptyText, emptyProps, clearable, portal, placement, maxMenuHeight, animated, animationDuration, startContent, endContent, renderValue, renderOption, className, triggerClassName, menuClassName, labelClassName, ...props }: SelectProps<TData, TFilters>): react_jsx_runtime.JSX.Element;
+
+declare function MultiSelect<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>>({ ref, options, value: valueProp, defaultValue, onChange, size, variant, color, radius, id: idProp, label, labelPlacement, placeholder, helperText, errorMessage, isInvalid: isInvalidProp, isDisabled, readOnly, isRequired, name, maxTagCount, searchable, searchMode, searchPlacement, searchPlaceholder, searchField, preserveSelected, searchValue: searchValueProp, onSearchChange, menuFilters, menuFilterValues: controlledFilterValues, menuFilterLayout, menuFilterGridCols, showResetFilters, resetFiltersText, onMenuFilterChange, menuHeader, menuFooter, listFooter, onSearch, debounceMs, filterFn, isLoading, emptyText, emptyProps, clearable, portal, placement, maxMenuHeight, animated, animationDuration, startContent, endContent, renderValue, renderOption, className, triggerClassName, menuClassName, labelClassName, ...props }: MultiSelectProps<TData, TFilters>): react_jsx_runtime.JSX.Element;
+
+interface SingleSelectTriggerProps<TData = unknown> {
+    id?: string;
+    selectedOption: SelectOptionItem<TData> | null;
+    isOpen: boolean;
     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;
-    /** 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 */
-    isReadOnly?: boolean;
-    /** Alias cho isReadOnly */
+    disabled?: boolean;
     readOnly?: boolean;
-    /** Tên trường form HTML để submit */
-    name?: string;
-    /** Cho phép tìm kiếm. Mặc định false */
+    isInvalid?: boolean;
     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;
-    /** 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;
-    /** 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 */
-    loading?: boolean;
-    /** Alias cho loading (chuẩn hoá theo Design System form inputs) */
-    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 */
+    onSearchChange?: (val: string) => void;
+    onClear?: (e: react.MouseEvent) => void;
     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;
-    /** Icon hoặc nội dung ở đầu trigger */
+    isLoading?: boolean;
     startContent?: ReactNode;
-    /** Icon hoặc nội dung ở cuối trigger */
     endContent?: ReactNode;
-    /** Tùy biến render giá trị hiển thị trên trigger */
-    renderValue?: (selected: SelectOptionItem<TData> | SelectOptionItem<TData>[]) => 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 */
+    renderValue?: (selected: SelectOptionItem<TData>) => ReactNode;
+    triggerRef: (node: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
+    onKeyDown?: (e: react.KeyboardEvent<HTMLInputElement>) => void;
     className?: string;
-    /** ClassName cho phần trigger box */
-    triggerClassName?: string;
-    /** ClassName cho popup dropdown menu */
-    menuClassName?: string;
-}
-type SingleSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> = BaseSelectProps<TData, TFilters> & {
-    /** Chế độ chọn đơn */
-    multiple?: false;
-    /** 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;
-};
-type MultiSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> = BaseSelectProps<TData, TFilters> & {
-    /** Chế độ chọn nhiều */
-    multiple: true;
-    /** 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;
-};
-type SelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> = SingleSelectProps<TData, TFilters> | MultiSelectProps<TData, TFilters>;
-
-declare function Select<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>>(props: SelectProps<TData, TFilters>): react_jsx_runtime.JSX.Element;
+}
+declare function SingleSelectTrigger<TData = unknown>({ id, selectedOption, isOpen, size, variant, color, radius, placeholder, disabled, readOnly, isInvalid, searchable, searchPlacement, searchValue, onSearchChange, onClear, clearable, isLoading, startContent, endContent, renderValue, triggerRef, getReferenceProps, onKeyDown, className, }: SingleSelectTriggerProps<TData>): react_jsx_runtime.JSX.Element;
 
-interface SelectTriggerProps<TData = unknown> {
+interface MultiSelectTriggerProps<TData = unknown> {
     id?: string;
     selectedOptions: SelectOptionItem<TData>[];
     isOpen: boolean;
@@ -6451,42 +6466,44 @@ interface SelectTriggerProps<TData = unknown> {
     disabled?: boolean;
     readOnly?: boolean;
     isInvalid?: boolean;
-    multiple?: boolean;
     maxTagCount?: number;
     searchable?: boolean;
     searchPlacement?: SelectSearchPlacement;
     searchValue?: string;
     onSearchChange?: (val: string) => void;
     onRemoveTag?: (option: SelectOptionItem<TData>) => void;
-    onClear?: (e: react__default.MouseEvent) => void;
+    onClear?: (e: react.MouseEvent) => void;
     clearable?: boolean;
-    loading?: boolean;
     isLoading?: boolean;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    renderValue?: (selected: SelectOptionItem<TData> | SelectOptionItem<TData>[]) => ReactNode;
+    renderValue?: (selected: SelectOptionItem<TData>[]) => ReactNode;
     triggerRef: (node: HTMLElement | null) => void;
     getReferenceProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
-    onKeyDown?: (e: react__default.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: react.KeyboardEvent<HTMLInputElement>) => void;
     className?: string;
 }
-declare function SelectTrigger<TData = unknown>({ id, selectedOptions, isOpen, size, variant, color, radius, placeholder, disabled, readOnly, isInvalid, multiple, maxTagCount, searchable, searchPlacement, searchValue, onSearchChange, onRemoveTag, onClear, clearable, loading: loadingProp, isLoading: isLoadingProp, startContent, endContent, renderValue, triggerRef, getReferenceProps, onKeyDown, className, }: SelectTriggerProps<TData>): react_jsx_runtime.JSX.Element;
+declare function MultiSelectTrigger<TData = unknown>({ id, selectedOptions, isOpen, size, variant, color, radius, placeholder, disabled, readOnly, isInvalid, maxTagCount, searchable, searchPlacement, searchValue, onSearchChange, onRemoveTag, onClear, clearable, isLoading, startContent, endContent, renderValue, triggerRef, getReferenceProps, onKeyDown, className, }: MultiSelectTriggerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface SelectMenuProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> {
     isOpen: boolean;
+    isMounted?: boolean;
+    animated?: boolean;
+    transitionStyles?: CSSProperties;
     options: SelectOptionItem<TData>[];
     selectedValues: (string | number)[];
     activeIndex: number | null;
     size?: SelectSize;
     color?: SelectColor;
     radius?: SelectRadius;
-    loading?: boolean;
+    isLoading?: boolean;
     portal?: boolean;
     maxMenuHeight?: number | string;
     emptyText?: ReactNode;
     emptyProps?: Partial<EmptyProps>;
     menuHeader?: ReactNode;
     menuFooter?: ReactNode;
+    listFooter?: ReactNode;
     menuFilters?: SelectFilterField<unknown>[];
     menuFilterValues?: Partial<TFilters>;
     menuFilterLayout?: SelectFilterLayout;
@@ -6504,10 +6521,10 @@ interface SelectMenuProps<TData = unknown, TFilters extends Record<string, unkno
     floatingStyles: CSSProperties;
     floatingRef: (node: HTMLElement | null) => void;
     getFloatingProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
-    listElementsRef: react__default.RefObject<(HTMLElement | null)[]>;
+    listElementsRef: react.RefObject<(HTMLElement | null)[]>;
     className?: string;
 }
-declare function SelectMenu<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>>({ isOpen, options, selectedValues, activeIndex, size, color, radius, loading, portal, maxMenuHeight, emptyText, emptyProps, menuHeader, menuFooter, menuFilters, menuFilterValues, menuFilterLayout, menuFilterGridCols, showResetFilters, resetFiltersText, onMenuFilterChange, onResetFilters, renderOption, onSelectOption, onOptionMouseEnter, floatingStyles, floatingRef, getFloatingProps, listElementsRef, className, }: SelectMenuProps<TData, TFilters>): react_jsx_runtime.JSX.Element | null;
+declare function SelectMenu<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>>({ isOpen, isMounted, animated, transitionStyles, options, selectedValues, activeIndex, size, color, radius, isLoading, portal, maxMenuHeight, emptyText, emptyProps, menuHeader, menuFooter, listFooter, menuFilters, menuFilterValues, menuFilterLayout, menuFilterGridCols, showResetFilters, resetFiltersText, onMenuFilterChange, onResetFilters, renderOption, onSelectOption, onOptionMouseEnter, floatingStyles, floatingRef, getFloatingProps, listElementsRef, className, }: SelectMenuProps<TData, TFilters>): react_jsx_runtime.JSX.Element | null;
 
 interface SelectMenuFilterProps<TFilters extends Record<string, unknown> = Record<string, unknown>> {
     filters: SelectFilterField<unknown>[];
@@ -6521,7 +6538,7 @@ interface SelectMenuFilterProps<TFilters extends Record<string, unknown> = Recor
     color?: SelectColor;
     radius?: SelectRadius;
 }
-declare function SelectMenuFilter<TFilters extends Record<string, unknown> = Record<string, unknown>>({ filters, values, onChange, onReset, layout, gridCols, showReset, resetText, color, radius, }: SelectMenuFilterProps<TFilters>): react_jsx_runtime.JSX.Element | null;
+declare function SelectMenuFilter<TFilters extends Record<string, unknown> = Record<string, unknown>>({ filters, values, onChange, onReset, showReset, resetText, color, radius, }: SelectMenuFilterProps<TFilters>): react_jsx_runtime.JSX.Element | null;
 
 interface SelectOptionProps<TData = unknown> {
     option: SelectOptionItem<TData>;
@@ -6541,6 +6558,14 @@ interface SelectOptionProps<TData = unknown> {
 }
 declare function SelectOption<TData = unknown>({ option, isSelected, isActive, size, color, radius, disabled, renderOption, onClick, onMouseEnter, ref, }: SelectOptionProps<TData>): react_jsx_runtime.JSX.Element;
 
+type UseAnimatedErrorOptions = {
+    exitDuration?: number;
+};
+declare function useAnimatedError(errorMessage: ReactNode, options?: UseAnimatedErrorOptions): {
+    displayedError: ReactNode;
+    isExiting: boolean;
+};
+
 /**
  * Custom hook to debounce a value by a given delay in milliseconds.
  *
@@ -6563,228 +6588,56 @@ declare function useDebouncedCallback<Args extends unknown[], R = void>(callback
     cancel: () => void;
 };
 
-type UploadImageShape = "rectangle" | "square";
-type UploadImageViewMode = "dropzone" | "card-grid" | "button";
-type UploadImageSize = "xs" | "sm" | "md" | "lg" | "xl";
-type UploadImageColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
-type UploadImageRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
-type UploadImageVariant = "outline" | "filled" | "ghost" | "other";
-interface UploadFileItem {
-    id: string;
-    name: string;
-    size?: number;
-    type?: string;
-    url?: string;
-    file?: File;
-    status?: "idle" | "uploading" | "success" | "error";
-    progress?: number;
-    errorMessage?: string;
-}
-interface UploadImageProps {
-    /**
-     * List or single file item managed by the component
-     */
-    value?: UploadFileItem[] | UploadFileItem | string[] | string;
-    /**
-     * Initial default value (uncontrolled)
-     */
-    defaultValue?: UploadFileItem[] | UploadFileItem | string[] | string;
-    /**
-     * Callback triggered when the file list changes
-     */
-    onChange?: (items: UploadFileItem[]) => void;
-    /**
-     * Callback triggered when a file item is removed
-     */
-    onRemove?: (item: UploadFileItem, index: number) => void;
-    /**
-     * Callback triggered when an image preview is requested
-     */
-    onPreview?: (item: UploadFileItem) => void;
-    /**
-     * Whether to allow multiple file uploads
-     * @default false
-     */
-    multiple?: boolean;
+interface UseFloatingTransitionOptions {
     /**
-     * Maximum number of allowed files
-     * @default 1 when multiple=false, unlimited when multiple=true
+     * Transition duration in milliseconds.
+     * Can be a number or an object with `open` and `close` durations.
+     * @default 150
      */
-    maxCount?: number;
+    duration?: number | {
+        open?: number;
+        close?: number;
+    };
     /**
-     * Maximum file size in bytes
-     * Example: 5 * 1024 * 1024 (5MB)
+     * Distance offset in pixels to translate from initially and when closing.
+     * @default 4
      */
-    maxSize?: number;
+    offset?: number;
     /**
-     * Accepted file MIME types or extensions
-     * @default "image/*"
+     * Scale factor when closed / unmounted.
+     * @default 0.96
      */
-    accept?: string;
+    scale?: number;
     /**
-     * Custom hook executed before upload to validate or transform file.
-     * Return `true` to proceed, `false` or error message string to reject.
+     * Whether transitions should animate. If false, duration is 0.
+     * @default true
      */
-    beforeUpload?: (file: File) => boolean | string | Promise<boolean | string>;
-    /**
-     * Display mode:
-     * - 'dropzone': Large drag and drop area with title and description
-     * - 'card-grid': Thumbnail card grid (picture wall)
-     * - 'button': Compact trigger button
-     * @default 'dropzone'
-     */
-    viewMode?: UploadImageViewMode;
-    /**
-     * Shape of the container
-     * @default 'rectangle' for dropzone, 'square' for card-grid
-     */
-    shape?: UploadImageShape;
-    /**
-     * 5 standard size levels (xs, sm, md, lg, xl)
-     * @default 'md'
-     */
-    size?: UploadImageSize;
-    /**
-     * Design System color theme (primary, secondary, neutral, error, success, warning, info)
-     * @default 'primary'
-     */
-    color?: UploadImageColor;
-    /**
-     * Visual variant (outline, filled, ghost, other)
-     * @default 'outline'
-     */
-    variant?: UploadImageVariant;
-    /**
-     * Corner radius
-     * @default based on size
-     */
-    radius?: UploadImageRadius;
-    /**
-     * Label text above the upload container
-     */
-    label?: ReactNode;
-    /**
-     * Helper or instruction text below the upload container
-     */
-    helperText?: ReactNode;
-    /**
-     * Error message to display
-     */
-    errorMessage?: ReactNode;
-    /**
-     * Whether the field is in an invalid/error state
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the component is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the component is in read-only mode
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Whether the component is in a loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Custom title text inside the Dropzone area
-     */
-    dropzoneTitle?: ReactNode;
-    /**
-     * Custom description text inside the Dropzone area
-     */
-    dropzoneDescription?: ReactNode;
-    /**
-     * Custom upload icon
-     */
-    icon?: ReactNode;
-    /**
-     * Text for button trigger when viewMode="button"
-     */
-    buttonText?: ReactNode;
-    /**
-     * Custom item renderer for the thumbnail list
-     */
-    renderItem?: (item: UploadFileItem, index: number, actions: {
-        remove: () => void;
-        preview: () => void;
-    }) => ReactNode;
-    /**
-     * Custom CSS class for outer container
-     */
-    className?: string;
-    /**
-     * Custom CSS class for Dropzone/Trigger area
-     */
-    dropzoneClassName?: string;
-    /**
-     * Custom CSS class for preview list
-     */
-    previewClassName?: string;
-    /**
-     * Accessible aria-label for the interactive area
-     */
-    ariaLabel?: string;
-}
-
-declare function UploadImage({ value, defaultValue, onChange, onRemove, onPreview, multiple, maxCount, maxSize, accept, beforeUpload, viewMode, shape, size, color, variant, radius, label, helperText, errorMessage, isInvalid: isInvalidProp, disabled, readOnly, isLoading, dropzoneTitle, dropzoneDescription, icon, buttonText, renderItem, className, dropzoneClassName, previewClassName, ariaLabel, }: UploadImageProps): react_jsx_runtime.JSX.Element;
-
-interface UploadImageDropzoneProps {
-    size?: UploadImageSize;
-    color?: UploadImageColor;
-    variant?: UploadImageVariant;
-    radius?: UploadImageRadius;
-    shape?: UploadImageShape;
-    disabled?: boolean;
-    readOnly?: boolean;
-    isLoading?: boolean;
-    isDragging?: boolean;
-    isInvalid?: boolean;
-    dropzoneTitle?: ReactNode;
-    dropzoneDescription?: ReactNode;
-    icon?: ReactNode;
-    onTriggerUpload: () => void;
-    className?: string;
-    describedById?: string;
-}
-declare function UploadImageDropzone({ size, color, variant, radius, shape, disabled, readOnly, isLoading, isDragging, isInvalid, dropzoneTitle, dropzoneDescription, icon, onTriggerUpload, className, describedById, }: UploadImageDropzoneProps): react_jsx_runtime.JSX.Element;
-
-interface UploadImageListProps {
-    items: UploadFileItem[];
-    size: UploadImageSize;
-    color?: UploadImageColor;
-    variant?: UploadImageVariant;
-    radius: UploadImageRadius;
-    disabled?: boolean;
-    readOnly?: boolean;
-    maxCount?: number;
-    onRemove: (item: UploadFileItem, index: number) => void;
-    onPreview: (item: UploadFileItem) => void;
-    onTriggerUpload: () => void;
-    renderItem?: (item: UploadFileItem, index: number, actions: {
-        remove: () => void;
-        preview: () => void;
-    }) => ReactNode;
-    showAddButton?: boolean;
-    className?: string;
-}
-declare function UploadImageList({ items, size, radius, disabled, readOnly, maxCount, onRemove, onPreview, onTriggerUpload, renderItem, showAddButton, className, }: UploadImageListProps): react_jsx_runtime.JSX.Element;
-
-declare function formatBytes(bytes: number, decimals?: number): string;
-interface ValidateFileOptions {
-    maxSize?: number;
-    accept?: string;
+    animated?: boolean;
 }
-declare function validateFile(file: File, options?: ValidateFileOptions): {
-    isValid: boolean;
-    error?: string;
+declare function useFloatingTransition(context: FloatingContext, options?: UseFloatingTransitionOptions): {
+    isMounted: boolean;
+    styles: React.CSSProperties;
 };
-declare function createFileItem(file: File, url?: string): UploadFileItem;
-declare function revokeFileItem(item: UploadFileItem): void;
+
+/**
+ * Lấy cấu hình tương ứng theo `key` từ đối tượng `configMap` (sizeConfig, radiusConfig, variantConfig, colorConfig...),
+ * nếu `key` không hợp lệ hoặc không tồn tại trong `configMap`, sẽ trả về giá trị an toàn của `fallbackKey`.
+ *
+ * @param key - Khóa được truyền vào (size, radius, variant... có thể undefined, null hoặc chuỗi bất kỳ)
+ * @param configMap - Đối tượng ánh xạ cấu hình
+ * @param fallbackKey - Khóa dự phòng khi không tìm thấy (fallback an toàn)
+ * @returns Cấu hình tương ứng của khóa đó
+ */
+declare function getSafeConfig<TConfig, TKey extends PropertyKey = string>(key: TKey | undefined | null, configMap: Record<TKey, TConfig>, fallbackKey: TKey): TConfig;
+/**
+ * Lọc và xếp hạng danh sách phần tử theo từ khóa tìm kiếm (Fuzzy Search qua @tanstack/match-sorter-utils).
+ *
+ * @param items - Danh sách các phần tử cần lọc
+ * @param query - Từ khóa tìm kiếm
+ * @param fields - Một trường hoặc danh sách các trường (hoặc hàm accessor) để so khớp
+ * @returns Danh sách phần tử khớp, đã được sắp xếp theo độ tương quan cao nhất
+ */
+declare function rankAndFilterItems<T>(items: T[], query: string, fields?: (keyof T | string | ((item: T) => string | undefined | null))[] | (keyof T | string)): T[];
 
 /**
  * Các kích thước chiều rộng tiêu chuẩn của Modal:
@@ -7013,6 +6866,11 @@ interface ToolbarToolsConfig {
      * @default true
      */
     zoomOut?: boolean;
+    /**
+     * Cho phép hiển thị thanh trượt Slider điều chỉnh zoom
+     * @default true
+     */
+    zoomSlider?: boolean;
     /**
      * Cho phép hiển thị nút Reset tỉ lệ về 100% (1:1)
      * @default true
@@ -7042,6 +6900,29 @@ interface ImagePreviewToolbarProps {
      * Mức độ phóng to hiện tại của ảnh (ví dụ: 1 = 100%, 1.5 = 150%)
      */
     zoom: number;
+    /**
+     * Mức độ thu nhỏ tối thiểu (mặc định: 0.2 tức 20%)
+     * @default 0.2
+     */
+    minZoom?: number;
+    /**
+     * Mức độ phóng to tối đa (mặc định: 5 tức 500%)
+     * @default 5
+     */
+    maxZoom?: number;
+    /**
+     * Bước nhảy khi kéo thanh Slider
+     * @default 0.05
+     */
+    step?: number;
+    /**
+     * Callback khi giá trị zoom thay đổi qua thanh trượt Slider
+     */
+    onZoomChange?: (zoom: number) => void;
+    /**
+     * Tùy biến chi tiết các props truyền vào Slider component
+     */
+    sliderProps?: Partial<SliderProps>;
     /**
      * Góc xoay hiện tại của ảnh tính theo độ (0, 90, 180, 270)
      */
@@ -7163,7 +7044,7 @@ interface ServerFile {
 /**
  * Đối tượng File truyền vào xem trước (File đối tượng từ input hoặc ServerFile từ API)
  */
-type PreviewFile = File | ServerFile;
+type PreviewFile = File | ServerFile | string;
 /**
  * Props cho component `<FilePreview>` (Component xác định loại file và chọn component hiển thị tương ứng)
  */
@@ -7250,721 +7131,2379 @@ interface FileContainerProps {
     children?: ReactNode;
 }
 
-type UploadAvatarShape = "circle" | "square";
-type UploadAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
-type UploadAvatarColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
-type UploadAvatarRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
-type UploadAvatarVariant = "outline" | "filled" | "ghost" | "other";
-type UploadAvatarLabelPlacement = "top" | "left";
-interface UploadAvatarCropOptions {
+/**
+ * Hình dạng khung hiển thị hình ảnh
+ * - 'rectangle': Khung chữ nhật (mặc định cho Dropzone)
+ * - 'square': Khung vuông tỷ lệ 1:1 (mặc định cho Card Grid)
+ */
+type UploadImageShape = "rectangle" | "square";
+/**
+ * Chế độ hiển thị giao diện tải ảnh
+ * - 'dropzone': Khung kéo thả lớn với tiêu đề và mô tả trực quan
+ * - 'card-grid': Lưới thẻ ảnh dạng thumbnail (picture wall)
+ * - 'button': Nút bấm kích hoạt tải ảnh nhỏ gọn
+ */
+type UploadImageViewMode = "dropzone" | "card-grid" | "button";
+/**
+ * 5 mức kích thước chuẩn trong Design System
+ */
+type UploadImageSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Bảng màu chủ đề trong Design System
+ */
+type UploadImageColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
+/**
+ * Độ bo góc theo token hệ thống
+ */
+type UploadImageRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Biến thể kiểu dáng hiển thị
+ */
+type UploadImageVariant = "outline" | "filled" | "ghost" | "other";
+/**
+ * Kiểu căn chỉnh hiển thị hình ảnh trong khung chứa (CSS object-fit)
+ * - 'contain': Thu phóng giữ nguyên tỷ lệ sao cho toàn bộ hình ảnh nằm trọn trong khung
+ * - 'cover': Lấp đầy khung chứa (có thể bị cắt viền)
+ * - 'fill': Kéo dãn lấp đầy khung chứa
+ * - 'none': Giữ nguyên kích thước gốc của hình ảnh
+ * - 'scale-down': Chọn kích thước nhỏ hơn giữa 'none' và 'contain'
+ */
+type UploadImageObjectFit = "cover" | "contain" | "fill" | "none" | "scale-down";
+/**
+ * Trạng thái kéo thả tệp trên vùng Dropzone
+ * - 'idle': Trạng thái bình thường
+ * - 'active': Đang có tệp hợp lệ được kéo trên vùng Dropzone
+ * - 'reject': Tệp đang kéo bị từ chối do sai định dạng hoặc vượt quá dung lượng
+ */
+type UploadImageDragStatus = "idle" | "active" | "reject";
+/**
+ * Props cho component chính `<UploadImage>`
+ */
+interface UploadImageProps {
     /**
-     * Tỷ lệ khung hình khi cắt ảnh (mặc định 1 cho avatar 1:1)
-     * @default 1
+     * Danh sách hoặc một mục tệp hình ảnh được quản lý (Controlled mode)
      */
-    aspectRatio?: number;
+    value?: PreviewFile[] | PreviewFile | null;
     /**
-     * Hình dạng vùng cắt ảnh
-     * @default 'round' cho circle avatar, 'rect' cho square avatar
+     * Giá trị mặc định ban đầu khi dùng ở chế độ không kiểm soát (Uncontrolled mode)
      */
-    cropShape?: "round" | "rect";
+    defaultValue?: PreviewFile[] | PreviewFile | null;
     /**
-     * Hiển thị lưới căn chỉnh
-     * @default true
+     * Callback kích hoạt khi danh sách hình ảnh thay đổi (thêm mới, thay thế)
      */
-    showGrid?: boolean;
+    onChange?: (items: PreviewFile[]) => void;
     /**
-     * Tỷ lệ thu phóng tối thiểu
-     * @default 1
+     * Callback kích hoạt khi một hình ảnh bị xóa khỏi danh sách
      */
-    minZoom?: number;
+    onRemove?: (item: PreviewFile, index: number) => void;
     /**
-     * Tỷ lệ thu phóng tối đa
-     * @default 4
+     * Callback kích hoạt khi người dùng yêu cầu xem trước (phóng to) hình ảnh
      */
-    maxZoom?: number;
+    onPreview?: (item: PreviewFile) => void;
     /**
-     * Tiêu đề modal cắt ảnh
-     * @default "Cắt ảnh đại diện"
+     * Cho phép tải lên nhiều hình ảnh cùng lúc hay chỉ tải một ảnh
+     * @default false
      */
-    modalTitle?: string;
-}
-interface UploadAvatarProps {
+    multiple?: boolean;
     /**
-     * Ref chuyển tiếp đến thẻ input file ẩn (React 19)
+     * Giới hạn số lượng hình ảnh tối đa được phép tải lên
+     * @default 1 khi multiple=false, không giới hạn khi multiple=true
      */
-    ref?: Ref<HTMLInputElement>;
+    maxCount?: number;
     /**
-     * Kích cỡ của avatar:
-     * - 'xs': 48x48px (size-12)
-     * - 'sm': 64x64px (size-16)
-     * - 'md': 80x80px (size-20 - mặc định)
-     * - 'lg': 96x96px (size-24)
-     * - 'xl': 128x128px (size-32)
-     * @default 'md'
+     * Giới hạn dung lượng tối đa của mỗi tệp hình ảnh (tính theo bytes)
+     * Ví dụ: 5 * 1024 * 1024 tương đương 5MB
      */
-    size?: UploadAvatarSize;
+    maxSize?: number;
     /**
-     * Biến thể giao diện của avatar:
-     * - 'outline': viền nét quanh avatar (mặc định)
-     * - 'filled': nền pastel nhạt, có viền mờ
-     * - 'ghost': trong suốt, viền tối giản
-     * - 'other': không áp dụng style mặc định, tùy biến qua className
-     * @default 'outline'
+     * Các định dạng tệp được chấp nhận (chuỗi MIME/extension hoặc object Accept từ react-dropzone)
+     * @default "image/*"
      */
-    variant?: UploadAvatarVariant;
+    accept?: string | Accept;
     /**
-     * Chủ đề màu sắc
-     * @default 'primary'
+     * Hook xử lý trước khi tải tệp lên để xác thực hoặc chuyển đổi dữ liệu.
+     * Trả về `true` để tiếp tục, `false` hoặc chuỗi thông báo lỗi để từ chối tệp.
      */
-    color?: UploadAvatarColor;
+    beforeUpload?: (file: File) => boolean | string | Promise<boolean | string>;
     /**
-     * Hình dạng avatar: 'circle' (tròn) hoặc 'square' (vuông)
-     * @default 'circle'
+     * Chế độ hiển thị giao diện của component:
+     * - 'dropzone': Vùng kéo thả lớn với tiêu đề và mô tả
+     * - 'card-grid': Lưới thẻ ảnh thu nhỏ (picture wall)
+     * - 'button': Nút bấm kích hoạt tải ảnh nhỏ gọn
+     * @default 'dropzone'
      */
-    shape?: UploadAvatarShape;
+    viewMode?: UploadImageViewMode;
     /**
-     * Tùy chỉnh độ bo góc khi shape="square"
-     * @default theo từng size (xs: rounded, sm: rounded-md, md: rounded-lg, lg: rounded-xl, xl: rounded-2xl)
+     * Hình dạng của khung tải ảnh
+     * @default 'rectangle' cho dropzone, 'square' cho card-grid
      */
-    radius?: UploadAvatarRadius;
+    shape?: UploadImageShape;
     /**
-     * Giá trị ảnh avatar (PreviewFile = File | ServerFile hoặc chuỗi URL)
+     * Kiểu căn chỉnh hiển thị hình ảnh trong khung chứa (CSS object-fit)
+     * @default 'contain' cho dropzone 1 ảnh, 'cover' cho thumbnail danh sách
      */
-    value?: PreviewFile | string | null;
+    objectFit?: UploadImageObjectFit;
     /**
-     * Giá trị mặc định ban đầu khi khởi tạo (Uncontrolled)
+     * Kích cỡ của component (áp dụng cho dropzone, thumbnail, font chữ, icon)
+     * @default 'md'
      */
-    defaultValue?: PreviewFile | string | null;
+    size?: UploadImageSize;
     /**
-     * Callback khi ảnh avatar thay đổi (hoặc bị xóa với null)
+     * Bảng màu chủ đề trong Design System
+     * @default 'primary'
      */
-    onChange?: (item: PreviewFile | null) => void;
+    color?: UploadImageColor;
     /**
-     * Callback khi ảnh avatar bị xóa
+     * Biến thể kiểu dáng hiển thị của khung tải ảnh
+     * @default 'outline'
      */
-    onRemove?: (item: PreviewFile) => void;
+    variant?: UploadImageVariant;
     /**
-     * Callback khi mở xem trước ảnh phóng to (lightbox preview)
+     * Tùy chỉnh độ bo góc của các phần tử (khung dropzone, thumbnail, nút bấm)
+     * @default phụ thuộc vào prop size
      */
-    onPreview?: (item: PreviewFile) => void;
+    radius?: UploadImageRadius;
     /**
-     * Callback khi người dùng nhấn nút xóa nhanh nội dung
+     * Nhãn văn bản hiển thị phía trên component
      */
-    onClear?: () => void;
+    label?: ReactNode;
     /**
-     * Dung lượng file tối đa cho phép (bytes, ví dụ: 2 * 1024 * 1024 = 2MB)
+     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * màu đỏ cạnh nhãn)
+     * @default false
      */
-    maxSize?: number;
+    isRequired?: boolean;
     /**
-     * Định dạng MIME type hoặc phần mở rộng được chấp nhận
-     * @default "image/*"
+     * Lớp CSS tùy biến cho nhãn văn bản (label)
      */
-    accept?: string;
+    labelClassName?: string;
     /**
-     * Bật modal cắt xén ảnh (crop) trước khi áp dụng
-     * @default true
-     */
-    crop?: boolean | UploadAvatarCropOptions;
-    /**
-     * Nhãn hiển thị cho avatar
-     */
-    label?: ReactNode;
-    /**
-     * Vị trí đặt nhãn: 'top' | 'left'
-     * @default 'top'
-     */
-    labelPlacement?: UploadAvatarLabelPlacement;
-    /**
-     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * đỏ cạnh label)
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * Đoạn văn bản hướng dẫn/chú thích bên dưới avatar
+     * Văn bản hướng dẫn hoặc ghi chú phụ trợ hiển thị phía dưới component
      */
     helperText?: ReactNode;
     /**
-     * Thông báo lỗi hiển thị bên dưới avatar (khi có lỗi sẽ kích hoạt trạng thái báo lỗi và viền đỏ)
+     * Thông báo lỗi tùy chỉnh hiển thị khi trường không hợp lệ
      */
     errorMessage?: ReactNode;
     /**
-     * Trạng thái báo lỗi (viền đỏ, aria-invalid="true")
+     * Trạng thái báo lỗi cho trường nhập (hiển thị viền màu đỏ)
      * @default false
      */
     isInvalid?: boolean;
     /**
-     * Trạng thái đang tải (hiển thị spinner và vô hiệu hóa tương tác)
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Vô hiệu hóa toàn bộ tương tác
+     * Vô hiệu hóa toàn bộ tương tác tải ảnh và xóa ảnh
      * @default false
      */
     disabled?: boolean;
     /**
-     * Chế độ chỉ đọc
+     * Chế độ chỉ đọc (cho phép xem trước nhưng không cho phép tải thêm hoặc xóa ảnh)
      * @default false
      */
     readOnly?: boolean;
     /**
-     * Cho phép hiển thị nút xóa nhanh
+     * Trạng thái đang tải dữ liệu (hiển thị hiệu ứng xoay spinner và vô hiệu hóa tương tác)
      * @default false
      */
-    isClearable?: boolean;
-    /**
-     * Icon placeholder tùy biến khi chưa có ảnh
-     */
-    icon?: ReactNode;
+    isLoading?: boolean;
     /**
-     * Tên trường form input
+     * Tiêu đề chính tùy chỉnh bên trong khung Dropzone
+     * @default "Kéo thả hình ảnh vào đây, hoặc nhấn để duyệt file"
      */
-    name?: string;
+    dropzoneTitle?: ReactNode;
     /**
-     * ID phần tử input
+     * Mô tả phụ tùy chỉnh bên trong khung Dropzone
+     * @default "Hỗ trợ định dạng PNG, JPG, WEBP, GIF"
      */
-    id?: string;
+    dropzoneDescription?: ReactNode;
     /**
-     * Mở rộng chiếm toàn bộ chiều rộng 100% của container cha
-     * @default false
+     * Biểu tượng tùy chỉnh hiển thị ở vị trí icon trung tâm
      */
-    isFullWidth?: boolean;
+    icon?: ReactNode;
     /**
-     * Tùy biến className cho container bọc ngoài cùng (bao gồm label, avatar, helper/error text)
+     * Nhãn chữ của nút bấm khi viewMode="button"
+     * @default "Tải ảnh lên"
      */
-    className?: string;
+    buttonText?: ReactNode;
     /**
-     * Tùy biến className cho container bọc ngoài cùng (giống Input)
+     * Render prop tùy biến giao diện hiển thị cho từng mục hình ảnh trong danh sách
      */
-    wrapperClassName?: string;
+    renderItem?: (item: PreviewFile, index: number, actions: {
+        remove: () => void;
+        preview: () => void;
+    }) => ReactNode;
     /**
-     * Tùy biến className cho khung viền của riêng avatar
+     * Lớp CSS tùy biến cho container bao ngoài cùng của component
      */
-    avatarClassName?: string;
+    className?: string;
     /**
-     * Tùy biến className cho khung viền của riêng avatar (alias giống inputWrapperClassName)
+     * Lớp CSS tùy biến cho vùng Dropzone hoặc vùng kích hoạt
      */
-    avatarWrapperClassName?: string;
+    dropzoneClassName?: string;
     /**
-     * Tùy biến className cho phần tử <label>
+     * Lớp CSS tùy biến cho danh sách xem trước hình ảnh (UploadImageList)
      */
-    labelClassName?: string;
+    previewClassName?: string;
     /**
-     * Tùy biến className cho đoạn văn bản helperText hoặc errorMessage
+     * Lớp CSS tùy biến cho thông báo trợ giúp/báo lỗi (HelperErrorText)
      */
     helperClassName?: string;
-    /**
-     * Nhãn accessibility cho khu vực upload avatar
-     */
-    ariaLabel?: string;
-}
-
-declare function UploadAvatar({ size, variant, color, shape, radius, value, defaultValue, onChange, onRemove, onPreview, onClear, maxSize, accept, crop, label, labelPlacement, isRequired, helperText, errorMessage, isInvalid, isLoading, disabled, readOnly, isClearable, icon, name, id, isFullWidth, className, wrapperClassName, avatarClassName, avatarWrapperClassName, labelClassName, helperClassName, ariaLabel, ref, }: UploadAvatarProps): react_jsx_runtime.JSX.Element;
-
-interface UploadAvatarCropContentProps {
-    imageSrc: string;
-    fileName?: string;
-    fileType?: string;
-    aspectRatio?: number;
-    cropShape?: "round" | "rect";
-    showGrid?: boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    onApply: (croppedFile: File) => void;
-    onCancel?: () => void;
 }
-type UploadAvatarCropModalProps = UploadAvatarCropContentProps & {
-    open?: boolean;
-    modalTitle?: string;
-    onClose?: () => void;
-};
-declare function UploadAvatarCropContent({ imageSrc: initialImageSrc, fileName: initialFileName, fileType: initialFileType, aspectRatio, cropShape, showGrid, minZoom, maxZoom, onApply, onCancel, }: UploadAvatarCropContentProps): react_jsx_runtime.JSX.Element;
-declare function UploadAvatarCropModal({ open, modalTitle, onClose, onCancel, onApply, ...restProps }: UploadAvatarCropModalProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Các kích thước chiều rộng tiêu chuẩn của Confirm:
- * - 'xs': 320px (nhỏ gọn, dành cho thông báo ngắn)
- * - 'sm': 380px (dành cho câu hỏi xác nhận đơn giản)
- * - 'md': 440px (chuẩn mặc định cho đa số hộp thoại xác nhận)
- * - 'lg': 520px (dành cho thông báo cảnh báo chi tiết)
- * - 'xl': 600px (dành cho nội dung phức tạp hoặc danh sách)
- */
-type ConfirmSize = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * Các chủ đề màu sắc biểu thị mức độ quan trọng hoặc loại hành động của Confirm:
- * - 'warning': Cảnh báo hành động có rủi ro (vàng/cam)
- * - 'error': Hành động nguy hiểm / phá hủy / xóa dữ liệu (đỏ)
- * - 'primary': Hành động nghiệp vụ chính (xanh dương)
- * - 'secondary': Hành động phụ (nâu đồng)
- * - 'neutral': Thông báo trung tính (xám)
- * - 'success': Xác nhận hoàn thành hoặc kích hoạt thành công (xanh lá)
- * - 'info': Thông tin cần người dùng lưu ý (xanh lơ)
- */
-type ConfirmColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
-/**
- * Các mức bo góc của khung hộp thoại Confirm:
- * - 'none': Không bo góc (vuông vức)
- * - 'sm': Bo góc nhẹ (rounded-sm)
- * - 'md': Bo góc vừa (rounded-md)
- * - 'lg': Bo góc lớn (rounded-lg)
- * - 'xl': Bo góc rất lớn (rounded-xl)
- * - 'full': Bo tròn hoàn toàn (rounded-2xl)
- */
-type ConfirmRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
 /**
- * Props cho component `<Confirm>` (Khung giao diện hộp thoại xác nhận - Pure Compound Dialog Box)
+ * Props cho sub-component `<UploadImageDropzone>`
  */
-interface ConfirmProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Ref chuyển tiếp (forwardRef) trỏ trực tiếp đến thẻ div hộp thoại
-     */
-    ref?: Ref<HTMLDivElement>;
+interface UploadImageDropzoneProps {
     /**
-     * Kích thước chiều rộng của hộp thoại (được kế thừa tự động bởi ConfirmHeader, ConfirmBody, ConfirmFooter)
+     * Kích cỡ của khung Dropzone
      * @default 'md'
      */
-    size?: ConfirmSize;
+    size?: UploadImageSize;
     /**
-     * Chủ đề màu sắc cho hộp thoại (được kế thừa tự động bởi ConfirmHeader và ConfirmFooter)
-     * @default 'warning'
+     * Màu sắc chủ đề khi hover và kéo thả
+     * @default 'primary'
      */
-    color?: ConfirmColor;
+    color?: UploadImageColor;
     /**
-     * Tùy chỉnh độ bo góc của hộp thoại:
-     * - 'none': không bo góc
-     * - 'sm': bo góc nhỏ
-     * - 'md': bo góc vừa
-     * - 'lg': bo góc lớn
-     * - 'xl': bo góc rất lớn
-     * - 'full': bo tròn hoàn toàn
-     * @default 'rounded-lg'
+     * Biến thể kiểu dáng viền/nền của khung Dropzone
+     * @default 'outline'
      */
-    radius?: ConfirmRadius;
+    variant?: UploadImageVariant;
     /**
-     * Class tùy biến CSS cho container bao ngoài hộp thoại
+     * Tùy biến độ bo góc của khung Dropzone
+     * @default phụ thuộc vào size
      */
-    className?: string;
+    radius?: UploadImageRadius;
     /**
-     * Các sub-component con bên trong hộp thoại:
-     * `<ConfirmHeader>`, `<ConfirmBody>`, `<ConfirmFooter>`
+     * Hình dạng của khung Dropzone ('rectangle' hoặc 'square')
+     * @default 'rectangle'
      */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ConfirmHeader>` (Phần đầu của hộp thoại Confirm)
- */
-interface ConfirmHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    shape?: UploadImageShape;
     /**
-     * Kích thước áp dụng cho tiêu đề, icon và khoảng cách padding trong header
-     * @default 'md'
+     * Kiểu căn chỉnh hiển thị hình ảnh trong khung Dropzone (CSS object-fit)
+     * @default 'contain'
      */
-    size?: ConfirmSize;
+    objectFit?: UploadImageObjectFit;
     /**
-     * Chủ đề màu sắc cho icon badge
-     * @default 'warning'
+     * Vô hiệu hóa khung kéo thả và chọn tệp
+     * @default false
      */
-    color?: ConfirmColor;
+    disabled?: boolean;
     /**
-     * Icon hiển thị cạnh tiêu đề (`true`: icon mặc định theo màu, `false`: ẩn icon, `ReactNode`: icon tùy chỉnh)
-     * @default true
+     * Chế độ chỉ đọc, không cho phép kích hoạt chọn tệp mới
+     * @default false
      */
-    icon?: ReactNode | boolean;
+    readOnly?: boolean;
     /**
-     * Tiêu đề chính của hộp thoại Confirm
+     * Trạng thái đang tải tệp hoặc xử lý hình ảnh
+     * @default false
      */
-    title?: ReactNode;
+    isLoading?: boolean;
     /**
-     * Class CSS tùy biến cho container bao ngoài icon badge
+     * Trạng thái kéo thả tệp trên vùng Dropzone ('idle' | 'active' | 'reject')
+     * @default 'idle'
      */
-    iconClassName?: string;
+    dragStatus?: UploadImageDragStatus;
     /**
-     * Class CSS tùy biến cho tiêu đề
+     * Trạng thái hiển thị viền lỗi
+     * @default false
      */
-    titleClassName?: string;
+    isInvalid?: boolean;
     /**
-     * Cho phép hiển thị nút đóng (X) ở góc phải của header
-     * @default false
+     * Tiêu đề hiển thị bên trong khung Dropzone
      */
-    showCloseButton?: boolean;
+    dropzoneTitle?: ReactNode;
     /**
-     * Callback tùy biến khi click nút đóng (X).
-     * Tự động kết hợp hiệu ứng Exit Animation của ConfirmContainer.
+     * Mô tả phụ hiển thị bên trong khung Dropzone
      */
-    onClose?: () => void;
+    dropzoneDescription?: ReactNode;
     /**
-     * Class CSS tùy biến cho nút đóng (X)
+     * Biểu tượng tùy chỉnh trong khung Dropzone
      */
-    closeButtonClassName?: string;
+    icon?: ReactNode;
     /**
-     * Class CSS tùy biến cho toàn bộ header
+     * Mục hình ảnh đã tải lên để hiển thị trực tiếp trong khung khi ở chế độ 1 ảnh
      */
-    className?: string;
+    item?: PreviewFile | null;
     /**
-     * Nội dung ReactNode tùy chỉnh bên trong header
+     * Callback xóa ảnh khi nhấn nút Xóa ảnh ở góc trên bên phải
      */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ConfirmBody>` (Phần thân chứa nội dung mô tả của Confirm)
- */
-interface ConfirmBodyProps extends HTMLAttributes<HTMLDivElement> {
+    onRemove?: () => void;
     /**
-     * Kích thước áp dụng cho cỡ chữ và padding của body
-     * @default 'md'
+     * Callback mở lightbox xem trước khi nhấn vào thân hình ảnh
      */
-    size?: ConfirmSize;
+    onPreview?: () => void;
     /**
-     * Đoạn văn bản mô tả ngắn (sẽ được bọc trong thẻ `<p>`)
+     * Callback mở hộp thoại chọn tệp của trình duyệt (hoặc khi nhấn nút Thay đổi ảnh)
      */
-    description?: ReactNode;
+    onTriggerUpload?: () => void;
     /**
-     * Class CSS tùy biến riêng cho thẻ `<p>` mô tả
+     * Hàm gắn thuộc tính accessibility và sự kiện kéo thả từ react-dropzone
      */
-    descriptionClassName?: string;
+    getRootProps?: <T extends DropzoneRootProps>(props?: T) => T;
     /**
-     * Class CSS tùy biến cho toàn bộ body
+     * Lớp CSS tùy biến bổ sung cho khung Dropzone
      */
     className?: string;
     /**
-     * Nội dung con tùy biến bên trong body
+     * ID phần tử chứa văn bản hướng dẫn/mô tả hỗ trợ accessibility (aria-describedby)
      */
-    children?: ReactNode;
+    describedById?: string;
 }
 /**
- * Props cho component `<ConfirmFooter>` (Phần chân chứa các nút hành động xác nhận và hủy)
+ * Props cho sub-component `<UploadImageList>`
  */
-interface ConfirmFooterProps extends HTMLAttributes<HTMLDivElement> {
+interface UploadImageListProps {
     /**
-     * Kích thước áp dụng cho padding và kích thước các nút bấm
-     * @default 'md'
+     * Danh sách các mục hình ảnh cần hiển thị
      */
-    size?: ConfirmSize;
+    items: PreviewFile[];
     /**
-     * Nhãn văn bản cho nút Xác nhận
-     * @default 'Xác nhận'
+     * Kích cỡ của thumbnail hình ảnh
+     * @default 'md'
      */
-    confirmText?: ReactNode;
+    size: UploadImageSize;
     /**
-     * Nhãn văn bản cho nút Hủy (truyền `false` để ẩn nút Hủy)
-     * @default 'Hủy'
+     * Màu sắc chủ đề cho các nút thao tác
+     * @default 'primary'
      */
-    cancelText?: ReactNode | false;
+    color?: UploadImageColor;
     /**
-     * Biến thể của nút Xác nhận ('filled', 'outline', 'soft', ...)
-     * @default 'filled'
+     * Biến thể hiển thị
+     * @default 'outline'
      */
-    confirmVariant?: ButtonVariant;
+    variant?: UploadImageVariant;
     /**
-     * Biến thể của nút Hủy ('filled', 'outline', 'soft', ...)
-     * @default 'outline'
+     * Độ bo góc của từng thumbnail ảnh trong danh sách
      */
-    cancelVariant?: ButtonVariant;
+    radius: UploadImageRadius;
     /**
-     * Màu nút Xác nhận tùy chỉnh (mặc định lấy theo `color`)
+     * Kiểu căn chỉnh hiển thị hình ảnh trong thumbnail (CSS object-fit)
+     * @default 'cover'
      */
-    confirmColor?: ButtonColor;
+    objectFit?: UploadImageObjectFit;
     /**
-     * Màu nút Hủy
-     * @default 'secondary'
+     * Vô hiệu hóa các nút tương tác trong danh sách
+     * @default false
      */
-    cancelColor?: ButtonColor;
+    disabled?: boolean;
     /**
-     * Callback khi người dùng bấm nút Xác nhận (trả về void hoặc Promise)
+     * Chế độ chỉ đọc (ẩn nút xóa và nút thêm ảnh)
+     * @default false
      */
-    onConfirm?: () => void | Promise<unknown>;
+    readOnly?: boolean;
     /**
-     * Callback khi người dùng bấm nút Hủy
+     * Số lượng hình ảnh tối đa cho phép (dùng để ẩn nút thêm ảnh khi đã đạt giới hạn)
      */
-    onCancel?: () => void;
+    maxCount?: number;
     /**
-     * Callback đóng hộp thoại
+     * Callback khi nhấn nút xóa một mục hình ảnh
      */
-    onClose?: () => void;
+    onRemove: (item: PreviewFile, index: number) => void;
     /**
-     * Props bổ sung truyền trực tiếp cho component Button Xác nhận
+     * Callback khi nhấn nút xem trước một mục hình ảnh
      */
-    confirmButtonProps?: Partial<ButtonProps>;
+    onPreview: (item: PreviewFile) => void;
     /**
-     * Props bổ sung truyền trực tiếp cho component Button Hủy
+     * Callback mở hộp thoại tải ảnh khi nhấn nút thêm (+)
      */
-    cancelButtonProps?: Partial<ButtonProps>;
+    onTriggerUpload: () => void;
     /**
-     * Class CSS tùy biến cho khối footer
+     * Render prop tùy biến giao diện từng mục hình ảnh trong danh sách
+     */
+    renderItem?: (item: PreviewFile, index: number, actions: {
+        remove: () => void;
+        preview: () => void;
+    }) => ReactNode;
+    /**
+     * Cho phép hiển thị nút thêm (+) ở cuối danh sách hay không
+     * @default true
+     */
+    showAddButton?: boolean;
+    /**
+     * Lớp CSS tùy biến cho container danh sách
+     */
+    className?: string;
+}
+
+declare function UploadImage({ value, defaultValue, onChange, onRemove, onPreview, multiple, maxCount, maxSize, accept, beforeUpload, viewMode, shape, objectFit, size, color, variant, radius, label, isRequired, labelClassName, helperText, errorMessage, isInvalid: isInvalidProp, disabled, readOnly, isLoading, dropzoneTitle, dropzoneDescription, icon, buttonText, renderItem, className, dropzoneClassName, previewClassName, helperClassName, }: UploadImageProps): react_jsx_runtime.JSX.Element;
+
+declare function UploadImageDropzone({ size, color, variant, radius, shape, objectFit, disabled, readOnly, isLoading, dragStatus, isInvalid, dropzoneTitle, dropzoneDescription, icon, item, onRemove, onPreview, onTriggerUpload, getRootProps, className, describedById, }: UploadImageDropzoneProps): react_jsx_runtime.JSX.Element;
+
+declare function UploadImageList({ items, size, radius, objectFit, disabled, readOnly, maxCount, onRemove, onPreview, onTriggerUpload, renderItem, showAddButton, className, }: UploadImageListProps): react_jsx_runtime.JSX.Element;
+
+declare function formatBytes(bytes?: number, decimals?: number): string;
+
+type UploadAvatarShape = "circle" | "square";
+type UploadAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type UploadAvatarColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
+type UploadAvatarRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type UploadAvatarVariant = "outline" | "filled" | "ghost" | "other";
+type UploadAvatarLabelPlacement = "top" | "left";
+interface UploadAvatarCropOptions {
+    /**
+     * Tỷ lệ khung hình khi cắt ảnh (mặc định 1 cho avatar 1:1)
+     * @default 1
+     */
+    aspectRatio?: number;
+    /**
+     * Hình dạng vùng cắt ảnh
+     * @default 'round' cho circle avatar, 'rect' cho square avatar
+     */
+    cropShape?: "round" | "rect";
+    /**
+     * Hiển thị lưới căn chỉnh
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Tỷ lệ thu phóng tối thiểu
+     * @default 1
+     */
+    minZoom?: number;
+    /**
+     * Tỷ lệ thu phóng tối đa
+     * @default 4
+     */
+    maxZoom?: number;
+    /**
+     * Tiêu đề modal cắt ảnh
+     * @default "Cắt ảnh đại diện"
+     */
+    modalTitle?: string;
+}
+interface UploadAvatarConfig {
+    /**
+     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * đỏ cạnh label)
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trạng thái báo lỗi (viền đỏ, aria-invalid="true")
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải (vô hiệu hóa tương tác)
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Cho phép hiển thị nút xóa nhanh
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Mở rộng chiếm toàn bộ chiều rộng 100% của container cha
+     * @default false
+     */
+    isFullWidth?: boolean;
+}
+interface UploadAvatarProps {
+    /**
+     * Cấu hình tập trung các cờ trạng thái / tính năng
+     */
+    config?: UploadAvatarConfig;
+    /**
+     * Ref chuyển tiếp đến thẻ input file ẩn (React 19)
+     */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Kích cỡ của avatar:
+     * - 'xs': 48x48px (size-12)
+     * - 'sm': 64x64px (size-16)
+     * - 'md': 80x80px (size-20 - mặc định)
+     * - 'lg': 96x96px (size-24)
+     * - 'xl': 128x128px (size-32)
+     * @default 'md'
+     */
+    size?: UploadAvatarSize;
+    /**
+     * Biến thể giao diện của avatar:
+     * - 'outline': viền nét quanh avatar (mặc định)
+     * - 'filled': nền pastel nhạt, có viền mờ
+     * - 'ghost': trong suốt, viền tối giản
+     * - 'other': không áp dụng style mặc định, tùy biến qua className
+     * @default 'outline'
+     */
+    variant?: UploadAvatarVariant;
+    /**
+     * Chủ đề màu sắc
+     * @default 'primary'
+     */
+    color?: UploadAvatarColor;
+    /**
+     * Hình dạng avatar: 'circle' (tròn) hoặc 'square' (vuông)
+     * @default 'circle'
+     */
+    shape?: UploadAvatarShape;
+    /**
+     * Tùy chỉnh độ bo góc khi shape="square"
+     * @default theo từng size (xs: rounded, sm: rounded-md, md: rounded-lg, lg: rounded-xl, xl: rounded-2xl)
+     */
+    radius?: UploadAvatarRadius;
+    /**
+     * Giá trị ảnh avatar (PreviewFile = File | ServerFile hoặc chuỗi URL)
+     */
+    value?: PreviewFile | string | null;
+    /**
+     * Giá trị mặc định ban đầu khi khởi tạo (Uncontrolled)
+     */
+    defaultValue?: PreviewFile | string | null;
+    /**
+     * Callback khi ảnh avatar thay đổi (hoặc bị xóa với null)
+     */
+    onChange?: (item: PreviewFile | null) => void;
+    /**
+     * Callback khi ảnh avatar bị xóa
+     */
+    onRemove?: (item: PreviewFile) => void;
+    /**
+     * Callback khi mở xem trước ảnh phóng to (lightbox preview)
+     */
+    onPreview?: (item: PreviewFile) => void;
+    /**
+     * Callback khi người dùng nhấn nút xóa nhanh nội dung
+     */
+    onClear?: () => void;
+    /**
+     * Dung lượng file tối đa cho phép (bytes, ví dụ: 2 * 1024 * 1024 = 2MB)
+     */
+    maxSize?: number;
+    /**
+     * Định dạng MIME type hoặc phần mở rộng được chấp nhận (chuỗi hoặc đối tượng Accept từ react-dropzone)
+     * @default "image/*"
+     */
+    accept?: string | Accept;
+    /**
+     * Bật modal cắt xén ảnh (crop) trước khi áp dụng
+     * @default true
+     */
+    crop?: boolean | UploadAvatarCropOptions;
+    /**
+     * Nhãn hiển thị cho avatar
+     */
+    label?: ReactNode;
+    /**
+     * Vị trí đặt nhãn: 'top' | 'left'
+     * @default 'top'
+     */
+    labelPlacement?: UploadAvatarLabelPlacement;
+    /**
+     * Đoạn văn bản hướng dẫn/chú thích bên dưới avatar
+     */
+    helperText?: ReactNode;
+    /**
+     * Thông báo lỗi hiển thị bên dưới avatar (khi có lỗi sẽ kích hoạt trạng thái báo lỗi và viền đỏ)
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Vô hiệu hóa toàn bộ tương tác
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Chế độ chỉ đọc
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Icon placeholder tùy biến khi chưa có ảnh
+     */
+    icon?: ReactNode;
+    /**
+     * Tên trường form input
+     */
+    name?: string;
+    /**
+     * ID phần tử input
+     */
+    id?: string;
+    /**
+     * Tùy biến className cho container bọc ngoài cùng (bao gồm label, avatar, helper/error text)
+     */
+    className?: string;
+    /**
+     * Tùy biến className cho container bọc ngoài cùng (giống Input)
+     */
+    wrapperClassName?: string;
+    /**
+     * Tùy biến className cho khung viền của riêng avatar
+     */
+    avatarClassName?: string;
+    /**
+     * Tùy biến className cho khung viền của riêng avatar (alias giống inputWrapperClassName)
+     */
+    avatarWrapperClassName?: string;
+    /**
+     * Tùy biến className cho phần tử <label>
+     */
+    labelClassName?: string;
+    /**
+     * Tùy biến className cho đoạn văn bản helperText hoặc errorMessage
+     */
+    helperClassName?: string;
+    /**
+     * Nhãn accessibility cho khu vực upload avatar
+     */
+    ariaLabel?: string;
+}
+
+declare function UploadAvatar({ size, variant, color, shape, radius, value, defaultValue, onChange, onRemove, onPreview, onClear, maxSize, accept, crop, label, labelPlacement, config, helperText, errorMessage, disabled, readOnly, icon, name, id, className, wrapperClassName, avatarClassName, avatarWrapperClassName, labelClassName, helperClassName, ref, }: UploadAvatarProps): react_jsx_runtime.JSX.Element;
+
+interface UploadAvatarCropContentProps {
+    imageSrc?: string;
+    file?: File | null;
+    fileName?: string;
+    fileType?: string;
+    aspectRatio?: number;
+    cropShape?: "round" | "rect";
+    showGrid?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    onApply: (croppedFile: File) => void;
+    onCancel?: () => void;
+}
+type UploadAvatarCropModalProps = UploadAvatarCropContentProps & {
+    open?: boolean;
+    modalTitle?: string;
+    onClose?: () => void;
+};
+declare function UploadAvatarCropContent({ imageSrc: initialImageSrc, file, fileName: initialFileName, fileType: initialFileType, aspectRatio, cropShape, showGrid, minZoom, maxZoom, onApply, onCancel, }: UploadAvatarCropContentProps): react_jsx_runtime.JSX.Element;
+declare function UploadAvatarCropModal({ open, modalTitle, onClose, onCancel, onApply, ...restProps }: UploadAvatarCropModalProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hình dạng khung hiển thị tệp tin
+ * - 'rectangle': Khung chữ nhật (mặc định cho Dropzone)
+ * - 'square': Khung vuông tỷ lệ 1:1
+ */
+type UploadFileShape = "rectangle" | "square";
+/**
+ * Chế độ hiển thị giao diện tải tệp tin
+ * - 'dropzone': Khung kéo thả lớn kèm tiêu đề và mô tả trực quan
+ * - 'button': Nút bấm kích hoạt tải tệp gọn gàng
+ * - 'compact': Khung kéo thả thu nhỏ dạng thanh ngang
+ */
+type UploadFileViewMode = "dropzone" | "button" | "compact";
+/**
+ * Kiểu hiển thị danh sách tệp tin
+ * - 'list': Danh sách dạng hàng ngang chi tiết (tên, icon, dung lượng, hành động)
+ * - 'grid': Dạng thẻ card gọn gàng bố cục lưới
+ */
+type UploadFileListType = "list" | "grid";
+/**
+ * 5 mức kích thước chuẩn trong Design System
+ */
+type UploadFileSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Bảng màu chủ đề trong Design System
+ */
+type UploadFileColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
+/**
+ * Độ bo góc theo token hệ thống
+ */
+type UploadFileRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Biến thể kiểu dáng hiển thị
+ */
+type UploadFileVariant = "outline" | "filled" | "ghost" | "other";
+/**
+ * Trạng thái kéo thả tệp trên vùng Dropzone
+ * - 'idle': Trạng thái bình thường
+ * - 'active': Đang có tệp hợp lệ được kéo trên vùng Dropzone
+ * - 'reject': Tệp đang kéo bị từ chối do sai định dạng hoặc vượt quá dung lượng
+ */
+type UploadFileDragStatus = "idle" | "active" | "reject";
+/**
+ * Phân loại định dạng tệp tin cho icon và màu sắc huy hiệu
+ */
+type FileCategory = "pdf" | "word" | "excel" | "powerpoint" | "archive" | "text" | "image" | "audio" | "video" | "code" | "other";
+/**
+ * Props cho component `<FileIcon>`
+ */
+interface FileIconProps {
+    /**
+     * Đối tượng tệp tin (File, ServerFile, hoặc chuỗi src)
+     */
+    file?: PreviewFile;
+    /**
+     * Tên tệp hoặc phần mở rộng tệp cụ thể (tự động phân loại nếu không truyền file)
+     */
+    fileName?: string;
+    /**
+     * Chỉ định danh mục định dạng cụ thể (ghi đè tự động nhận diện)
+     */
+    category?: FileCategory;
+    /**
+     * Kích thước icon
+     * @default 'md'
+     */
+    size?: UploadFileSize | number;
+    /**
+     * Class tùy biến CSS
+     */
+    className?: string;
+}
+/**
+ * Props cho component hiển thị từng mục tệp tin `<UploadFileItemRow>`
+ */
+interface UploadFileItemRowProps {
+    /**
+     * Đối tượng tệp tin (PreviewFile: File | ServerFile | string)
+     */
+    item: PreviewFile;
+    /**
+     * Vị trí index trong danh sách
+     */
+    index: number;
+    /**
+     * Kiểu hiển thị danh sách
+     * @default 'list'
+     */
+    listType?: UploadFileListType;
+    /**
+     * Kích thước giao diện
+     * @default 'md'
+     */
+    size?: UploadFileSize;
+    /**
+     * Bo góc theo token
+     */
+    radius?: UploadFileRadius;
+    /**
+     * Màu chủ đề
+     */
+    color?: UploadFileColor;
+    /**
+     * Vô hiệu hóa tương tác
+     */
+    disabled?: boolean;
+    /**
+     * Chế độ chỉ đọc (không thể xóa)
+     */
+    readOnly?: boolean;
+    /**
+     * Hiển thị nút xem trước
+     * @default true
+     */
+    showPreviewButton?: boolean;
+    /**
+     * Hiển thị nút tải xuống
+     * @default true
+     */
+    showDownloadButton?: boolean;
+    /**
+     * Hiển thị nút xóa
+     * @default true
+     */
+    showRemoveButton?: boolean;
+    /**
+     * Callback khi người dùng xóa tệp
+     */
+    onRemove?: (item: PreviewFile, index: number) => void;
+    /**
+     * Callback khi người dùng xem trước tệp
+     */
+    onPreview?: (item: PreviewFile) => void;
+    /**
+     * Callback khi người dùng tải xuống tệp
+     */
+    onDownload?: (item: PreviewFile) => void;
+    /**
+     * Callback khi người dùng bấm thử lại tải lên (nếu có lỗi)
+     */
+    onRetry?: (item: PreviewFile, index: number) => void;
+    /**
+     * Hàm render tùy chỉnh cho từng mục tệp
+     */
+    renderItem?: (item: PreviewFile, index: number, actions: {
+        remove: () => void;
+        preview: () => void;
+        download: () => void;
+    }) => ReactNode;
+    /**
+     * Class tùy biến CSS
+     */
+    className?: string;
+}
+/**
+ * Props cho danh sách tệp tin `<UploadFileList>`
+ */
+interface UploadFileListProps {
+    /**
+     * Danh sách các tệp tin đã tải lên
+     */
+    items: PreviewFile[];
+    /**
+     * Kiểu hiển thị danh sách tệp tin
+     * @default 'list'
+     */
+    listType?: UploadFileListType;
+    /**
+     * Kích thước hiển thị
+     */
+    size: UploadFileSize;
+    /**
+     * Màu chủ đề
+     */
+    color?: UploadFileColor;
+    /**
+     * Biến thể hiển thị
+     */
+    variant?: UploadFileVariant;
+    /**
+     * Bo góc
+     */
+    radius: UploadFileRadius;
+    /**
+     * Trạng thái vô hiệu hóa
+     */
+    disabled?: boolean;
+    /**
+     * Trạng thái chỉ đọc
+     */
+    readOnly?: boolean;
+    /**
+     * Số lượng tệp tối đa
+     */
+    maxCount?: number;
+    /**
+     * Hiển thị nút xem trước
+     * @default true
+     */
+    showPreviewButton?: boolean;
+    /**
+     * Hiển thị nút tải xuống
+     * @default true
+     */
+    showDownloadButton?: boolean;
+    /**
+     * Hiển thị nút xóa
+     * @default true
+     */
+    showRemoveButton?: boolean;
+    /**
+     * Callback khi xóa tệp
+     */
+    onRemove: (item: PreviewFile, index: number) => void;
+    /**
+     * Callback khi xem trước tệp
+     */
+    onPreview: (item: PreviewFile) => void;
+    /**
+     * Callback khi tải xuống tệp
+     */
+    onDownload?: (item: PreviewFile) => void;
+    /**
+     * Callback khi thử lại tải lên
+     */
+    onRetry?: (item: PreviewFile, index: number) => void;
+    /**
+     * Hàm render tùy biến giao diện item
+     */
+    renderItem?: (item: PreviewFile, index: number, actions: {
+        remove: () => void;
+        preview: () => void;
+        download: () => void;
+    }) => ReactNode;
+    /**
+     * Class tùy biến CSS
+     */
+    className?: string;
+}
+/**
+ * Props cho vùng kéo thả `<UploadFileDropzone>`
+ */
+interface UploadFileDropzoneProps {
+    /**
+     * Kích thước giao diện
+     * @default 'md'
+     */
+    size?: UploadFileSize;
+    /**
+     * Bảng màu chủ đề
+     * @default 'primary'
+     */
+    color?: UploadFileColor;
+    /**
+     * Biến thể kiểu dáng
+     * @default 'outline'
+     */
+    variant?: UploadFileVariant;
+    /**
+     * Độ bo góc
+     */
+    radius?: UploadFileRadius;
+    /**
+     * Hình dạng khung dropzone ('rectangle' hoặc 'square')
+     * @default 'rectangle'
+     */
+    shape?: UploadFileShape;
+    /**
+     * Chế độ thu gọn dạng thanh ngang
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Trạng thái vô hiệu hóa
+     */
+    disabled?: boolean;
+    /**
+     * Trạng thái chỉ đọc
+     */
+    readOnly?: boolean;
+    /**
+     * Trạng thái đang tải / xử lý
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Trạng thái kéo thả tệp
+     */
+    dragStatus?: UploadFileDragStatus;
+    /**
+     * Trạng thái không hợp lệ
+     */
+    isInvalid?: boolean;
+    /**
+     * Tiêu đề chính của vùng kéo thả
+     */
+    dropzoneTitle?: ReactNode;
+    /**
+     * Đoạn mô tả phụ trợ của vùng kéo thả
+     */
+    dropzoneDescription?: ReactNode;
+    /**
+     * Icon hiển thị ở trung tâm vùng kéo thả
+     */
+    icon?: ReactNode;
+    /**
+     * Hàm kích hoạt hộp thoại chọn tệp
+     */
+    onTriggerUpload?: () => void;
+    /**
+     * Props gốc từ useDropzone
+     */
+    getRootProps?: <T extends DropzoneRootProps>(props?: T) => T;
+    /**
+     * Class tùy biến CSS
+     */
+    className?: string;
+    /**
+     * ID phần tử mô tả lỗi/trợ giúp (A11y)
+     */
+    describedById?: string;
+}
+/**
+ * Cấu hình tập trung các cờ trạng thái / tính năng boolean cho `<UploadFile>`
+ */
+interface UploadFileConfig {
+    /**
+     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * màu đỏ cạnh nhãn)
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Đánh dấu trường đang trong trạng thái lỗi/không hợp lệ
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải dữ liệu hoặc đang upload
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Cho phép tải lên nhiều tệp tin cùng lúc
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Cho phép hiển thị danh sách các tệp tin đã tải lên bên dưới
+     * @default true
+     */
+    showFileList?: boolean;
+    /**
+     * Hiển thị nút xem trước trên từng tệp tin
+     * @default true
+     */
+    showPreviewButton?: boolean;
+    /**
+     * Hiển thị nút tải xuống trên từng tệp tin
+     * @default true
+     */
+    showDownloadButton?: boolean;
+    /**
+     * Hiển thị nút xóa trên từng tệp tin
+     * @default true
+     */
+    showRemoveButton?: boolean;
+}
+/**
+ * Props chính cho component `<UploadFile>`
+ */
+interface UploadFileProps {
+    /**
+     * Cấu hình tập trung các cờ trạng thái / tính năng boolean
+     */
+    config?: UploadFileConfig;
+    /**
+     * Danh sách hoặc một mục tệp tin được quản lý (Controlled mode)
+     */
+    value?: PreviewFile[] | PreviewFile | null;
+    /**
+     * Giá trị mặc định ban đầu khi dùng ở chế độ không kiểm soát (Uncontrolled mode)
+     */
+    defaultValue?: PreviewFile[] | PreviewFile | null;
+    /**
+     * Callback kích hoạt khi danh sách tệp tin thay đổi
+     */
+    onChange?: (items: PreviewFile[]) => void;
+    /**
+     * Callback kích hoạt khi một tệp tin bị xóa khỏi danh sách
+     */
+    onRemove?: (item: PreviewFile, index: number) => void;
+    /**
+     * Callback kích hoạt khi người dùng yêu cầu xem trước tệp tin
+     */
+    onPreview?: (item: PreviewFile) => void;
+    /**
+     * Callback kích hoạt khi người dùng bấm nút tải xuống tệp tin
+     */
+    onDownload?: (item: PreviewFile) => void;
+    /**
+     * Callback kích hoạt khi người dùng bấm thử lại tải lên (khi có lỗi)
+     */
+    onRetry?: (item: PreviewFile, index: number) => void;
+    /**
+     * Giới hạn số lượng tệp tin tối đa được phép tải lên
+     * @default 1 khi multiple=false, không giới hạn khi multiple=true
+     */
+    maxCount?: number;
+    /**
+     * Dung lượng tệp tối đa (tính theo bytes)
+     */
+    maxSize?: number;
+    /**
+     * Dung lượng tệp tối thiểu (tính theo bytes)
+     */
+    minSize?: number;
+    /**
+     * Định dạng tệp tin chấp nhận tải lên (chuỗi extension như ".pdf,.docx,.xlsx" hoặc MIME type)
+     */
+    accept?: string | Accept;
+    /**
+     * Hook xử lý hoặc xác thực tệp trước khi chấp nhận tải lên
+     * Trả về false hoặc chuỗi thông báo lỗi để từ chối tệp
+     */
+    beforeUpload?: (file: File) => boolean | string | Promise<boolean | string>;
+    /**
+     * Chế độ hiển thị giao diện tải tệp
+     * - 'dropzone': Khung kéo thả lớn kèm tiêu đề và mô tả
+     * - 'button': Nút bấm kích hoạt tải tệp
+     * - 'compact': Khung kéo thả dạng thanh ngang thu nhỏ
+     * @default 'dropzone'
+     */
+    viewMode?: UploadFileViewMode;
+    /**
+     * Kiểu hiển thị danh sách tệp tin
+     * - 'list': Dạng hàng ngang chi tiết
+     * - 'grid': Dạng thẻ card trên lưới
+     * @default 'list'
+     */
+    listType?: UploadFileListType;
+    /**
+     * Hình dạng của khung tải tệp ('rectangle' hoặc 'square')
+     * @default 'rectangle'
+     */
+    shape?: UploadFileShape;
+    /**
+     * 5 mức kích thước chuẩn trong Design System
+     * @default 'md'
+     */
+    size?: UploadFileSize;
+    /**
+     * Bảng màu chủ đề
+     * @default 'primary'
+     */
+    color?: UploadFileColor;
+    /**
+     * Biến thể kiểu dáng
+     * @default 'outline'
+     */
+    variant?: UploadFileVariant;
+    /**
+     * Độ bo góc theo token hệ thống
+     */
+    radius?: UploadFileRadius;
+    /**
+     * Tiêu đề nhãn của trường form
+     */
+    label?: ReactNode;
+    /**
+     * Lớp CSS tùy biến cho nhãn văn bản (label)
+     */
+    labelClassName?: string;
+    /**
+     * Đoạn văn bản trợ giúp hiển thị bên dưới
+     */
+    helperText?: ReactNode;
+    /**
+     * Thông báo lỗi hiển thị bên dưới trường khi không hợp lệ
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Vô hiệu hóa toàn bộ tương tác
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Trạng thái chỉ đọc (không thể thêm mới hoặc xóa tệp)
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Tiêu đề hiển thị trong khung Dropzone
+     */
+    dropzoneTitle?: ReactNode;
+    /**
+     * Mô tả phụ hiển thị trong khung Dropzone
+     */
+    dropzoneDescription?: ReactNode;
+    /**
+     * Nhãn văn bản hiển thị trên nút bấm khi viewMode='button'
+     * @default 'Tải tệp lên'
+     */
+    buttonText?: ReactNode;
+    /**
+     * Icon tùy biến cho vùng Dropzone
+     */
+    icon?: ReactNode;
+    /**
+     * Hàm render tùy biến hoàn toàn giao diện từng mục tệp tin trong danh sách
+     */
+    renderItem?: (item: PreviewFile, index: number, actions: {
+        remove: () => void;
+        preview: () => void;
+        download: () => void;
+    }) => ReactNode;
+    /**
+     * Class tùy biến CSS cho container ngoài cùng
+     */
+    className?: string;
+    /**
+     * Class tùy biến CSS cho khung Dropzone
+     */
+    dropzoneClassName?: string;
+    /**
+     * Class tùy biến CSS cho danh sách tệp tin
+     */
+    listClassName?: string;
+    /**
+     * Class tùy biến CSS cho danh sách xem trước (UploadFileList)
+     */
+    previewClassName?: string;
+    /**
+     * Class tùy biến CSS cho vùng Helper/Error Text
+     */
+    helperClassName?: string;
+}
+
+declare function UploadFile({ value, defaultValue, onChange, onRemove, onPreview, onDownload, onRetry, maxCount, maxSize, minSize, accept, beforeUpload, viewMode, listType, shape, size, color, variant, radius, label, labelClassName, helperText, errorMessage, disabled, readOnly, dropzoneTitle, dropzoneDescription, buttonText, icon, renderItem, className, dropzoneClassName, listClassName, previewClassName, helperClassName, config, }: UploadFileProps): react_jsx_runtime.JSX.Element;
+
+declare function UploadFileDropzone({ size, color, variant, radius, shape, compact, disabled, readOnly, isLoading, showSpinner, dragStatus, isInvalid, dropzoneTitle, dropzoneDescription, icon, onTriggerUpload, getRootProps, className, describedById, }: UploadFileDropzoneProps): react_jsx_runtime.JSX.Element;
+
+declare function UploadFileList({ items, listType, size, color, radius, disabled, readOnly, showPreviewButton, showDownloadButton, showRemoveButton, onRemove, onPreview, onDownload, onRetry, renderItem, className, }: UploadFileListProps): react_jsx_runtime.JSX.Element | null;
+
+declare function UploadFileItemRow({ item, index, listType, size, radius, disabled, readOnly, showPreviewButton, showDownloadButton, showRemoveButton, onRemove, onPreview, onDownload, onRetry, renderItem, className, }: UploadFileItemRowProps): react_jsx_runtime.JSX.Element;
+
+declare function FileIcon({ file, fileName, category: explicitCategory, size, className, }: FileIconProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Phân loại định dạng tệp tin dựa trên phần mở rộng hoặc MIME type
+ */
+declare function getFileCategory(itemOrName?: PreviewFile | string | null): FileCategory;
+
+/**
+ * Các kích thước chiều rộng tiêu chuẩn của Confirm:
+ * - 'xs': 320px (nhỏ gọn, dành cho thông báo ngắn)
+ * - 'sm': 380px (dành cho câu hỏi xác nhận đơn giản)
+ * - 'md': 440px (chuẩn mặc định cho đa số hộp thoại xác nhận)
+ * - 'lg': 520px (dành cho thông báo cảnh báo chi tiết)
+ * - 'xl': 600px (dành cho nội dung phức tạp hoặc danh sách)
+ */
+type ConfirmSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Các chủ đề màu sắc biểu thị mức độ quan trọng hoặc loại hành động của Confirm:
+ * - 'warning': Cảnh báo hành động có rủi ro (vàng/cam)
+ * - 'error': Hành động nguy hiểm / phá hủy / xóa dữ liệu (đỏ)
+ * - 'primary': Hành động nghiệp vụ chính (xanh dương)
+ * - 'secondary': Hành động phụ (nâu đồng)
+ * - 'neutral': Thông báo trung tính (xám)
+ * - 'success': Xác nhận hoàn thành hoặc kích hoạt thành công (xanh lá)
+ * - 'info': Thông tin cần người dùng lưu ý (xanh lơ)
+ */
+type ConfirmColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
+/**
+ * Các mức bo góc của khung hộp thoại Confirm:
+ * - 'none': Không bo góc (vuông vức)
+ * - 'sm': Bo góc nhẹ (rounded-sm)
+ * - 'md': Bo góc vừa (rounded-md)
+ * - 'lg': Bo góc lớn (rounded-lg)
+ * - 'xl': Bo góc rất lớn (rounded-xl)
+ * - 'full': Bo tròn hoàn toàn (rounded-2xl)
+ */
+type ConfirmRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Props cho component `<Confirm>` (Khung giao diện hộp thoại xác nhận - Pure Compound Dialog Box)
+ */
+interface ConfirmProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Ref chuyển tiếp (forwardRef) trỏ trực tiếp đến thẻ div hộp thoại
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Kích thước chiều rộng của hộp thoại (được kế thừa tự động bởi ConfirmHeader, ConfirmBody, ConfirmFooter)
+     * @default 'md'
+     */
+    size?: ConfirmSize;
+    /**
+     * Chủ đề màu sắc cho hộp thoại (được kế thừa tự động bởi ConfirmHeader và ConfirmFooter)
+     * @default 'warning'
+     */
+    color?: ConfirmColor;
+    /**
+     * Tùy chỉnh độ bo góc của hộp thoại:
+     * - 'none': không bo góc
+     * - 'sm': bo góc nhỏ
+     * - 'md': bo góc vừa
+     * - 'lg': bo góc lớn
+     * - 'xl': bo góc rất lớn
+     * - 'full': bo tròn hoàn toàn
+     * @default 'rounded-lg'
+     */
+    radius?: ConfirmRadius;
+    /**
+     * Class tùy biến CSS cho container bao ngoài hộp thoại
+     */
+    className?: string;
+    /**
+     * Các sub-component con bên trong hộp thoại:
+     * `<ConfirmHeader>`, `<ConfirmBody>`, `<ConfirmFooter>`
+     */
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ConfirmHeader>` (Phần đầu của hộp thoại Confirm)
+ */
+interface ConfirmHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Kích thước áp dụng cho tiêu đề, icon và khoảng cách padding trong header
+     * @default 'md'
+     */
+    size?: ConfirmSize;
+    /**
+     * Chủ đề màu sắc cho icon badge
+     * @default 'warning'
+     */
+    color?: ConfirmColor;
+    /**
+     * Icon hiển thị cạnh tiêu đề (`true`: icon mặc định theo màu, `false`: ẩn icon, `ReactNode`: icon tùy chỉnh)
+     * @default true
+     */
+    icon?: ReactNode | boolean;
+    /**
+     * Tiêu đề chính của hộp thoại Confirm
+     */
+    title?: ReactNode;
+    /**
+     * Class CSS tùy biến cho container bao ngoài icon badge
+     */
+    iconClassName?: string;
+    /**
+     * Class CSS tùy biến cho tiêu đề
+     */
+    titleClassName?: string;
+    /**
+     * Cho phép hiển thị nút đóng (X) ở góc phải của header
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback tùy biến khi click nút đóng (X).
+     * Tự động kết hợp hiệu ứng Exit Animation của ConfirmContainer.
+     */
+    onClose?: () => void;
+    /**
+     * Class CSS tùy biến cho nút đóng (X)
+     */
+    closeButtonClassName?: string;
+    /**
+     * Class CSS tùy biến cho toàn bộ header
+     */
+    className?: string;
+    /**
+     * Nội dung ReactNode tùy chỉnh bên trong header
+     */
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ConfirmBody>` (Phần thân chứa nội dung mô tả của Confirm)
+ */
+interface ConfirmBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Kích thước áp dụng cho cỡ chữ và padding của body
+     * @default 'md'
+     */
+    size?: ConfirmSize;
+    /**
+     * Đoạn văn bản mô tả ngắn (sẽ được bọc trong thẻ `<p>`)
+     */
+    description?: ReactNode;
+    /**
+     * Class CSS tùy biến riêng cho thẻ `<p>` mô tả
+     */
+    descriptionClassName?: string;
+    /**
+     * Class CSS tùy biến cho toàn bộ body
+     */
+    className?: string;
+    /**
+     * Nội dung con tùy biến bên trong body
+     */
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ConfirmFooter>` (Phần chân chứa các nút hành động xác nhận và hủy)
+ */
+interface ConfirmFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Kích thước áp dụng cho padding và kích thước các nút bấm
+     * @default 'md'
+     */
+    size?: ConfirmSize;
+    /**
+     * Nhãn văn bản cho nút Xác nhận
+     * @default 'Xác nhận'
+     */
+    confirmText?: ReactNode;
+    /**
+     * Nhãn văn bản cho nút Hủy (truyền `false` để ẩn nút Hủy)
+     * @default 'Hủy'
+     */
+    cancelText?: ReactNode | false;
+    /**
+     * Biến thể của nút Xác nhận ('filled', 'outline', 'soft', ...)
+     * @default 'filled'
+     */
+    confirmVariant?: ButtonVariant;
+    /**
+     * Biến thể của nút Hủy ('filled', 'outline', 'soft', ...)
+     * @default 'outline'
+     */
+    cancelVariant?: ButtonVariant;
+    /**
+     * Màu nút Xác nhận tùy chỉnh (mặc định lấy theo `color`)
+     */
+    confirmColor?: ButtonColor;
+    /**
+     * Màu nút Hủy
+     * @default 'secondary'
+     */
+    cancelColor?: ButtonColor;
+    /**
+     * Callback khi người dùng bấm nút Xác nhận (trả về void hoặc Promise)
+     */
+    onConfirm?: () => void | Promise<unknown>;
+    /**
+     * Callback khi người dùng bấm nút Hủy
+     */
+    onCancel?: () => void;
+    /**
+     * Callback đóng hộp thoại
+     */
+    onClose?: () => void;
+    /**
+     * Props bổ sung truyền trực tiếp cho component Button Xác nhận
+     */
+    confirmButtonProps?: Partial<ButtonProps>;
+    /**
+     * Props bổ sung truyền trực tiếp cho component Button Hủy
+     */
+    cancelButtonProps?: Partial<ButtonProps>;
+    /**
+     * Class CSS tùy biến cho khối footer
+     */
+    className?: string;
+    /**
+     * Các nút bấm tùy chỉnh bên trong footer (khi dùng Pure Compound Pattern)
+     */
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ConfirmContainer>` (Tầng Wrapper quản lý Overlay Backdrop, Native Dialog, ESC & Animation)
+ */
+interface ConfirmContainerProps extends HTMLAttributes<HTMLDialogElement> {
+    /**
+     * Trạng thái hiển thị mở/đóng Confirm (Controlled State)
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback được kích hoạt khi Confirm đóng (click ra ngoài backdrop, nhấn phím ESC, hoặc click nút đóng X)
+     */
+    onClose?: () => void;
+    /**
+     * Kích thước tổng thể của Confirm (truyền xuống context để đồng bộ kích thước cho Confirm, Header, Body, Footer)
+     * @default 'md'
+     */
+    size?: ConfirmSize;
+    /**
+     * Chủ đề màu sắc tổng thể của Confirm (truyền xuống context để đồng bộ cho Confirm, Header, Footer)
+     * @default 'warning'
+     */
+    color?: ConfirmColor;
+    /**
+     * Trạng thái đang tải / xử lý (Loading).
+     * Khi `isLoading = true`:
+     * - Chặn đóng Confirm khi click vào vùng backdrop overlay (`closeOnOverlayClick`)
+     * - Chặn đóng Confirm khi nhấn phím ESC (`closeOnEsc`)
+     * - Chặn đóng Confirm từ nút đóng (X) và component `<ConfirmClose>`
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Cho phép tự động đóng Confirm khi người dùng click vào vùng backdrop overlay bên ngoài
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Cho phép tự động đóng Confirm khi người dùng nhấn phím ESC (Escape) trên bàn phím
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Tự động khóa cuộn trang (body scroll lock) khi Confirm đang hiển thị
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Class tùy biến CSS cho lớp nền backdrop mờ toàn màn hình
+     */
+    overlayClassName?: string;
+    /**
+     * Class tùy biến CSS cho container bao ngoài dialog
+     */
+    className?: string;
+    /**
+     * Nội dung bên trong container (thường là component `<Confirm>`)
+     */
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ConfirmClose>` (Wrapper tự động kích hoạt đóng Confirm có Exit Animation cho bất kỳ nút bấm nào)
+ */
+interface ConfirmCloseProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Component con cần bọc để kích hoạt sự kiện đóng (thường là `<Button>`)
+     */
+    children?: ReactNode;
+    /**
+     * Tự động truyền thẳng sự kiện onClick và props vào phần tử con (cloneElement) thay vì bọc ngoài bằng thẻ div
+     * @default true
+     */
+    asChild?: boolean;
+}
+
+/**
+ * Khung giao diện hộp thoại xác nhận (Confirm Dialog Box).
+ * Thiết kế theo mô hình Pure Compound Pattern giống Modal:
+ * Nhận size/color từ ConfirmContainer qua Context và render {children}.
+ */
+declare function Confirm({ size, radius, className, children, ref, ...props }: ConfirmProps): react_jsx_runtime.JSX.Element;
+
+declare function ConfirmContainer({ open, size, color, isLoading, closeOnOverlayClick, closeOnEsc, lockScroll, overlayClassName, className, children, onClose, ...props }: ConfirmContainerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Phần đầu của hộp thoại Confirm (Hiển thị icon badge, tiêu đề và nút đóng X)
+ */
+declare function ConfirmHeader({ size, color, icon, title, iconClassName, titleClassName, showCloseButton, onClose, closeButtonClassName, className, children, ...props }: ConfirmHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Phần thân của hộp thoại Confirm (Hiển thị nội dung mô tả hoặc nội dung tùy biến)
+ */
+declare function ConfirmBody({ size, description, descriptionClassName, className, children, ...props }: ConfirmBodyProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Phần chân của hộp thoại Confirm (Chứa các nút hành động Xác nhận, Hủy, hoặc các nút tùy chỉnh)
+ */
+declare function ConfirmFooter({ size, confirmText, cancelText, confirmVariant, cancelVariant, confirmColor, cancelColor, onConfirm, onCancel, onClose, confirmButtonProps, cancelButtonProps, className, children, ...props }: ConfirmFooterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component wrapper kích hoạt đóng Confirm kèm hiệu ứng thoát (Exit Animation)
+ * Tự động vô hiệu hóa (`disabled`) khi `isLoading = true`.
+ */
+declare function ConfirmClose({ children, asChild, onClick, ...props }: ConfirmCloseProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Giá trị được chia sẻ từ `<ConfirmContainer>` và `<Confirm>` xuống các sub-component con thông qua Context
+ */
+interface ConfirmContextValue {
+    /**
+     * Callback kích hoạt đóng Confirm kèm hiệu ứng thoát (Exit Animation)
+     */
+    onClose: () => void;
+    /**
+     * Trạng thái đang tải / xử lý (Loading).
+     * Khi `true`, sẽ chặn đóng hộp thoại và tự động vô hiệu hóa các nút đóng / hủy.
+     */
+    isLoading?: boolean;
+    /**
+     * Kích thước chiều rộng của Confirm
+     */
+    size?: ConfirmSize;
+    /**
+     * Chủ đề màu sắc của Confirm
+     */
+    color?: ConfirmColor;
+}
+/**
+ * Hook truy xuất context của Confirm từ bên trong `<ConfirmContainer>` hoặc `<Confirm>`
+ */
+declare const useConfirmContext: () => ConfirmContextValue | null;
+
+declare function Modal({ size, radius, className, children, ref, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+
+declare function ModalContainer({ open, id, size, isLoading, closeOnOverlayClick, closeOnEsc, lockScroll, overlayClassName, className, children, onClose, ...props }: ModalContainerProps): react_jsx_runtime.JSX.Element | null;
+
+declare function ModalHeader({ size, title, description, titleClassName, descriptionClassName, showCloseButton, onClose, closeButtonClassName, className, children, ...props }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function ModalBody({ size, className, children, ...props }: ModalBodyProps): react_jsx_runtime.JSX.Element;
+
+declare function ModalFooter({ size, className, children, ...props }: ModalFooterProps): react_jsx_runtime.JSX.Element;
+
+declare function ModalClose({ children, asChild, onClick, ...props }: ModalCloseProps): react_jsx_runtime.JSX.Element;
+
+interface ModalContextValue {
+    onClose: () => void;
+    isLoading?: boolean;
+    size?: ModalSize;
+}
+declare const useModalContext: () => ModalContextValue | null;
+
+/**
+ * Component `<FilePreview>`: Nhận file và headerTitle qua useFileContext(),
+ * tự động xác định loại file và chọn component hiển thị tương ứng.
+ */
+declare function FilePreview({ onDownload, imageProps, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component `<FileContainer>`: Hộp thoại bọc Modal Dialog quản lý Backdrop, Top Layer, ESC và Lock Scroll
+ * Nhận prop `file` và truyền xuống `<FilePreview />` qua `FileContext`.
+ */
+declare function FileContainer({ open, onClose, file, title, description, size, radius, showCloseButton, closeOnOverlayClick, closeOnEsc, lockScroll, className, overlayClassName, children, }: FileContainerProps): react_jsx_runtime.JSX.Element;
+
+interface FileContextValue {
+    file?: PreviewFile;
+    headerTitle?: ReactNode;
+}
+declare const useFileContext: () => FileContextValue | null;
+
+declare const IMAGE_EXTENSIONS: string[];
+declare const PDF_EXTENSIONS: string[];
+declare const VIDEO_EXTENSIONS: string[];
+declare const AUDIO_EXTENSIONS: string[];
+declare const DOCUMENT_EXTENSIONS: string[];
+
+declare function getFileName(input?: PreviewFile | string | null): string;
+declare function getFileExtension(filenameOrSrc?: string): string;
+declare function getFileType(filenameOrSrc?: string): FileType;
+declare function normalizePreviewFile(input?: PreviewFile | null): {
+    file: File | undefined;
+    serverFile: ServerFile | undefined;
+    name: string;
+    type: FileType;
+};
+declare function downloadFile(src: string, filename?: string): void;
+
+declare function ImagePreview({ src, name, minZoom, maxZoom, showToolbar, toolbarProps, children, }: ImagePreviewProps): react_jsx_runtime.JSX.Element | null;
+
+declare function ImagePreviewToolbar({ zoom, minZoom, maxZoom, step, onZoomChange, sliderProps, onZoomIn, onZoomOut, onRotateCw, onRotateCcw, onFlipHorizontal, onReset, currentImage, tools, className, }: ImagePreviewToolbarProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonVariant = "pulse" | "wave" | "none";
+type SkeletonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type SkeletonShape = "rectangle" | "circle";
+type SkeletonObjectFit = "cover" | "contain" | "fill" | "none" | "scale-down";
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Ref trỏ tới phần tử div bên ngoài.
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Kiểu animation hiển thị:
+     * - 'pulse': nhịp thở opacity (mặc định)
+     * - 'wave': shimmer chạy từ góc trên-trái xuống góc dưới-phải
+     * - 'none': không animation (static placeholder)
+     * @default 'pulse'
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Hình dạng của skeleton:
+     * - 'rectangle': hình chữ nhật, kết hợp với `radius` để bo góc (mặc định)
+     * - 'circle': hình tròn hoàn toàn, `width` === `height`, bỏ qua `radius`
+     * @default 'rectangle'
+     */
+    shape?: SkeletonShape;
+    /**
+     * Độ bo góc, chỉ áp dụng khi `shape === 'rectangle'`
+     * @default 'md'
+     */
+    radius?: SkeletonRadius;
+    /**
+     * Chiều rộng (CSS string hoặc số px)
+     * @example "100%", "200px", 200
+     */
+    width?: string | number;
+    /**
+     * Chiều cao (CSS string hoặc số px)
+     * @example "1rem", "40px", 40
+     * @default "1rem"
+     */
+    height?: string | number;
+    /**
+     * Số lượng dòng skeleton xếp theo cột.
+     * Khi > 1, dòng cuối cùng sẽ tự động thu hẹp còn 60% width để mô phỏng đoạn văn tự nhiên.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Khoảng cách giữa các dòng khi `lines > 1` (CSS string hoặc số px)
+     * @default "0.5rem"
+     */
+    gap?: string | number;
+}
+interface LoadingImageProps extends Omit<ImageProps, "onLoad" | "onError" | "alt" | "src" | "onClick"> {
+    /**
+     * Đường dẫn ảnh, đối tượng File / Blob hoặc ServerFile ({ src/url, name, ... }). Tùy chọn khi chỉ hiển thị skeleton placeholder.
+     */
+    src?: ImageProps["src"] | File | Blob | ServerFile;
+    /**
+     * Văn bản thay thế cho ảnh. Mặc định là chuỗi rỗng.
+     * @default ""
+     */
+    alt?: string;
+    /**
+     * Kiểu animation của skeleton khi đang tải ảnh.
+     * @default 'pulse'
+     */
+    skeletonVariant?: SkeletonVariant;
+    /**
+     * Độ bo góc áp dụng đồng thời cho skeleton placeholder và ảnh.
+     * @default 'md'
+     */
+    radius?: SkeletonRadius;
+    /**
+     * Kiểu căn chỉnh hiển thị ảnh (object-fit).
+     * @default 'cover'
+     */
+    objectFit?: SkeletonObjectFit;
+    /**
+     * Bật tính năng click vào ảnh để xem trước phóng to qua FilePreview (trong FileContainer modal).
+     * @default true
+     */
+    preview?: boolean;
+    /**
+     * Class CSS tuỳ thêm cho wrapper bên ngoài.
+     */
+    wrapperClassName?: string;
+    /**
+     * Inline style tuỳ thêm cho wrapper bên ngoài.
+     */
+    wrapperStyle?: React.CSSProperties;
+    /**
+     * Callback khi người dùng click vào ảnh / wrapper.
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Callback được gọi khi ảnh tải thành công.
+     */
+    onLoad?: ImageProps["onLoad"];
+    /**
+     * Callback được gọi khi ảnh gặp lỗi tải.
+     */
+    onError?: ImageProps["onError"];
+    /**
+     * Ref trỏ tới phần tử wrapper div bên ngoài.
+     */
+    ref?: Ref<HTMLDivElement>;
+}
+
+declare function Skeleton({ ref, variant, shape, radius, width, height, lines, gap, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare function LoadingImage({ src, alt, width, height, fill, skeletonVariant, radius, objectFit, preview, className, wrapperClassName, style, wrapperStyle, onLoad, onError, onClick, ref, ...imageProps }: LoadingImageProps): react_jsx_runtime.JSX.Element;
+
+interface FuzzyFilterMeta {
+    itemRank?: RankingInfo;
+}
+type FuzzyFeatures = TableFeatures & {
+    filterMeta: FuzzyFilterMeta;
+};
+/**
+ * Thuật toán lọc Fuzzy (Fuzzy Filter) sử dụng `@tanstack/match-sorter-utils`.
+ *
+ * Tính năng:
+ * - Chuẩn hóa và so khớp gần đúng (Equal, StartsWith, WordStartsWith, Contains, Acronym, Matches)
+ * - Tự động loại bỏ dấu tiếng Việt / diacritics
+ * - Không phân biệt chữ hoa / chữ thường (Case-insensitive)
+ * - Đính kèm thông tin `RankingInfo` vào metadata qua `addMeta` để hỗ trợ sắp xếp theo độ liên quan
+ */
+declare const fuzzyFilter: FilterFn<FuzzyFeatures, RowData>;
+
+/**
+ * Bộ features tiêu chuẩn của @openway/ui dành cho TanStack Table v9.
+ * Bao gồm: Sắp xếp (Sorting), Phân trang (Pagination), Chọn dòng (Row Selection),
+ * Lọc cột & Lọc toàn bảng (Column & Global Filtering), Ẩn/hiện cột (Visibility),
+ * Ghim cột (Pinning), và Sắp xếp thứ tự cột (Column Ordering).
+ */
+declare const defaultTableFeatures: {
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    rowSelectionFeature: _tanstack_react_table.TableFeature;
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    columnVisibilityFeature: _tanstack_react_table.TableFeature;
+    columnPinningFeature: _tanstack_react_table.TableFeature;
+    columnOrderingFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filterFns: {
+        fuzzy: _tanstack_react_table.FilterFn<FuzzyFeatures, RowData>;
+    };
+};
+type DefaultTableFeatures = typeof defaultTableFeatures;
+/**
+ * Helper tạo định nghĩa cột (column definitions) có type-safety đầy đủ
+ * gắn liền với DefaultTableFeatures của TanStack Table v9.
+ */
+declare function createTableColumnHelper<TData extends RowData = RowData>(): ColumnHelper<DefaultTableFeatures, TData>;
+type UseDataTableOptions<TData extends RowData = RowData> = Omit<TableOptions<DefaultTableFeatures, TData>, "features" | "columns"> & {
+    features?: DefaultTableFeatures;
+    columns: TableOptions<DefaultTableFeatures, TData>["columns"] | ReturnType<ColumnHelper<DefaultTableFeatures, TData>["columns"]>;
+};
+/**
+ * Hook `useDataTable` bọc `useTable` của TanStack Table v9 với cấu hình
+ * tính năng mặc định tối ưu sẵn cho @openway/ui.
+ */
+declare function useDataTable<TData extends RowData = RowData>(options: UseDataTableOptions<TData>): ReactTable<DefaultTableFeatures, TData>;
+
+/**
+ * Kiểu trạng thái thứ tự các cột: danh sách ID của các cột
+ */
+type ColumnOrderState = string[];
+/**
+ * Kích cỡ hiển thị của Table:
+ * - 'sm': Nhỏ gọn (dense), padding hẹp (px-3 py-2), font chữ text-xs, phù hợp bảng nhiều dữ liệu hoặc màn hình nhỏ
+ * - 'md': Tiêu chuẩn (mặc định), padding cân đối (px-4 py-3), font chữ text-sm, phù hợp hầu hết giao diện quản trị
+ * - 'lg': Thoáng đãng, padding rộng (px-5 py-4), font chữ text-base, phù hợp bảng dữ liệu chính, báo cáo hoặc dashboard
+ */
+type TableSize = "sm" | "md" | "lg";
+/**
+ * Biến thể kiểu dáng giao diện của Table:
+ * - 'default': Bảng phẳng với đường kẻ phân cách viền mờ thanh lịch, nền header xám nhạt trung tính
+ * - 'striped': Bảng kẻ sọc xen kẽ (Zebra stripes), các dòng chẵn mang nền xám nhạt giúp tăng khả năng đọc lướt
+ * - 'bordered': Viền đầy đủ bao quanh từng ô và toàn bộ khung bao ngoài của bảng
+ */
+type TableVariant = "default" | "striped" | "bordered";
+/**
+ * Hướng căn lề nội dung của các ô trong Table:
+ * - 'left': Căn lề trái (mặc định cho văn bản, tên, mô tả, nội dung dài)
+ * - 'center': Căn giữa (phù hợp cho mã định danh ID, trạng thái, ngày tháng, checkbox)
+ * - 'right': Căn lề phải (chuẩn cho số tiền, số lượng, phần trăm, cột hành động thao tác)
+ */
+type TableAlign = "left" | "center" | "right";
+/**
+ * Thuộc tính của component bọc ngoài `<Table />` (`<table>`)
+ */
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /**
+     * Ref chuyển tiếp trực tiếp đến phần tử HTML table (React 19)
+     */
+    ref?: Ref<HTMLTableElement>;
+    /**
+     * Biến thể kiểu dáng hiển thị của bảng
+     * @default 'default'
+     */
+    variant?: TableVariant;
+    /**
+     * Kích cỡ hiển thị của bảng (khoảng đệm và kích thước chữ)
+     * @default 'md'
+     */
+    size?: TableSize;
+    /**
+     * Class tùy biến cho khung container bao ngoài thẻ table (khung xử lý cuộn ngang overflow-x-auto)
+     */
+    containerClassName?: string;
+    /**
+     * Props truyền bổ sung vào thẻ div wrapper bao ngoài
+     */
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Nội dung các phần tử bảng bên trong (TableHeader, TableBody, TableFooter, TableCaption...)
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của component phần đầu bảng `<TableHeader />` (`<thead>`)
+ */
+interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML thead
+     */
+    ref?: Ref<HTMLTableSectionElement>;
+    /**
+     * Nội dung dòng tiêu đề bên trong thẻ thead
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của component thân bảng `<TableBody />` (`<tbody>`)
+ */
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML tbody
+     */
+    ref?: Ref<HTMLTableSectionElement>;
+    /**
+     * Nội dung các dòng dữ liệu bên trong thẻ tbody
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của component chân bảng `<TableFooter />` (`<tfoot>`)
+ */
+interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML tfoot
+     */
+    ref?: Ref<HTMLTableSectionElement>;
+    /**
+     * Nội dung tổng kết hoặc thông tin thống kê ở chân bảng
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của component dòng `<TableRow />` (`<tr>`)
+ */
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML tr
+     */
+    ref?: Ref<HTMLTableRowElement>;
+    /**
+     * Đánh dấu dòng đang được chọn (áp dụng background highlight và thuộc tính aria-selected)
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Bật hiệu ứng đổi màu nền nhẹ khi rê chuột qua dòng
+     * @default true
+     */
+    isHoverable?: boolean;
+    /**
+     * Nội dung các ô dữ liệu bên trong dòng (TableCell hoặc TableHead)
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của ô tiêu đề `<TableHead />` (`<th>`)
+ */
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML th
+     */
+    ref?: Ref<HTMLTableCellElement>;
+    /**
+     * Hướng căn lề nội dung tiêu đề ('left', 'center', 'right')
+     * @default 'left'
+     */
+    align?: TableAlign;
+    /**
+     * Nội dung hiển thị bên trong ô tiêu đề
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của ô dữ liệu `<TableCell />` (`<td>`)
+ */
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML td
+     */
+    ref?: Ref<HTMLTableCellElement>;
+    /**
+     * Hướng căn lề nội dung ô ('left', 'center', 'right')
+     * @default 'left'
+     */
+    align?: TableAlign;
+    /**
+     * Nội dung hiển thị bên trong ô dữ liệu
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của chú thích bảng `<TableCaption />` (`<caption>`)
+ */
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /**
+     * Ref chuyển tiếp đến phần tử HTML caption
+     */
+    ref?: Ref<HTMLTableCaptionElement>;
+    /**
+     * Văn bản mô tả hoặc chú thích phụ bên dưới bảng
+     */
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của component tiêu đề cột tương tác sắp xếp `<TableColumnHeader />`
+ */
+interface TableColumnHeaderProps<TData extends RowData = RowData, TValue = unknown> extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Đối tượng cột TanStack Table v9
+     */
+    column: Column<DefaultTableFeatures, TData, TValue>;
+    /**
+     * Tên tiêu đề hiển thị của cột
+     */
+    title: string;
+}
+/**
+ * Thuộc tính của component tiêu đề cột hỗ trợ kéo thả sắp xếp `<DraggableTableHead />`
+ */
+interface DraggableTableHeadProps<TData extends RowData = RowData, TValue = unknown> {
+    /**
+     * Đối tượng Header TanStack Table v9 đại diện cho cột
+     */
+    header: Header<DefaultTableFeatures, TData, TValue>;
+    /**
+     * Cho phép sắp xếp dữ liệu cột khi click vào tiêu đề
+     */
+    canSort?: boolean;
+    /**
+     * Nội dung React hiển thị bên trong ô header
+     */
+    headerContent?: ReactNode;
+    /**
+     * Trạng thái sắp xếp WAI-ARIA ('ascending' | 'descending' | 'none')
+     */
+    ariaSort?: "ascending" | "descending" | "none";
+    /**
+     * Vô hiệu hóa tính năng kéo thả cho cột này (ví dụ cột Checkbox `_select`)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Class tùy biến cho phần tử `<th>`
+     */
+    className?: string;
+}
+/**
+ * Thuộc tính của thanh điều hướng phân trang `<TablePagination />`
+ */
+interface TablePaginationProps<TData extends RowData = RowData> {
+    /**
+     * Instance của bảng ReactTable từ hook TanStack Table v9 (`useDataTable` hoặc `useTable`)
+     */
+    table: ReactTable<DefaultTableFeatures, TData>;
+    /**
+     * Danh sách tùy chọn số dòng hiển thị trên mỗi trang trong dropdown
+     * @default [10, 20, 50, 100]
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Hiển thị dropdown lựa chọn số dòng trên mỗi trang
+     * @default true
+     */
+    showPageSizeSelector?: boolean;
+    /**
+     * Hiển thị ô nhảy nhanh đến trang chỉ định
+     * @default false
+     */
+    showPageJump?: boolean;
+    /**
+     * Class tùy biến cho thanh phân trang
      */
     className?: string;
+}
+/**
+ * Kiểu hiển thị của bộ lọc trong TableToolbar / DataTable (đồng nhất với SelectFilterType)
+ */
+type TableFilterType = "string" | "text" | "number" | "date" | "date-range" | "checkbox-group" | "select" | "custom";
+/**
+ * Tùy chọn dành cho bộ lọc dạng select / checkbox-group
+ */
+interface TableFilterOption {
+    label: ReactNode;
+    value: string | number | boolean;
+    disabled?: boolean;
+}
+/**
+ * Định nghĩa cấu hình bộ lọc cho DataTable / TableToolbar (đồng nhất với SelectFilterField)
+ */
+interface TableFilterDef<TValue = unknown> {
+    /**
+     * Tên định danh trường lọc (dùng làm key trong object filters, đồng nhất với SelectFilterField)
+     */
+    name: string;
+    /**
+     * Tên hiển thị của bộ lọc trên giao diện (ví dụ: "Trạng thái", "Ngày tạo")
+     */
+    label?: ReactNode;
+    /**
+     * Kiểu hiển thị bộ lọc: 'string' | 'text' | 'number' | 'date' | 'date-range' | 'checkbox-group' | 'select' | 'custom'
+     */
+    type: TableFilterType;
+    /**
+     * Danh sách options dành cho kiểu 'select' hoặc 'checkbox-group'
+     */
+    options?: TableFilterOption[];
+    /**
+     * Placeholder gợi ý trong editor
+     */
+    placeholder?: string;
+    /**
+     * Giá trị mặc định khi khởi tạo
+     */
+    defaultValue?: TValue;
+    /**
+     * Giá trị điều khiển
+     */
+    value?: TValue;
+    /**
+     * Thuộc tính tùy biến truyền bổ sung vào component editor (DateRangePicker, DatePicker, CheckboxGroup...)
+     */
+    props?: Record<string, unknown>;
+    /**
+     * Hàm render component tùy biến khi `type: 'custom'`
+     */
+    render?: (props: {
+        value: TValue;
+        onChange: (val: TValue) => void;
+    }) => ReactNode;
+}
+/**
+ * Thuộc tính của thanh công cụ bảng `<TableToolbar />`
+ */
+interface TableToolbarProps<TData extends RowData = RowData> {
+    /**
+     * Instance của bảng ReactTable từ hook TanStack Table v9
+     */
+    table: ReactTable<DefaultTableFeatures, TData>;
+    /**
+     * Placeholder gợi ý cho ô tìm kiếm toàn bảng
+     * @default 'Tìm kiếm trong bảng...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Bật ô tìm kiếm toàn bảng (Global Filter)
+     * @default true
+     */
+    enableGlobalFilter?: boolean;
+    /**
+     * Bật menu Popover cho phép người dùng ẩn/hiện từng cột
+     * @default true
+     */
+    enableColumnVisibility?: boolean;
+    /**
+     * Bật nút làm mới dữ liệu trên thanh công cụ (Refresh button)
+     * @default false
+     */
+    isRefresh?: boolean;
     /**
-     * Các nút bấm tùy chỉnh bên trong footer (khi dùng Pure Compound Pattern)
+     * Callback được gọi khi người dùng click vào nút làm mới trên thanh công cụ
      */
-    children?: ReactNode;
+    onRefresh?: () => void;
+    /**
+     * Các nút hành động tùy biến hiển thị ở góc phải thanh công cụ (ví dụ: Thêm mới, Bộ lọc nâng cao, Xuất file...)
+     */
+    actions?: ReactNode;
+    /**
+     * Hàm render các nút hành động hàng loạt khi có ít nhất 1 dòng được chọn (Bulk Actions)
+     */
+    selectedActions?: (selectedRows: Row<DefaultTableFeatures, TData>[]) => ReactNode;
+    /**
+     * Danh sách cấu hình các bộ lọc menu hiển thị trên thanh công cụ
+     */
+    filters?: TableFilterDef[];
+    /**
+     * Giá trị hiện tại của các bộ lọc: `{ [name]: value }`
+     */
+    filterValues?: Record<string, unknown>;
+    /**
+     * Callback khi một bộ lọc thay đổi giá trị
+     */
+    onFilterChange?: (name: string, value: unknown) => void;
+    /**
+     * Callback khi người dùng bấm "Đặt lại bộ lọc" (Reset all)
+     */
+    onFilterReset?: () => void;
+    /**
+     * Class tùy biến cho thanh công cụ
+     */
+    className?: string;
 }
 /**
- * Props cho component `<ConfirmContainer>` (Tầng Wrapper quản lý Overlay Backdrop, Native Dialog, ESC & Animation)
+ * Thuộc tính của component bảng hoàn chỉnh `<DataTable />`
+ * Tích hợp sẵn toàn bộ tính năng của TanStack Table v9.
  */
-interface ConfirmContainerProps extends HTMLAttributes<HTMLDialogElement> {
+interface DataTableProps<TData extends RowData = RowData> {
     /**
-     * Trạng thái hiển thị mở/đóng Confirm (Controlled State)
-     * @default false
+     * Danh sách định nghĩa các cột dữ liệu (sử dụng helper `createTableColumnHelper` để tạo)
      */
-    open?: boolean;
+    columns: ColumnDef<DefaultTableFeatures, TData, unknown>[] | ReturnType<ColumnHelper<DefaultTableFeatures, TData>["columns"]>;
     /**
-     * Callback được kích hoạt khi Confirm đóng (click ra ngoài backdrop, nhấn phím ESC, hoặc click nút đóng X)
+     * Mảng dữ liệu nguồn hiển thị trong bảng
      */
-    onClose?: () => void;
+    data: TData[];
     /**
-     * Kích thước tổng thể của Confirm (truyền xuống context để đồng bộ kích thước cho Confirm, Header, Body, Footer)
-     * @default 'md'
+     * Biến thể giao diện của bảng:
+     * - 'default': Viền ngang mờ thanh lịch
+     * - 'striped': Dòng xen kẽ màu (Zebra stripes)
+     * - 'bordered': Viền lưới đầy đủ bao quanh từng ô
+     * @default 'default'
      */
-    size?: ConfirmSize;
+    variant?: TableVariant;
     /**
-     * Chủ đề màu sắc tổng thể của Confirm (truyền xuống context để đồng bộ cho Confirm, Header, Footer)
-     * @default 'warning'
+     * Kích thước bảng ('sm' nhỏ gọn, 'md' chuẩn, 'lg' thoáng đãng)
+     * @default 'md'
      */
-    color?: ConfirmColor;
+    size?: TableSize;
     /**
-     * Trạng thái đang tải / xử lý (Loading).
-     * Khi `isLoading = true`:
-     * - Chặn đóng Confirm khi click vào vùng backdrop overlay (`closeOnOverlayClick`)
-     * - Chặn đóng Confirm khi nhấn phím ESC (`closeOnEsc`)
-     * - Chặn đóng Confirm từ nút đóng (X) và component `<ConfirmClose>`
+     * Trạng thái đang tải dữ liệu (tự động hiển thị các dòng Skeleton animation)
      * @default false
      */
     isLoading?: boolean;
     /**
-     * Cho phép tự động đóng Confirm khi người dùng click vào vùng backdrop overlay bên ngoài
+     * Bật nút làm mới dữ liệu trên thanh công cụ (Refresh button)
+     * @default false
+     */
+    isRefresh?: boolean;
+    /**
+     * Callback được gọi khi người dùng click vào nút làm mới trên thanh công cụ
+     */
+    onRefresh?: () => void;
+    /**
+     * Số dòng Skeleton hiển thị khi đang tải (`isLoading={true}`)
+     * @default 5
+     */
+    loadingRowsCount?: number;
+    /**
+     * Văn bản hiển thị khi bảng không có dữ liệu
+     * @default 'Không có dữ liệu hiển thị'
+     */
+    emptyText?: string;
+    /**
+     * Hình ảnh hoặc component minh họa tùy biến khi bảng không có dữ liệu (thay thế Empty mặc định)
+     */
+    emptyIllustration?: ReactNode;
+    /**
+     * Bật tính năng sắp xếp (Sorting) khi click vào tiêu đề cột
      * @default true
      */
-    closeOnOverlayClick?: boolean;
+    enableSorting?: boolean;
     /**
-     * Cho phép tự động đóng Confirm khi người dùng nhấn phím ESC (Escape) trên bàn phím
+     * Bật ô tìm kiếm toàn bảng (Global Filter) trên thanh công cụ
      * @default true
      */
-    closeOnEsc?: boolean;
+    enableFiltering?: boolean;
     /**
-     * Tự động khóa cuộn trang (body scroll lock) khi Confirm đang hiển thị
+     * Bật thanh phân trang (Pagination) ở chân bảng
      * @default true
      */
-    lockScroll?: boolean;
+    enablePagination?: boolean;
     /**
-     * Class tùy biến CSS cho lớp nền backdrop mờ toàn màn hình
+     * Bật tính năng chọn dòng (tự động chèn cột Checkbox chọn dòng và chọn tất cả)
+     * @default false
      */
-    overlayClassName?: string;
+    enableRowSelection?: boolean;
     /**
-     * Class tùy biến CSS cho container bao ngoài dialog
+     * Bật menu Popover cho phép người dùng chủ động ẩn/hiện từng cột
+     * @default true
      */
-    className?: string;
+    enableColumnVisibility?: boolean;
     /**
-     * Nội dung bên trong container (thường là component `<Confirm>`)
+     * Bật tính năng kéo thả thay đổi thứ tự các cột (Column Ordering / Dnd)
+     * @default false
      */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ConfirmClose>` (Wrapper tự động kích hoạt đóng Confirm có Exit Animation cho bất kỳ nút bấm nào)
- */
-interface ConfirmCloseProps extends HTMLAttributes<HTMLElement> {
+    enableColumnOrdering?: boolean;
     /**
-     * Component con cần bọc để kích hoạt sự kiện đóng (thường là `<Button>`)
+     * Văn bản gợi ý placeholder cho ô tìm kiếm
+     * @default 'Tìm kiếm trong bảng...'
      */
-    children?: ReactNode;
+    searchPlaceholder?: string;
     /**
-     * Tự động truyền thẳng sự kiện onClick và props vào phần tử con (cloneElement) thay vì bọc ngoài bằng thẻ div
-     * @default true
+     * Các nút hành động tùy biến đặt ở góc phải thanh công cụ (ví dụ: Nút thêm mới, Export...)
      */
-    asChild?: boolean;
-}
-
-/**
- * Khung giao diện hộp thoại xác nhận (Confirm Dialog Box).
- * Thiết kế theo mô hình Pure Compound Pattern giống Modal:
- * Nhận size/color từ ConfirmContainer qua Context và render {children}.
- */
-declare function Confirm({ size, radius, className, children, ref, ...props }: ConfirmProps): react_jsx_runtime.JSX.Element;
-
-declare function ConfirmContainer({ open, size, color, isLoading, closeOnOverlayClick, closeOnEsc, lockScroll, overlayClassName, className, children, onClose, ...props }: ConfirmContainerProps): react_jsx_runtime.JSX.Element | null;
-
-/**
- * Phần đầu của hộp thoại Confirm (Hiển thị icon badge, tiêu đề và nút đóng X)
- */
-declare function ConfirmHeader({ size, color, icon, title, iconClassName, titleClassName, showCloseButton, onClose, closeButtonClassName, className, children, ...props }: ConfirmHeaderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Phần thân của hộp thoại Confirm (Hiển thị nội dung mô tả hoặc nội dung tùy biến)
- */
-declare function ConfirmBody({ size, description, descriptionClassName, className, children, ...props }: ConfirmBodyProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Phần chân của hộp thoại Confirm (Chứa các nút hành động Xác nhận, Hủy, hoặc các nút tùy chỉnh)
- */
-declare function ConfirmFooter({ size, confirmText, cancelText, confirmVariant, cancelVariant, confirmColor, cancelColor, onConfirm, onCancel, onClose, confirmButtonProps, cancelButtonProps, className, children, ...props }: ConfirmFooterProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Component wrapper kích hoạt đóng Confirm kèm hiệu ứng thoát (Exit Animation)
- * Tự động vô hiệu hóa (`disabled`) khi `isLoading = true`.
- */
-declare function ConfirmClose({ children, asChild, onClick, ...props }: ConfirmCloseProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Giá trị được chia sẻ từ `<ConfirmContainer>` và `<Confirm>` xuống các sub-component con thông qua Context
- */
-interface ConfirmContextValue {
+    toolbarActions?: ReactNode;
     /**
-     * Callback kích hoạt đóng Confirm kèm hiệu ứng thoát (Exit Animation)
+     * Render các nút thao tác hàng loạt khi có dòng được chọn (ví dụ: Xóa, Đổi trạng thái, Xuất dữ liệu...)
      */
-    onClose: () => void;
+    renderBulkActions?: (selectedRows: Row<DefaultTableFeatures, TData>[]) => ReactNode;
     /**
-     * Trạng thái đang tải / xử lý (Loading).
-     * Khi `true`, sẽ chặn đóng hộp thoại và tự động vô hiệu hóa các nút đóng / hủy.
+     * Danh sách các tùy chọn số lượng dòng trên mỗi trang
+     * @default [10, 20, 50, 100]
      */
-    isLoading?: boolean;
+    pageSizeOptions?: number[];
     /**
-     * Kích thước chiều rộng của Confirm
+     * Số lượng dòng hiển thị mặc định mỗi trang khi khởi tạo
+     * @default 10
      */
-    size?: ConfirmSize;
+    initialPageSize?: number;
     /**
-     * Chủ đề màu sắc của Confirm
+     * Bật chế độ phân trang thủ công từ server (dữ liệu đã được cắt sẵn theo trang từ API)
+     * @default false
      */
-    color?: ConfirmColor;
-}
-/**
- * Hook truy xuất context của Confirm từ bên trong `<ConfirmContainer>` hoặc `<Confirm>`
- */
-declare const useConfirmContext: () => ConfirmContextValue | null;
-
-declare function Modal({ size, radius, className, children, ref, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
-
-declare function ModalContainer({ open, id, size, isLoading, closeOnOverlayClick, closeOnEsc, lockScroll, overlayClassName, className, children, onClose, ...props }: ModalContainerProps): react_jsx_runtime.JSX.Element | null;
-
-declare function ModalHeader({ size, title, description, titleClassName, descriptionClassName, showCloseButton, onClose, closeButtonClassName, className, children, ...props }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
-
-declare function ModalBody({ size, className, children, ...props }: ModalBodyProps): react_jsx_runtime.JSX.Element;
-
-declare function ModalFooter({ size, className, children, ...props }: ModalFooterProps): react_jsx_runtime.JSX.Element;
-
-declare function ModalClose({ children, asChild, onClick, ...props }: ModalCloseProps): react_jsx_runtime.JSX.Element;
-
-interface ModalContextValue {
-    onClose: () => void;
-    isLoading?: boolean;
-    size?: ModalSize;
-}
-declare const useModalContext: () => ModalContextValue | null;
-
-/**
- * Component `<FilePreview>`: Nhận file và headerTitle qua useFileContext(),
- * tự động xác định loại file và chọn component hiển thị tương ứng.
- */
-declare function FilePreview({ onDownload, imageProps, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Component `<FileContainer>`: Hộp thoại bọc Modal Dialog quản lý Backdrop, Top Layer, ESC và Lock Scroll
- * Nhận prop `file` và truyền xuống `<FilePreview />` qua `FileContext`.
- */
-declare function FileContainer({ open, onClose, file, title, description, size, radius, showCloseButton, closeOnOverlayClick, closeOnEsc, lockScroll, className, overlayClassName, children, }: FileContainerProps): react_jsx_runtime.JSX.Element;
-
-interface FileContextValue {
-    file?: PreviewFile;
-    headerTitle?: ReactNode;
-}
-declare const useFileContext: () => FileContextValue | null;
-
-declare const IMAGE_EXTENSIONS: string[];
-declare const PDF_EXTENSIONS: string[];
-declare const VIDEO_EXTENSIONS: string[];
-declare const AUDIO_EXTENSIONS: string[];
-declare const DOCUMENT_EXTENSIONS: string[];
-
-declare function getFileName(filenameOrSrc?: string): string;
-declare function getFileExtension(filenameOrSrc?: string): string;
-declare function getFileType(filenameOrSrc?: string): FileType;
-declare function normalizePreviewFile(input?: PreviewFile): {
-    file: File | undefined;
-    serverFile: ServerFile | undefined;
-    name: string;
-    type: FileType;
-};
-declare function downloadFile(src: string, filename?: string): void;
-
-declare function ImagePreview({ src, name, minZoom, maxZoom, showToolbar, toolbarProps, children, }: ImagePreviewProps): react_jsx_runtime.JSX.Element | null;
-
-declare function ImagePreviewToolbar({ zoom, onZoomIn, onZoomOut, onRotateCw, onRotateCcw, onFlipHorizontal, onReset, currentImage, tools, className, }: ImagePreviewToolbarProps): react_jsx_runtime.JSX.Element;
-
-type SkeletonVariant = "pulse" | "wave" | "none";
-type SkeletonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
-type SkeletonShape = "rectangle" | "circle";
-interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    manualPagination?: boolean;
     /**
-     * Kiểu animation hiển thị:
-     * - 'pulse': nhịp thở opacity (mặc định)
-     * - 'wave': shimmer chạy từ góc trên-trái xuống góc dưới-phải
-     * - 'none': không animation (static placeholder)
-     * @default 'pulse'
+     * Bật chế độ sắp xếp thủ công từ server (truyền tham số sort lên API)
+     * @default false
      */
-    variant?: SkeletonVariant;
+    manualSorting?: boolean;
     /**
-     * Hình dạng của skeleton:
-     * - 'rectangle': hình chữ nhật, kết hợp với `radius` để bo góc (mặc định)
-     * - 'circle': hình tròn hoàn toàn, `width` === `height`, bỏ qua `radius`
-     * @default 'rectangle'
+     * Bật chế độ tìm kiếm/lọc thủ công từ server (truyền từ khóa filter lên API)
+     * @default false
      */
-    shape?: SkeletonShape;
+    manualFiltering?: boolean;
     /**
-     * Độ bo góc, chỉ áp dụng khi `shape === 'rectangle'`
-     * @default 'md'
+     * Tổng số trang trả về từ máy chủ (bắt buộc khi dùng `manualPagination={true}`)
      */
-    radius?: SkeletonRadius;
+    pageCount?: number;
     /**
-     * Chiều rộng (CSS string hoặc số px)
-     * @example "100%", "200px", 200
+     * Tổng số lượng bản ghi thực tế từ máy chủ
      */
-    width?: string | number;
+    rowCount?: number;
     /**
-     * Chiều cao (CSS string hoặc số px)
-     * @example "1rem", "40px", 40
-     * @default "1rem"
+     * Trạng thái phân trang điều khiển ngoài: `{ pageIndex, pageSize }`
      */
-    height?: string | number;
+    pagination?: PaginationState;
     /**
-     * Số lượng dòng skeleton xếp theo cột.
-     * Khi > 1, dòng cuối cùng sẽ tự động thu hẹp còn 60% width để mô phỏng đoạn văn tự nhiên.
-     * @default 1
+     * Callback khi trạng thái phân trang thay đổi
      */
-    lines?: number;
+    onPaginationChange?: ((pagination: PaginationState) => void) | OnChangeFn<PaginationState>;
     /**
-     * Khoảng cách giữa các dòng khi `lines > 1` (CSS string hoặc số px)
-     * @default "0.5rem"
+     * Trạng thái sắp xếp điều khiển ngoài: `Array<{ id, desc }>`
      */
-    gap?: string | number;
-}
-interface LoadingImageProps extends Omit<ImageProps, "onLoad" | "onError"> {
+    sorting?: SortingState;
     /**
-     * Kiểu animation của skeleton khi đang tải ảnh.
-     * @default 'pulse'
+     * Callback khi trạng thái sắp xếp thay đổi
      */
-    skeletonVariant?: SkeletonVariant;
+    onSortingChange?: ((sorting: SortingState) => void) | OnChangeFn<SortingState>;
     /**
-     * Độ bo góc áp dụng đồng thời cho skeleton placeholder và ảnh.
-     * @default 'md'
+     * Trạng thái dòng được chọn điều khiển ngoài: `Record<rowId, boolean>`
      */
-    radius?: SkeletonRadius;
+    rowSelection?: RowSelectionState;
     /**
-     * Class CSS tuỳ thêm cho wrapper bên ngoài.
+     * Callback khi danh sách dòng được chọn thay đổi
      */
-    wrapperClassName?: string;
+    onRowSelectionChange?: ((selection: RowSelectionState) => void) | OnChangeFn<RowSelectionState>;
     /**
-     * Inline style tuỳ thêm cho wrapper bên ngoài.
+     * Trạng thái hiển thị cột điều khiển ngoài: `Record<columnId, boolean>`
      */
-    wrapperStyle?: react__default.CSSProperties;
+    columnVisibility?: ColumnVisibilityState;
     /**
-     * Callback được gọi khi ảnh tải thành công.
+     * Callback khi trạng thái hiển thị cột thay đổi
      */
-    onLoad?: ImageProps["onLoad"];
+    onColumnVisibilityChange?: ((visibility: ColumnVisibilityState) => void) | OnChangeFn<ColumnVisibilityState>;
     /**
-     * Callback được gọi khi ảnh gặp lỗi tải.
+     * Trạng thái thứ tự các cột điều khiển ngoài (mảng danh sách ID cột)
      */
-    onError?: ImageProps["onError"];
-}
+    columnOrder?: string[];
+    /**
+     * Callback khi thứ tự cột thay đổi
+     */
+    onColumnOrderChange?: ((order: string[]) => void) | OnChangeFn<string[]>;
+    /**
+     * Từ khóa tìm kiếm toàn bảng điều khiển ngoài
+     */
+    globalFilter?: string;
+    /**
+     * Callback khi từ khóa tìm kiếm toàn bảng thay đổi
+     */
+    onGlobalFilterChange?: (filter: string) => void;
+    /**
+     * Hàm hoặc tên bộ lọc toàn bảng tùy biến (FilterFn hoặc 'fuzzy').
+     * Mặc định DataTable sử dụng `fuzzyFilter` (Fuzzy Search từ @tanstack/match-sorter-utils).
+     */
+    globalFilterFn?: FilterFnOption<DefaultTableFeatures, TData>;
+    /**
+     * Danh sách cấu hình các bộ lọc menu hiển thị dạng SelectMenuFilter trên thanh công cụ
+     */
+    filters?: TableFilterDef[];
+    /**
+     * Trạng thái bộ lọc cột điều khiển ngoài (ColumnFiltersState của TanStack Table)
+     */
+    columnFilters?: ColumnFiltersState;
+    /**
+     * Callback khi trạng thái bộ lọc cột thay đổi (trả về mảng ColumnFiltersState của TanStack Table)
+     */
+    onColumnFiltersChange?: ((filters: ColumnFiltersState) => void) | OnChangeFn<ColumnFiltersState>;
+    /**
+     * Callback được kích hoạt khi người dùng click vào một dòng trong bảng
+     */
+    onRowClick?: (row: Row<DefaultTableFeatures, TData>) => void;
+    /**
+     * Class tùy biến cho phần tử bọc ngoài toàn bộ component (gồm toolbar + table + pagination)
+     */
+    className?: string;
+    /**
+     * Class tùy biến cho khung container bao quanh trực tiếp thẻ table
+     */
+    containerClassName?: string;
+}
+
+declare const tableVariantConfig: Record<TableVariant, {
+    container: string;
+    table: string;
+    head: string;
+    row: string;
+    cell: string;
+}>;
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+declare const DEFAULT_PAGE_SIZE = 10;
+
+interface TableContextValue {
+    size: TableSize;
+    variantStyles: (typeof tableVariantConfig)[TableVariant];
+}
+declare const useTableStyles: () => TableContextValue;
+declare function Table({ variant, size, className, containerClassName, wrapperProps, children, ref, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, children, ref, ...props }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children, ref, ...props }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableFooter({ className, children, ref, ...props }: TableFooterProps): react_jsx_runtime.JSX.Element;
+declare function TableRow({ isSelected, isHoverable, className, children, ref, ...props }: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ align, className, children, ref, ...props }: TableHeadProps & {
+    ref?: Ref<HTMLTableCellElement>;
+}): react_jsx_runtime.JSX.Element;
+declare function TableCell({ align, className, children, ref, ...props }: TableCellProps): react_jsx_runtime.JSX.Element;
+declare function TableCaption({ className, children, ref, ...props }: TableCaptionProps): react_jsx_runtime.JSX.Element;
+
+declare function TableColumnHeader<TData extends RowData = RowData, TValue = unknown>({ column, title, className, ...props }: TableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+declare function TablePagination<TData extends RowData = RowData>({ table, pageSizeOptions, showPageSizeSelector, className, }: TablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
 
-declare function Skeleton({ variant, shape, radius, width, height, lines, gap, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function TableToolbar<TData extends RowData = RowData>({ table, searchPlaceholder, enableGlobalFilter, enableColumnVisibility, isRefresh, onRefresh, actions, selectedActions, filters, filterValues, onFilterChange, onFilterReset, className, }: TableToolbarProps<TData>): react_jsx_runtime.JSX.Element;
 
-declare function LoadingImage({ src, alt, width, height, fill, skeletonVariant, radius, className, wrapperClassName, style, wrapperStyle, onLoad, onError, ...imageProps }: LoadingImageProps): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData extends RowData = RowData>({ columns, data, variant, size, isLoading, isRefresh, onRefresh, loadingRowsCount, emptyText, emptyIllustration, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableColumnVisibility, enableColumnOrdering, filters, searchPlaceholder, toolbarActions, renderBulkActions, pageSizeOptions, initialPageSize, manualPagination, manualSorting, manualFiltering, pageCount, rowCount, pagination: controlledPagination, onPaginationChange, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, onColumnOrderChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, globalFilterFn: controlledGlobalFilterFn, columnFilters: controlledColumnFilters, onColumnFiltersChange, onRowClick, className, containerClassName, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
-export { AUDIO_EXTENSIONS, Alert, AlertCircleIcon, type AlertColor, type AlertProps, type AlertRadius, type AlertSize, AlertTriangleIcon, type AlertVariant, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, type BaseSelectProps, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Calendar, type CalendarDay, CalendarHeader, type CalendarHeaderProps, CalendarIcon, type CalendarProps, type CalendarView, Carousel, type CarouselArrowPosition, CarouselContent, type CarouselContentProps, type CarouselContextValue, type CarouselNavigationProps, type CarouselNavigationVariant, CarouselNext, CarouselPagination, type CarouselPaginationProps, type CarouselPaginationType, CarouselPrevious, type CarouselProps, type CarouselRadius, type CarouselSize, CarouselSlide, type CarouselSlideProps, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxColor, CheckboxGroup, CheckboxGroupContext, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxLabelPlacement, type CheckboxProps, type CheckboxRadius, type CheckboxSize, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloseIcon, Collapse, type CollapseActiveKey, type CollapseColor, CollapseContent, type CollapseContentProps, type CollapseContextValue$1 as CollapseContextValue, type CollapseExpandIconPosition, CollapseHeader, type CollapseHeaderProps, CollapsePanel, type CollapsePanelContextValue$1 as CollapsePanelContextValue, type CollapsePanelProps, type CollapseProps, type CollapseRadius, type CollapseSize, type CollapseVariant, Collapsible, type CollapsibleProps, Confirm, ConfirmBody, type ConfirmBodyProps, ConfirmClose, type ConfirmCloseProps, type ConfirmColor, ConfirmContainer, type ConfirmContainerProps, ConfirmFooter, type ConfirmFooterProps, ConfirmHeader, type ConfirmHeaderProps, type ConfirmProps, type ConfirmRadius, type ConfirmSize, CropIcon, DEFAULT_TOAST_DURATION, DOCUMENT_EXTENSIONS, DatePicker, type DatePickerColor, type DatePickerConfig, type DatePickerProps, type DatePickerRadius, type DatePickerSize, type DatePickerVariant, type DateRange, DateRangeCalendar, type DateRangeCalendarDay, type DateRangeCalendarProps, DateRangeDayGrid, type DateRangeDayGridProps, DateRangeHeader, type DateRangeHeaderProps, DateRangeMonthGrid, type DateRangeMonthGridProps, DateRangePicker, type DateRangePickerColor, type DateRangePickerConfig, type DateRangePickerProps, type DateRangePickerRadius, type DateRangePickerSize, type DateRangePickerVariant, type DateRangeValue, DateRangeYearGrid, type DateRangeYearGridProps, DateTimePicker, type DateTimePickerColor, type DateTimePickerConfig, type DateTimePickerLayout, type DateTimePickerProps, type DateTimePickerRadius, type DateTimePickerSize, type DateTimePickerVariant, type DateTimeRange, DateTimeRangePicker, type DateTimeRangePickerColor, type DateTimeRangePickerConfig, type DateTimeRangePickerLayout, type DateTimeRangePickerProps, type DateTimeRangePickerRadius, type DateTimeRangePickerSize, type DateTimeRangePickerVariant, type DateTimeRangeValue, type DateTimeValue, type DateValue, DayGrid, type DayGridProps, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadIcon, Dropdown, type DropdownColor, type DropdownContextValue, DropdownGroup, type DropdownGroupProps, DropdownHeader, type DropdownHeaderProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownPlacement, type DropdownProps, type DropdownRadius, DropdownSeparator, type DropdownSeparatorProps, type DropdownSize, DropdownTrigger, type DropdownTriggerProps, type DropdownTriggerType, Empty, EmptyDefaultIcon, EmptyErrorIcon, EmptyFolderIcon, EmptyIllustration, type EmptyLayout, type EmptyPresetImage, type EmptyProps, EmptySearchIcon, EmptySimpleIcon, type EmptySize, EyeIcon, FileContainer, type FileContainerProps, FilePreview, type FilePreviewProps, type FileType, FlipHorizontalIcon, IMAGE_EXTENSIONS, IconButton, type IconButtonProps, ImageIcon, type ImageItem, ImagePreview, type ImagePreviewProps, ImagePreviewToolbar, type ImagePreviewToolbarProps, InfoCircleIcon, Input, type InputColor, type InputConfig, type InputProps, type InputRadius, type InputSize, type InputVariant, type LabelPlacement, LoadingImage, type LoadingImageProps, type LocaleConfig, MinusIcon, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContainer, type ModalContainerProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalRadius, type ModalSize, MonthGrid, type MonthGridProps, MultiInput, type MultiInputConfig, type MultiInputProps, type MultiSelectProps, NumberInput, type NumberInputProps, OtpInput, type OtpInputConfig, type OtpInputProps, type OtpInputRef, type OtpInputType, PDF_EXTENSIONS, PasswordInput, type PasswordInputProps, PlusIcon, Popover, PopoverBody, type PopoverBodyProps, PopoverClose, type PopoverCloseProps, type PopoverColor, PopoverContent, type PopoverContentProps, type PopoverContextValue, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type PopoverRadius, type PopoverSize, PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerType, type PreviewFile, Radio, type RadioColor, RadioDotIcon, RadioGroup, RadioGroupContext, type RadioGroupOrientation, type RadioGroupProps, type RadioLabelPlacement, type RadioProps, type RadioSize, type RadioVariant, ResetIcon, RotateCcwIcon, RotateCwIcon, SearchIcon, Select, type SelectColor, Select as SelectComponent, type SelectFilterField, type SelectFilterLayout, type SelectFilterType, SelectMenu, SelectMenuFilter, SelectOption, type SelectOptionItem, type SelectProps, type SelectRadius, type SelectSearchMode, type SelectSearchPlacement, type SelectSize, SelectTrigger, type SelectVariant, type ServerFile, type SingleSelectProps, Skeleton, type SkeletonProps, type SkeletonRadius, type SkeletonShape, type SkeletonVariant, Slider, type SliderColor, type SliderConfig, type SliderLabelPlacement, type SliderMark, SliderMarks, type SliderOrientation, type SliderProps, type SliderRadius, type SliderSize, SliderStepDots, SliderThumb, type SliderTooltipMode, type SliderTooltipPlacement, type SliderValue, type SliderVariant, Spinner, Tab, type TabColor, TabList, type TabListProps, type TabOrientation, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabPlacement, type TabProps, type TabRadius, type TabSize, type TabVariant, Tabs, TabsContext, type TabsProps, type TagRenderProps, TextArea, type TextAreaColor, type TextAreaConfig, type TextAreaLabelPlacement, type TextAreaProps, type TextAreaRadius, type TextAreaResize, type TextAreaSize, type TextAreaVariant, TimeColumn, type TimeColumnItem, type TimeColumnProps, type TimeObject, type TimePeriod, TimePicker, type TimePickerColor, type TimePickerConfig, type TimePickerProps, type TimePickerRadius, type TimePickerSize, type TimePickerVariant, type TimeRange, TimeRangePicker, type TimeRangePickerColor, type TimeRangePickerConfig, type TimeRangePickerProps, type TimeRangePickerRadius, type TimeRangePickerSize, type TimeRangePickerVariant, type TimeRangeValue, type TimeValue, TimeView, type TimeViewProps, type ToastMessageObject, type ToastMessageResult, type ToastOptions, type ToastPosition, type ToastPromiseFunction, type ToastPromiseOptions, Toaster, type ToasterProps, Toggle, type ToggleColor, type ToggleConfig, type ToggleLabelPlacement, type ToggleProps, type ToggleRadius, type ToggleSize, type ToggleVariant, type ToolbarToolsConfig, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, type TooltipRadius, type TooltipSize, type TooltipVariant, TrashIcon, UploadAvatar, type UploadAvatarColor, UploadAvatarCropContent, UploadAvatarCropModal, type UploadAvatarCropOptions, type UploadAvatarLabelPlacement, type UploadAvatarProps, type UploadAvatarRadius, type UploadAvatarShape, type UploadAvatarSize, type UploadAvatarVariant, type UploadFileItem, UploadIcon, UploadImage, type UploadImageColor, UploadImageDropzone, UploadImageList, type UploadImageProps, type UploadImageRadius, type UploadImageShape, type UploadImageSize, type UploadImageVariant, type UploadImageViewMode, VIDEO_EXTENSIONS, YearGrid, type YearGridProps, ZoomInIcon, ZoomOutIcon, checkIsDisabled, clamp, combineDateTime, createDateWithTime, createFileItem, downloadFile, formatBytes, formatDate, formatDateTime, formatNumberString, formatTime, generateCalendarGrid, generateRangeCalendarGrid, getDefaultDateTimeFormat, getDefaultFormat, getFileExtension, getFileName, getFileType, getISOWeekNumber, getPercentage, isDateAfter, isDateBefore, isSameDay, isSameMonth, isSameTime, isTimeAfter, isTimeBefore, isTimeInRange, isValidOtpChar, normalizePreviewFile, padZero, parseDate, parseDateTime, parseNumber, parseRawNumberString, parseTimeToDate, resolveLocale, revokeFileItem, sanitizeOtpString, splitTagsFromText, toDate, toDateTime, toTimeObject, toast, useCarousel, useCarouselContext, useCheckboxGroupContext, useCollapseContext, useCollapsePanelContext, useConfirmContext, useDebounce, useDebouncedCallback, useDropdownContext, useFileContext, useModalContext, usePopoverContext, useRadioGroupContext, useTabsContext, validateFile };
+export { AUDIO_EXTENSIONS, Alert, AlertCircleIcon, type AlertColor, type AlertProps, type AlertRadius, type AlertSize, AlertTriangleIcon, type AlertVariant, ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, AvatarIcon, type AvatarIconProps, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Calendar, type CalendarDay, CalendarHeader, type CalendarHeaderProps, CalendarIcon, type CalendarProps, type CalendarView, Carousel, type CarouselArrowPosition, CarouselContent, type CarouselContentProps, type CarouselContextValue, type CarouselNavigationProps, type CarouselNavigationVariant, CarouselNext, CarouselPagination, type CarouselPaginationProps, type CarouselPaginationType, CarouselPrevious, type CarouselProps, type CarouselRadius, type CarouselSize, CarouselSlide, type CarouselSlideProps, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxColor, type CheckboxConfig, CheckboxGroup, type CheckboxGroupConfig, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxLabelPlacement, type CheckboxOptionItem, type CheckboxProps, type CheckboxRadius, type CheckboxSearchMode, type CheckboxSize, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloseIcon, Collapse, type CollapseActiveKey, type CollapseColor, CollapseContent, type CollapseContentProps, type CollapseContextValue$1 as CollapseContextValue, type CollapseExpandIconPosition, CollapseHeader, type CollapseHeaderProps, CollapsePanel, type CollapsePanelContextValue$1 as CollapsePanelContextValue, type CollapsePanelProps, type CollapseProps, type CollapseRadius, type CollapseSize, type CollapseVariant, Collapsible, type CollapsibleProps, type ColumnOrderState, Confirm, ConfirmBody, type ConfirmBodyProps, ConfirmClose, type ConfirmCloseProps, type ConfirmColor, ConfirmContainer, type ConfirmContainerProps, ConfirmFooter, type ConfirmFooterProps, ConfirmHeader, type ConfirmHeaderProps, type ConfirmProps, type ConfirmRadius, type ConfirmSize, CropIcon, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_TOAST_DURATION, DOCUMENT_EXTENSIONS, DataTable, type DataTableProps, DatePicker, type DatePickerColor, type DatePickerConfig, type DatePickerProps, type DatePickerRadius, type DatePickerSize, type DatePickerVariant, type DateRange, DateRangeCalendar, type DateRangeCalendarDay, type DateRangeCalendarProps, DateRangeDayGrid, type DateRangeDayGridProps, DateRangeHeader, type DateRangeHeaderProps, DateRangeMonthGrid, type DateRangeMonthGridProps, DateRangePicker, type DateRangePickerColor, type DateRangePickerConfig, type DateRangePickerProps, type DateRangePickerRadius, type DateRangePickerSize, type DateRangePickerVariant, type DateRangeValue, DateRangeYearGrid, type DateRangeYearGridProps, DateTimePicker, type DateTimePickerColor, type DateTimePickerConfig, type DateTimePickerLayout, type DateTimePickerProps, type DateTimePickerRadius, type DateTimePickerSize, type DateTimePickerVariant, type DateTimeRange, DateTimeRangePicker, type DateTimeRangePickerColor, type DateTimeRangePickerConfig, type DateTimeRangePickerLayout, type DateTimeRangePickerProps, type DateTimeRangePickerRadius, type DateTimeRangePickerSize, type DateTimeRangePickerVariant, type DateTimeRangeValue, type DateTimeValue, type DateValue, DayGrid, type DayGridProps, type DefaultTableFeatures, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadIcon, type DraggableTableHeadProps, Dropdown, type DropdownColor, type DropdownContextValue, DropdownGroup, type DropdownGroupProps, DropdownHeader, type DropdownHeaderProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownPlacement, type DropdownProps, type DropdownRadius, DropdownSeparator, type DropdownSeparatorProps, type DropdownSize, DropdownTrigger, type DropdownTriggerProps, type DropdownTriggerType, Empty, EmptyDefaultIcon, EmptyErrorIcon, EmptyFolderIcon, EmptyIllustration, EmptyPresetImage, EmptyProps, EmptySearchIcon, EmptySimpleIcon, EyeIcon, type FileCategory, FileContainer, type FileContainerProps, FileIcon, type FileIconProps, FilePreview, type FilePreviewProps, type FileType, FlipHorizontalIcon, IMAGE_EXTENSIONS, IconButton, type IconButtonProps, ImageIcon, type ImageItem, ImagePreview, type ImagePreviewProps, ImagePreviewToolbar, type ImagePreviewToolbarProps, InfoCircleIcon, Input, type InputColor, type InputConfig, type InputProps, type InputRadius, type InputSize, type InputVariant, type LabelPlacement, LoadingImage, type LoadingImageProps, type LocaleConfig, MinusIcon, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalContainer, type ModalContainerProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalRadius, type ModalSize, MonthGrid, type MonthGridProps, MultiInput, type MultiInputConfig, type MultiInputProps, MultiSelect, MultiSelectProps, MultiSelectTrigger, NumberInput, type NumberInputProps, OtpInput, type OtpInputConfig, type OtpInputProps, type OtpInputRef, type OtpInputType, PDF_EXTENSIONS, PasswordInput, type PasswordInputProps, PlusIcon, Popover, PopoverBody, type PopoverBodyProps, PopoverClose, type PopoverCloseProps, type PopoverColor, PopoverContent, type PopoverContentProps, type PopoverContextValue, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type PopoverRadius, type PopoverSize, PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerType, type PreviewFile, Radio, type RadioColor, type RadioConfig, RadioDotIcon, RadioGroup, type RadioGroupConfig, type RadioGroupOrientation, type RadioGroupProps, type RadioLabelPlacement, type RadioOptionItem, type RadioProps, type RadioSearchMode, type RadioSize, type RadioVariant, ResetIcon, RotateCcwIcon, RotateCwIcon, SearchIcon, Select, SelectColor, Select as SelectComponent, SelectFilterField, SelectFilterLayout, SelectMenu, SelectMenuFilter, SelectOption, SelectOptionItem, SelectProps, SelectRadius, SelectSearchPlacement, SelectSize, SingleSelectTrigger as SelectTrigger, SelectVariant, type ServerFile, SingleSelectTrigger, Skeleton, type SkeletonObjectFit, type SkeletonProps, type SkeletonRadius, type SkeletonShape, type SkeletonVariant, Slider, type SliderColor, type SliderConfig, type SliderLabelPlacement, type SliderMark, SliderMarks, type SliderOrientation, type SliderProps, type SliderRadius, type SliderSize, SliderStepDots, SliderThumb, type SliderTooltipMode, type SliderTooltipPlacement, type SliderValue, type SliderVariant, SlidersHorizontalIcon, Spinner, Tab, type TabColor, TabList, type TabListProps, type TabOrientation, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabPlacement, type TabProps, type TabRadius, type TabSize, type TabVariant, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, type TableFilterDef, type TableFilterOption, type TableFilterType, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, type TableSize, TableToolbar, type TableToolbarProps, type TableVariant, Tabs, type TabsProps, type TagRenderProps, TextArea, type TextAreaColor, type TextAreaConfig, type TextAreaLabelPlacement, type TextAreaProps, type TextAreaRadius, type TextAreaResize, type TextAreaSize, type TextAreaVariant, TimeColumn, type TimeColumnItem, type TimeColumnProps, type TimeObject, type TimePeriod, TimePicker, type TimePickerColor, type TimePickerConfig, type TimePickerProps, type TimePickerRadius, type TimePickerSize, type TimePickerVariant, type TimeRange, TimeRangePicker, type TimeRangePickerColor, type TimeRangePickerConfig, type TimeRangePickerProps, type TimeRangePickerRadius, type TimeRangePickerSize, type TimeRangePickerVariant, type TimeRangeValue, type TimeValue, TimeView, type TimeViewProps, type ToastMessageObject, type ToastMessageResult, type ToastOptions, type ToastPosition, type ToastPromiseFunction, type ToastPromiseOptions, Toaster, type ToasterProps, Toggle, type ToggleColor, type ToggleConfig, type ToggleLabelPlacement, type ToggleProps, type ToggleRadius, type ToggleSize, type ToggleVariant, type ToolbarToolsConfig, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, type TooltipRadius, type TooltipSize, type TooltipVariant, TrashIcon, UploadAvatar, type UploadAvatarColor, type UploadAvatarConfig, UploadAvatarCropContent, UploadAvatarCropModal, type UploadAvatarCropOptions, type UploadAvatarLabelPlacement, type UploadAvatarProps, type UploadAvatarRadius, type UploadAvatarShape, type UploadAvatarSize, type UploadAvatarVariant, UploadFile, type UploadFileColor, type UploadFileConfig, type UploadFileDragStatus, UploadFileDropzone, type UploadFileDropzoneProps, UploadFileItemRow, type UploadFileItemRowProps, UploadFileList, type UploadFileListProps, type UploadFileListType, type UploadFileProps, type UploadFileRadius, type UploadFileShape, type UploadFileSize, type UploadFileVariant, type UploadFileViewMode, UploadIcon, UploadImage, type UploadImageColor, type UploadImageDragStatus, UploadImageDropzone, type UploadImageDropzoneProps, UploadImageList, type UploadImageListProps, type UploadImageObjectFit, type UploadImageProps, type UploadImageRadius, type UploadImageShape, type UploadImageSize, type UploadImageVariant, type UploadImageViewMode, type UseDataTableOptions, type UseFloatingTransitionOptions, VIDEO_EXTENSIONS, YearGrid, type YearGridProps, ZoomInIcon, ZoomOutIcon, checkIsDisabled, clamp, combineDateTime, createDateWithTime, createTableColumnHelper, defaultTableFeatures, downloadFile, formatBytes, formatDate, formatDateTime, formatNumberString, formatTime, fuzzyFilter, generateCalendarGrid, generateRangeCalendarGrid, getDefaultDateTimeFormat, getDefaultFormat, getFileCategory, getFileExtension, getFileName, getFileType, getISOWeekNumber, getPercentage, getSafeConfig, isDateAfter, isDateBefore, isSameDay, isSameMonth, isSameTime, isTimeAfter, isTimeBefore, isTimeInRange, isValidOtpChar, normalizePreviewFile, padZero, parseDate, parseDateTime, parseNumber, parseRawNumberString, parseTimeToDate, rankAndFilterItems, resolveLocale, sanitizeOtpString, splitTagsFromText, toDate, toDateTime, toTimeObject, toast, useAnimatedError, useCarousel, useCarouselContext, useCollapseContext, useCollapsePanelContext, useConfirmContext, useDataTable, useDebounce, useDebouncedCallback, useDropdownContext, useFileContext, useFloatingTransition, useModalContext, usePopoverContext, useTableStyles, useTabsContext };