@openway/ui 1.0.0 → 1.0.2

package/dist/index.d.cts

@@ -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 { A as AlertProps, T as ToasterProps, a as ToastOptions, b as ToastPromiseOptions, E as EmptyProps, c as EmptyPresetImage, S as SelectProps, M as MultiSelectProps, d as SelectOptionItem, e as SelectSize, f as SelectVariant, g as SelectColor, h as SelectRadius, i as SelectSearchPlacement, j as SelectFilterField, k as SelectFilterLayout } from './useInfiniteScroll-D9AW6cQV.cjs';
+export { l as AlertColor, m as AlertRadius, n as AlertSize, o as AlertVariant, B as BaseSelectProps, p as EmptyLayout, q as EmptySize, r as SelectFilterType, s as SelectSearchMode, t as SingleSelectProps, u as ToastMessageObject, v as ToastMessageResult, w as ToastPosition, x as ToastPromiseFunction, U as UseInfiniteScrollOptions, y as UseInfiniteScrollReturn, z as useInfiniteScroll } from './useInfiniteScroll-D9AW6cQV.cjs';
 import { Placement, ExtendedRefs, ReferenceType, FloatingContext } from '@floating-ui/react';
+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';
+import 'sonner';
 
 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,279 +1949,20 @@ declare function TrashIcon({ width, height, className, ...props }: SVGProps<SVGS
 
 declare function UploadIcon({ 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)
- * - 'sm': Nhỏ (text-xs, title text-sm, padding p-2.5)
- * - 'md': Vừa - mặc định (text-sm, padding p-3.5)
- * - 'lg': Lớn (text-base, padding p-4)
- * - 'xl': Rất lớn (text-lg, padding p-5)
- */
-type AlertSize = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * Các biến thể giao diện và phong cách hiển thị màu sắc của Alert:
- * - 'soft': Nền nhạt pastel, viền mờ 2px, chữ đậm (mặc định)
- * - 'filled': Nền màu đậm, chữ trắng tương phản cao
- * - 'outline': Nền trắng, viền rõ nét theo màu chủ đề
- * - 'accent-left': Nền pastel kèm viền nhấn dày 4px bên trái
- * - 'ghost': Nền và viền trong suốt
- * - 'other': Bỏ qua màu mặc định, tự do styling qua className
- */
-type AlertVariant = "soft" | "filled" | "outline" | "accent-left" | "ghost" | "other";
-/**
- * 7 chủ đề màu sắc theo Design System:
- * - 'primary': Màu chủ đạo
- * - 'secondary': Màu phụ
- * - 'neutral': Màu trung tính
- * - 'error': Màu đỏ cảnh báo lỗi nguy cấp
- * - 'success': Màu xanh lá thông báo thành công
- * - 'warning': Màu vàng/cam cảnh báo
- * - 'info': Màu xanh dương thông tin (mặc định)
- */
-type AlertColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
-/**
- * Độ bo góc của khung thông báo Alert:
- * - 'none': Góc vuông phẳng (rounded-none)
- * - 'sm': Bo góc nhỏ (rounded-sm)
- * - 'md': Bo góc vừa (rounded-md)
- * - 'lg': Bo góc lớn (rounded-lg - mặc định)
- * - 'xl': Bo góc rất lớn (rounded-xl)
- * - 'full': Bo tròn hoàn toàn (rounded-2xl)
- */
-type AlertRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
-/**
- * Props cho component `Alert`.
- */
-interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /**
-     * Ref chuyển tiếp đến phần tử HTML div của Alert
-     */
-    ref?: Ref<HTMLDivElement>;
-    /**
-     * Kích cỡ của Alert (5 sizes: xs, sm, md, lg, xl)
-     * @default 'md'
-     */
-    size?: AlertSize;
-    /**
-     * Biến thể giao diện của Alert:
-     * - 'soft': nền nhạt pastel, viền mờ, chữ đậm tương ứng (mặc định)
-     * - 'filled': nền màu đậm, chữ tương phản cao
-     * - 'outline': nền trắng, viền rõ nét theo màu chủ đề
-     * - 'accent-left': viền nhấn dày bên trái, nền pastel
-     * - 'ghost': nền và viền trong suốt
-     * - 'other': không áp dụng style màu mặc định, tự do tùy biến qua className
-     * @default 'soft'
-     */
-    variant?: AlertVariant;
-    /**
-     * Chủ đề màu sắc (primary, secondary, neutral, error, success, warning, info)
-     * @default 'info'
-     */
-    color?: AlertColor;
-    /**
-     * Tùy chỉnh độ bo góc:
-     * - 'none': góc vuông 0px
-     * - 'sm': bo góc nhỏ
-     * - 'md': bo góc vừa
-     * - 'lg': bo góc lớn (mặc định)
-     * - 'xl': bo góc rất lớn
-     * - 'full': bo tròn hoàn toàn
-     * @default 'lg'
-     */
-    radius?: AlertRadius;
-    /**
-     * Tiêu đề của Alert
-     */
-    title?: ReactNode;
-    /**
-     * Nội dung mô tả chi tiết của Alert (có thể truyền qua prop description hoặc children)
-     */
-    description?: ReactNode;
-    /**
-     * Icon hiển thị ở đầu thông báo:
-     * - `true` (hoặc không truyền): tự động hiển thị icon theo `color`
-     * - `false`: ẩn icon
-     * - `ReactNode`: icon tùy chỉnh
-     * @default true
-     */
-    icon?: ReactNode | boolean;
-    /**
-     * Phần tử hành động phụ (Action slot, ví dụ: Nút bấm, liên kết thao tác)
-     */
-    action?: ReactNode;
-    /**
-     * Hiển thị nút đóng (Close button x) để người dùng có thể tắt thông báo. Tự động ẩn Alert khi click.
-     * @default true
-     */
-    closable?: boolean;
-    /**
-     * Callback khi người dùng bấm nút đóng
-     */
-    onClose?: () => void;
-    /**
-     * Nhãn accessibility cho nút đóng
-     * @default 'Close alert'
-     */
-    closeAriaLabel?: string;
-    /**
-     * Chế độ Banner: Full width, không bo góc (`rounded-none`), không viền 2 bên (`border-x-0`), thích hợp gắn cố định trên cùng màn hình
-     * @default false
-     */
-    banner?: boolean;
-    /**
-     * Class tùy biến cho phần tiêu đề (title)
-     */
-    titleClassName?: string;
-    /**
-     * Class tùy biến cho phần nội dung mô tả (description / children)
-     */
-    descriptionClassName?: string;
-    /**
-     * Class tùy biến cho vùng action slot
-     */
-    actionClassName?: string;
-    /**
-     * Class tùy biến cho icon wrapper
-     */
-    iconClassName?: string;
-    /**
-     * Class tùy biến cho nút đóng
-     */
-    closeButtonClassName?: string;
-    /**
-     * Class tùy biến cho container bao ngoài
-     */
-    className?: string;
-    /**
-     * Nội dung tùy biến bên trong Alert
-     */
-    children?: ReactNode;
+interface AvatarIconProps extends SVGProps<SVGSVGElement> {
+    variant?: "solid" | "outline";
 }
+declare function AvatarIcon({ width, height, variant, className, ...props }: AvatarIconProps): react_jsx_runtime.JSX.Element;
 
-declare function Alert({ size, variant, color, radius, title, description, icon, action, closable, onClose, closeAriaLabel, banner, titleClassName, descriptionClassName, actionClassName, iconClassName, closeButtonClassName, className, children, role, ref, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare function ArrowUpDownIcon({ width, height, className, ...props }: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-/**
- * Vị trí hiển thị của danh sách thông báo Toast trên màn hình.
- */
-type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
-/**
- * Cấu hình tùy chọn cho từng thông báo Toast đơn lẻ:
- * - Dạng gọi hàm chuẩn: `toast.success(title, description?, options?)`
- */
-interface ToastOptions extends Omit<AlertProps, "title" | "description"> {
-    /**
-     * Thời gian hiển thị thông báo trước khi tự động đóng (miliseconds). Mặc định 4000ms.
-     * @default 4000
-     */
-    duration?: number;
-    /**
-     * Vị trí hiển thị riêng cho thông báo này trên màn hình.
-     */
-    position?: ToastPosition;
-    /**
-     * Callback được gọi khi thông báo bị đóng/gỡ bỏ khỏi màn hình.
-     */
-    onDismiss?: (toast: ToastT) => void;
-    /**
-     * Callback được gọi khi thông báo tự động đóng do hết thời gian duration.
-     */
-    onAutoClose?: (toast: ToastT) => void;
-}
-/**
- * Cấu trúc thông báo dạng Object chi tiết cho `toast.promise`.
- */
-interface ToastMessageObject {
-    title?: ReactNode;
-    description?: ReactNode;
-    color?: AlertColor;
-    variant?: AlertVariant;
-}
-/**
- * Kiểu dữ liệu linh hoạt cho nội dung thông báo trả về trong `toast.promise`:
- * - `ReactNode`: Chuỗi text hoặc phần tử JSX thông thường.
- * - `ToastMessageObject`: Object chi tiết gồm `{ title, description, color, variant }`.
- */
-type ToastMessageResult = ReactNode | ToastMessageObject;
-/**
- * Hàm tạo nội dung thông báo thành công động dựa theo dữ liệu `data: T` trả về từ Promise.
- */
-type ToastPromiseFunction<T> = (data: T) => ToastMessageResult;
-/**
- * Cấu hình các trạng thái cho `toast.promise(promise, options)`.
- */
-interface ToastPromiseOptions<T = unknown> {
-    /**
-     * Nội dung hiển thị trong lúc Promise đang thực thi (Loading state).
-     */
-    loading: ToastMessageResult;
-    /**
-     * Nội dung hiển thị khi Promise thực thi thành công (Resolve state).
-     * Có thể truyền trực tiếp nội dung hoặc một hàm nhận `data: T`.
-     */
-    success: ToastMessageResult | ToastPromiseFunction<T>;
-    /**
-     * Nội dung hiển thị khi Promise gặp lỗi (Reject state).
-     * Có thể truyền trực tiếp nội dung hoặc một hàm nhận `error: unknown`.
-     */
-    error: ToastMessageResult | ((error: unknown) => ToastMessageResult);
-    /**
-     * Callback chạy sau khi Promise hoàn tất (cả khi resolve hoặc reject).
-     */
-    finally?: () => void | Promise<void>;
-    /**
-     * Thời gian hiển thị thông báo kết quả (ms). Mặc định 4000ms.
-     * @default 4000
-     */
-    duration?: number;
-    /**
-     * Kích cỡ của Alert hiển thị trong Toast.
-     */
-    size?: AlertSize;
-    /**
-     * Biến thể giao diện của Alert hiển thị trong Toast.
-     */
-    variant?: AlertVariant;
-    /**
-     * Tùy chỉnh độ bo góc của Alert hiển thị trong Toast.
-     */
-    radius?: AlertRadius;
-}
-/**
- * Props cho component `<Toaster />` được mount tại root layout của ứng dụng.
- */
-interface ToasterProps extends ToasterProps$1 {
-    /**
-     * Vị trí mặc định của toàn bộ danh sách toasts trên màn hình.
-     * @default 'top-right'
-     */
-    position?: ToastPosition;
-    /**
-     * Số lượng toast tối đa hiển thị cùng lúc trước khi tự động xếp chồng 3D (stack).
-     * @default 3
-     */
-    visibleToasts?: number;
-    /**
-     * Mở rộng toàn bộ danh sách toasts thay vì gộp lại thành 1 stack 3D.
-     * - `false` (mặc định): Tự động gộp thẻ 3D, chỉ bung ra khi hover chuột.
-     * - `true`: Luôn luôn mở rộng trải dài toàn bộ danh sách.
-     * @default false
-     */
-    expand?: boolean;
-    /**
-     * Thời gian hiển thị mặc định của các toasts (miliseconds).
-     * @default 4000
-     */
-    duration?: number;
-    /**
-     * Cho phép hiển thị nút đóng `(X)` trên các toasts.
-     * @default true
-     */
-    closeButton?: boolean;
-    /**
-     * Tùy biến className bao ngoài container của Toaster.
-     */
-    className?: string;
-}
+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;
+
+declare function Alert({ size, variant, color, radius, title, description, icon, action, closable, onClose, closeAriaLabel, banner, titleClassName, descriptionClassName, actionClassName, iconClassName, closeButtonClassName, className, children, role, ref, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
 
 declare function Toaster({ position, visibleToasts, expand, duration, closeButton, className, toastOptions, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
 
@@ -3099,7 +3045,6 @@ interface TabsContextValue {
     destroyInactiveTabPane: boolean;
     onCloseTab?: (key: string | number) => void;
 }
-declare const TabsContext: react.Context<TabsContextValue | null>;
 declare function useTabsContext(): TabsContextValue;
 
 /**
@@ -4323,6 +4268,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 +4491,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 +4830,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 +5058,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 +6142,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 +6149,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 +6194,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 +6249,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 +6266,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 +6286,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,368 +6316,196 @@ 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 {
+interface UseFloatingTransitionOptions {
     /**
-     * List or single file item managed by the component
+     * Transition duration in milliseconds.
+     * Can be a number or an object with `open` and `close` durations.
+     * @default 150
      */
-    value?: UploadFileItem[] | UploadFileItem | string[] | string;
+    duration?: number | {
+        open?: number;
+        close?: number;
+    };
     /**
-     * Initial default value (uncontrolled)
+     * Distance offset in pixels to translate from initially and when closing.
+     * @default 4
      */
-    defaultValue?: UploadFileItem[] | UploadFileItem | string[] | string;
+    offset?: number;
     /**
-     * Callback triggered when the file list changes
+     * Scale factor when closed / unmounted.
+     * @default 0.96
      */
-    onChange?: (items: UploadFileItem[]) => void;
+    scale?: number;
     /**
-     * Callback triggered when a file item is removed
+     * Whether transitions should animate. If false, duration is 0.
+     * @default true
      */
-    onRemove?: (item: UploadFileItem, index: number) => void;
+    animated?: boolean;
+}
+declare function useFloatingTransition(context: FloatingContext, options?: UseFloatingTransitionOptions): {
+    isMounted: boolean;
+    styles: React.CSSProperties;
+};
+
+/**
+ * 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:
+ * - 'xs': 320px (nhỏ gọn, dành cho thông báo nhanh)
+ * - 'sm': 400px (dành cho form ngắn, xác nhận)
+ * - 'md': 540px (chuẩn mặc định cho đa số form)
+ * - 'lg': 720px (dành cho form phức tạp, upload ảnh)
+ * - 'xl': 960px (dành cho bảng dữ liệu, preview tài liệu)
+ * - 'full': Toàn màn hình
+ */
+type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Các mức bo góc của khung hộp thoại Modal:
+ * - '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-3xl)
+ */
+type ModalRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Props cho component `<Modal>` (Khung giao diện hộp thoại dialog box)
+ */
+interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Callback triggered when an image preview is requested
+     * Ref chuyển tiếp (forwardRef) trỏ trực tiếp đến thẻ div hộp thoại
      */
-    onPreview?: (item: UploadFileItem) => void;
+    ref?: Ref<HTMLDivElement>;
     /**
-     * Whether to allow multiple file uploads
-     * @default false
+     * Kích thước chiều rộng của hộp thoại
+     * @default 'md'
      */
-    multiple?: boolean;
+    size?: ModalSize;
     /**
-     * Maximum number of allowed files
-     * @default 1 when multiple=false, unlimited when multiple=true
+     * Tùy chỉnh độ bo góc của hộp thoại.
+     * Nếu không truyền, mặc định sẽ áp dụng bo góc `rounded-lg`.
      */
-    maxCount?: number;
+    radius?: ModalRadius;
     /**
-     * Maximum file size in bytes
-     * Example: 5 * 1024 * 1024 (5MB)
+     * Class tùy biến CSS cho container bao ngoài hộp thoại
      */
-    maxSize?: number;
+    className?: string;
     /**
-     * Accepted file MIME types or extensions
-     * @default "image/*"
+     * Nội dung bên trong hộp thoại (thường là `<ModalHeader>`, `<ModalBody>`, `<ModalFooter>`)
      */
-    accept?: string;
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ModalHeader>` (Phần đầu của hộp thoại Modal)
+ */
+interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
-     * Custom hook executed before upload to validate or transform file.
-     * Return `true` to proceed, `false` or error message string to reject.
+     * Kích thước áp dụng cho tiêu đề và khoảng cách padding trong header
+     * @default 'md'
      */
-    beforeUpload?: (file: File) => boolean | string | Promise<boolean | string>;
+    size?: ModalSize;
     /**
-     * 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'
+     * Tiêu đề chính của Modal (dạng text string hoặc ReactNode)
      */
-    viewMode?: UploadImageViewMode;
+    title?: ReactNode;
     /**
-     * Shape of the container
-     * @default 'rectangle' for dropzone, 'square' for card-grid
+     * Đoạn văn bản mô tả phụ bên dưới tiêu đề
      */
-    shape?: UploadImageShape;
+    description?: ReactNode;
     /**
-     * 5 standard size levels (xs, sm, md, lg, xl)
-     * @default 'md'
+     * Class tùy biến CSS riêng cho phần text tiêu đề (Title)
      */
-    size?: UploadImageSize;
+    titleClassName?: string;
     /**
-     * Design System color theme (primary, secondary, neutral, error, success, warning, info)
-     * @default 'primary'
+     * Class tùy biến CSS riêng cho phần text mô tả (Description)
      */
-    color?: UploadImageColor;
+    descriptionClassName?: string;
     /**
-     * Visual variant (outline, filled, ghost, other)
-     * @default 'outline'
+     * Cho phép hiển thị nút đóng (X) ở góc phải của header
+     * @default true
      */
-    variant?: UploadImageVariant;
+    showCloseButton?: boolean;
     /**
-     * Corner radius
-     * @default based on size
+     * Callback tùy biến khi người dùng click vào nút đóng (X).
+     * Luôn kết hợp kích hoạt hiệu ứng exit animation của ModalContainer.
      */
-    radius?: UploadImageRadius;
+    onClose?: () => void;
     /**
-     * Label text above the upload container
+     * Class tùy biến CSS cho nút bấm đóng (X)
      */
-    label?: ReactNode;
+    closeButtonClassName?: string;
     /**
-     * Helper or instruction text below the upload container
+     * Class tùy biến CSS cho toàn bộ khối header
      */
-    helperText?: ReactNode;
+    className?: string;
     /**
-     * Error message to display
+     * Nội dung ReactNode tùy chỉnh thêm vào bên trong header
      */
-    errorMessage?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ModalBody>` (Phần thân chứa nội dung chính cuộn được của Modal)
+ */
+interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether the field is in an invalid/error state
+     * Kích thước áp dụng cho khoảng cách padding và cỡ chữ bên trong body
+     * @default 'md'
      */
-    isInvalid?: boolean;
+    size?: ModalSize;
     /**
-     * Whether the component is disabled
-     * @default false
+     * Class tùy biến CSS cho toàn bộ khối body (hỗ trợ overflow cuộn dọc)
      */
-    disabled?: boolean;
+    className?: string;
     /**
-     * Whether the component is in read-only mode
-     * @default false
+     * Nội dung chính hiển thị bên trong body (Form nhập liệu, Danh sách, Văn bản...)
      */
-    readOnly?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ModalFooter>` (Phần chân trang chứa các nút hành động xác nhận/hủy)
+ */
+interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether the component is in a loading state
-     * @default false
+     * Kích thước áp dụng cho padding và khoảng cách gap giữa các nút bấm
+     * @default 'md'
      */
-    isLoading?: boolean;
+    size?: ModalSize;
     /**
-     * Custom title text inside the Dropzone area
+     * Class tùy biến CSS cho toàn bộ khối footer
      */
-    dropzoneTitle?: ReactNode;
+    className?: string;
     /**
-     * Custom description text inside the Dropzone area
+     * Các nút bấm hành động (ví dụ: `<Button>Hủy</Button>`, `<Button color="primary">Lưu</Button>`)
      */
-    dropzoneDescription?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Props cho component `<ModalContainer>` (Tầng Wrapper quản lý Overlay Backdrop, Native Dialog, ESC & Animation)
+ */
+interface ModalContainerProps extends HTMLAttributes<HTMLDialogElement> {
     /**
-     * Custom upload icon
+     * Trạng thái hiển thị mở/đóng modal (Controlled State)
      */
-    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;
-}
-declare function validateFile(file: File, options?: ValidateFileOptions): {
-    isValid: boolean;
-    error?: string;
-};
-declare function createFileItem(file: File, url?: string): UploadFileItem;
-declare function revokeFileItem(item: UploadFileItem): void;
-
-/**
- * Các kích thước chiều rộng tiêu chuẩn của Modal:
- * - 'xs': 320px (nhỏ gọn, dành cho thông báo nhanh)
- * - 'sm': 400px (dành cho form ngắn, xác nhận)
- * - 'md': 540px (chuẩn mặc định cho đa số form)
- * - 'lg': 720px (dành cho form phức tạp, upload ảnh)
- * - 'xl': 960px (dành cho bảng dữ liệu, preview tài liệu)
- * - 'full': Toàn màn hình
- */
-type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
-/**
- * Các mức bo góc của khung hộp thoại Modal:
- * - '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-3xl)
- */
-type ModalRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
-/**
- * Props cho component `<Modal>` (Khung giao diện hộp thoại dialog box)
- */
-interface ModalProps 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
-     * @default 'md'
-     */
-    size?: ModalSize;
-    /**
-     * Tùy chỉnh độ bo góc của hộp thoại.
-     * Nếu không truyền, mặc định sẽ áp dụng bo góc `rounded-lg`.
-     */
-    radius?: ModalRadius;
-    /**
-     * Class tùy biến CSS cho container bao ngoài hộp thoại
-     */
-    className?: string;
-    /**
-     * Nội dung bên trong hộp thoại (thường là `<ModalHeader>`, `<ModalBody>`, `<ModalFooter>`)
-     */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ModalHeader>` (Phần đầu của hộp thoại Modal)
- */
-interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /**
-     * Kích thước áp dụng cho tiêu đề và khoảng cách padding trong header
-     * @default 'md'
-     */
-    size?: ModalSize;
-    /**
-     * Tiêu đề chính của Modal (dạng text string hoặc ReactNode)
-     */
-    title?: ReactNode;
-    /**
-     * Đoạn văn bản mô tả phụ bên dưới tiêu đề
-     */
-    description?: ReactNode;
-    /**
-     * Class tùy biến CSS riêng cho phần text tiêu đề (Title)
-     */
-    titleClassName?: string;
-    /**
-     * Class tùy biến CSS riêng cho phần text mô tả (Description)
-     */
-    descriptionClassName?: string;
-    /**
-     * Cho phép hiển thị nút đóng (X) ở góc phải của header
-     * @default true
-     */
-    showCloseButton?: boolean;
-    /**
-     * Callback tùy biến khi người dùng click vào nút đóng (X).
-     * Luôn kết hợp kích hoạt hiệu ứng exit animation của ModalContainer.
-     */
-    onClose?: () => void;
-    /**
-     * Class tùy biến CSS cho nút bấm đóng (X)
-     */
-    closeButtonClassName?: string;
-    /**
-     * Class tùy biến CSS cho toàn bộ khối header
-     */
-    className?: string;
-    /**
-     * Nội dung ReactNode tùy chỉnh thêm vào bên trong header
-     */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ModalBody>` (Phần thân chứa nội dung chính cuộn được của Modal)
- */
-interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Kích thước áp dụng cho khoảng cách padding và cỡ chữ bên trong body
-     * @default 'md'
-     */
-    size?: ModalSize;
-    /**
-     * Class tùy biến CSS cho toàn bộ khối body (hỗ trợ overflow cuộn dọc)
-     */
-    className?: string;
-    /**
-     * Nội dung chính hiển thị bên trong body (Form nhập liệu, Danh sách, Văn bản...)
-     */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ModalFooter>` (Phần chân trang chứa các nút hành động xác nhận/hủy)
- */
-interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Kích thước áp dụng cho padding và khoảng cách gap giữa các nút bấm
-     * @default 'md'
-     */
-    size?: ModalSize;
-    /**
-     * Class tùy biến CSS cho toàn bộ khối footer
-     */
-    className?: string;
-    /**
-     * Các nút bấm hành động (ví dụ: `<Button>Hủy</Button>`, `<Button color="primary">Lưu</Button>`)
-     */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ModalContainer>` (Tầng Wrapper quản lý Overlay Backdrop, Native Dialog, ESC & Animation)
- */
-interface ModalContainerProps extends HTMLAttributes<HTMLDialogElement> {
-    /**
-     * Trạng thái hiển thị mở/đóng modal (Controlled State)
-     */
-    open?: boolean;
+    open?: boolean;
     /**
      * Callback được kích hoạt khi modal đóng (click ra ngoài backdrop, nhấn phím ESC, hoặc click nút đóng X)
      */
@@ -7013,6 +6594,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 +6628,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 +6772,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 +6859,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
-     */
-    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
+     * Giá trị mặc định ban đầu khi dùng ở chế độ không kiểm soát (Uncontrolled mode)
      */
-    maxZoom?: number;
-    /**
-     * Tiêu đề modal cắt ảnh
-     * @default "Cắt ảnh đại diện"
-     */
-    modalTitle?: string;
-}
-interface UploadAvatarProps {
+    defaultValue?: PreviewFile[] | PreviewFile | null;
     /**
-     * Ref chuyển tiếp đến thẻ input file ẩn (React 19)
+     * Callback kích hoạt khi danh sách hình ảnh thay đổi (thêm mới, thay thế)
      */
-    ref?: Ref<HTMLInputElement>;
+    onChange?: (items: PreviewFile[]) => void;
     /**
-     * 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'
+     * Callback kích hoạt khi một hình ảnh bị xóa khỏi danh sách
      */
-    size?: UploadAvatarSize;
+    onRemove?: (item: PreviewFile, index: number) => void;
     /**
-     * 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'
+     * Callback kích hoạt khi người dùng yêu cầu xem trước (phóng to) hình ảnh
      */
-    variant?: UploadAvatarVariant;
+    onPreview?: (item: PreviewFile) => void;
     /**
-     * Chủ đề màu sắc
-     * @default 'primary'
+     * 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
      */
-    color?: UploadAvatarColor;
+    multiple?: boolean;
     /**
-     * Hình dạng avatar: 'circle' (tròn) hoặc 'square' (vuông)
-     * @default 'circle'
+     * 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
      */
-    shape?: UploadAvatarShape;
+    maxCount?: number;
     /**
-     * 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)
+     * 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
      */
-    radius?: UploadAvatarRadius;
+    maxSize?: number;
     /**
-     * Giá trị ảnh avatar (PreviewFile = File | ServerFile hoặc chuỗi URL)
+     * 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/*"
      */
-    value?: PreviewFile | string | null;
+    accept?: string | Accept;
     /**
-     * Giá trị mặc định ban đầu khi khởi tạo (Uncontrolled)
+     * 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.
      */
-    defaultValue?: PreviewFile | string | null;
+    beforeUpload?: (file: File) => boolean | string | Promise<boolean | string>;
     /**
-     * Callback khi ảnh avatar thay đổi (hoặc bị xóa với null)
+     * 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'
      */
-    onChange?: (item: PreviewFile | null) => void;
+    viewMode?: UploadImageViewMode;
     /**
-     * Callback khi ảnh avatar bị xóa
+     * Hình dạng của khung tải ảnh
+     * @default 'rectangle' cho dropzone, 'square' cho card-grid
      */
-    onRemove?: (item: PreviewFile) => void;
+    shape?: UploadImageShape;
     /**
-     * Callback khi mở xem trước ảnh phóng to (lightbox preview)
+     * 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
      */
-    onPreview?: (item: PreviewFile) => void;
+    objectFit?: UploadImageObjectFit;
     /**
-     * Callback khi người dùng nhấn nút xóa nhanh nội dung
+     * Kích cỡ của component (áp dụng cho dropzone, thumbnail, font chữ, icon)
+     * @default 'md'
      */
-    onClear?: () => void;
+    size?: UploadImageSize;
     /**
-     * Dung lượng file tối đa cho phép (bytes, ví dụ: 2 * 1024 * 1024 = 2MB)
+     * Bảng màu chủ đề trong Design System
+     * @default 'primary'
      */
-    maxSize?: number;
+    color?: UploadImageColor;
     /**
-     * Định dạng MIME type hoặc phần mở rộng được chấp nhận
-     * @default "image/*"
+     * Biến thể kiểu dáng hiển thị của khung tải ảnh
+     * @default 'outline'
      */
-    accept?: string;
+    variant?: UploadImageVariant;
     /**
-     * Bật modal cắt xén ảnh (crop) trước khi áp dụng
-     * @default true
+     * 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
      */
-    crop?: boolean | UploadAvatarCropOptions;
+    radius?: UploadImageRadius;
     /**
-     * Nhãn hiển thị cho avatar
+     * Nhãn văn bản hiển thị phía trên component
      */
     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)
+     * Đá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;
     /**
-     * Đoạn văn bản hướng dẫn/chú thích bên dưới avatar
+     * Lớp CSS tùy biến cho nhãn văn bản (label)
+     */
+    labelClassName?: string;
+    /**
+     * 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> {
+interface UploadImageDropzoneProps {
     /**
-     * Ref chuyển tiếp (forwardRef) trỏ trực tiếp đến thẻ div hộp thoại
+     * Kích cỡ của khung Dropzone
+     * @default 'md'
      */
-    ref?: Ref<HTMLDivElement>;
+    size?: UploadImageSize;
     /**
-     * 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'
+     * Màu sắc chủ đề khi hover và kéo thả
+     * @default 'primary'
      */
-    size?: ConfirmSize;
+    color?: UploadImageColor;
     /**
-     * Chủ đề màu sắc cho hộp thoại (được kế thừa tự động bởi ConfirmHeader và ConfirmFooter)
-     * @default 'warning'
+     * Biến thể kiểu dáng viền/nền của khung Dropzone
+     * @default 'outline'
      */
-    color?: ConfirmColor;
+    variant?: UploadImageVariant;
     /**
-     * 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'
+     * Tùy biến độ bo góc của khung Dropzone
+     * @default phụ thuộc vào size
      */
-    radius?: ConfirmRadius;
+    radius?: UploadImageRadius;
     /**
-     * Class tùy biến CSS cho container bao ngoài hộp thoại
+     * Hình dạng của khung Dropzone ('rectangle' hoặc 'square')
+     * @default 'rectangle'
      */
-    className?: string;
+    shape?: UploadImageShape;
     /**
-     * Các sub-component con bên trong hộp thoại:
-     * `<ConfirmHeader>`, `<ConfirmBody>`, `<ConfirmFooter>`
+     * Kiểu căn chỉnh hiển thị hình ảnh trong khung Dropzone (CSS object-fit)
+     * @default 'contain'
      */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ConfirmHeader>` (Phần đầu của hộp thoại Confirm)
- */
-interface ConfirmHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    objectFit?: UploadImageObjectFit;
     /**
-     * Kích thước áp dụng cho tiêu đề, icon và khoảng cách padding trong header
-     * @default 'md'
+     * Vô hiệu hóa khung kéo thả và chọn tệp
+     * @default false
      */
-    size?: ConfirmSize;
+    disabled?: boolean;
     /**
-     * Chủ đề màu sắc cho icon badge
-     * @default 'warning'
+     * Chế độ chỉ đọc, không cho phép kích hoạt chọn tệp mới
+     * @default false
      */
-    color?: ConfirmColor;
+    readOnly?: 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
+     * Trạng thái đang tải tệp hoặc xử lý hình ảnh
+     * @default false
      */
-    icon?: ReactNode | boolean;
+    isLoading?: boolean;
     /**
-     * Tiêu đề chính của hộp thoại Confirm
+     * Trạng thái kéo thả tệp trên vùng Dropzone ('idle' | 'active' | 'reject')
+     * @default 'idle'
      */
-    title?: ReactNode;
+    dragStatus?: UploadImageDragStatus;
     /**
-     * Class CSS tùy biến cho container bao ngoài icon badge
+     * Trạng thái hiển thị viền lỗi
+     * @default false
      */
-    iconClassName?: string;
+    isInvalid?: boolean;
     /**
-     * Class CSS tùy biến cho tiêu đề
+     * Tiêu đề hiển thị bên trong khung Dropzone
      */
-    titleClassName?: string;
+    dropzoneTitle?: ReactNode;
+    /**
+     * Mô tả phụ hiển thị bên trong khung Dropzone
+     */
+    dropzoneDescription?: ReactNode;
+    /**
+     * Biểu tượng tùy chỉnh trong khung Dropzone
+     */
+    icon?: ReactNode;
+    /**
+     * Mục hình ảnh đã tải lên để hiển thị trực tiếp trong khung khi ở chế độ 1 ảnh
+     */
+    item?: PreviewFile | null;
+    /**
+     * Callback xóa ảnh khi nhấn nút Xóa ảnh ở góc trên bên phải
+     */
+    onRemove?: () => void;
+    /**
+     * Callback mở lightbox xem trước khi nhấn vào thân hình ảnh
+     */
+    onPreview?: () => void;
+    /**
+     * 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)
+     */
+    onTriggerUpload?: () => void;
+    /**
+     * Hàm gắn thuộc tính accessibility và sự kiện kéo thả từ react-dropzone
+     */
+    getRootProps?: <T extends DropzoneRootProps>(props?: T) => T;
+    /**
+     * Lớp CSS tùy biến bổ sung cho khung Dropzone
+     */
+    className?: string;
+    /**
+     * ID phần tử chứa văn bản hướng dẫn/mô tả hỗ trợ accessibility (aria-describedby)
+     */
+    describedById?: string;
+}
+/**
+ * Props cho sub-component `<UploadImageList>`
+ */
+interface UploadImageListProps {
+    /**
+     * Danh sách các mục hình ảnh cần hiển thị
+     */
+    items: PreviewFile[];
+    /**
+     * Kích cỡ của thumbnail hình ảnh
+     * @default 'md'
+     */
+    size: UploadImageSize;
+    /**
+     * Màu sắc chủ đề cho các nút thao tác
+     * @default 'primary'
+     */
+    color?: UploadImageColor;
+    /**
+     * Biến thể hiển thị
+     * @default 'outline'
+     */
+    variant?: UploadImageVariant;
+    /**
+     * Độ bo góc của từng thumbnail ảnh trong danh sách
+     */
+    radius: UploadImageRadius;
+    /**
+     * Kiểu căn chỉnh hiển thị hình ảnh trong thumbnail (CSS object-fit)
+     * @default 'cover'
+     */
+    objectFit?: UploadImageObjectFit;
+    /**
+     * Vô hiệu hóa các nút tương tác trong danh sách
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Chế độ chỉ đọc (ẩn nút xóa và nút thêm ảnh)
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * 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)
+     */
+    maxCount?: number;
+    /**
+     * Callback khi nhấn nút xóa một mục hình ảnh
+     */
+    onRemove: (item: PreviewFile, index: number) => void;
+    /**
+     * Callback khi nhấn nút xem trước một mục hình ảnh
+     */
+    onPreview: (item: PreviewFile) => void;
+    /**
+     * Callback mở hộp thoại tải ảnh khi nhấn nút thêm (+)
+     */
+    onTriggerUpload: () => void;
+    /**
+     * 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;
+    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;
     /**
-     * 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.
+     * Bật hiệu ứng đổi màu nền nhẹ khi rê chuột qua dòng
+     * @default true
      */
-    onClose?: () => void;
+    isHoverable?: boolean;
     /**
-     * Class CSS tùy biến cho nút đóng (X)
+     * Nội dung các ô dữ liệu bên trong dòng (TableCell hoặc TableHead)
      */
-    closeButtonClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của ô tiêu đề `<TableHead />` (`<th>`)
+ */
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
     /**
-     * Class CSS tùy biến cho toàn bộ header
+     * Ref chuyển tiếp đến phần tử HTML th
      */
-    className?: string;
+    ref?: Ref<HTMLTableCellElement>;
     /**
-     * Nội dung ReactNode tùy chỉnh bên trong header
+     * 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;
 }
 /**
- * Props cho component `<ConfirmBody>` (Phần thân chứa nội dung mô tả của Confirm)
+ * Thuộc tính của ô dữ liệu `<TableCell />` (`<td>`)
  */
-interface ConfirmBodyProps extends HTMLAttributes<HTMLDivElement> {
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     /**
-     * Kích thước áp dụng cho cỡ chữ và padding của body
-     * @default 'md'
+     * Ref chuyển tiếp đến phần tử HTML td
      */
-    size?: ConfirmSize;
+    ref?: Ref<HTMLTableCellElement>;
     /**
-     * Đoạn văn bản mô tả ngắn (sẽ được bọc trong thẻ `<p>`)
+     * Hướng căn lề nội dung ô ('left', 'center', 'right')
+     * @default 'left'
      */
-    description?: ReactNode;
+    align?: TableAlign;
     /**
-     * Class CSS tùy biến riêng cho thẻ `<p>` mô tả
+     * Nội dung hiển thị bên trong ô dữ liệu
      */
-    descriptionClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * Thuộc tính của chú thích bảng `<TableCaption />` (`<caption>`)
+ */
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
     /**
-     * Class CSS tùy biến cho toàn bộ body
+     * Ref chuyển tiếp đến phần tử HTML caption
      */
-    className?: string;
+    ref?: Ref<HTMLTableCaptionElement>;
     /**
-     * Nội dung con tùy biến bên trong body
+     * Văn bản mô tả hoặc chú thích phụ bên dưới bảng
      */
     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)
+ * Thuộc tính của component tiêu đề cột tương tác sắp xếp `<TableColumnHeader />`
  */
-interface ConfirmFooterProps extends HTMLAttributes<HTMLDivElement> {
+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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+/**
+ * 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 DataTableProps<TData extends RowData = RowData> {
     /**
-     * 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 định nghĩa các cột dữ liệu (sử dụng helper `createTableColumnHelper` để tạo)
      */
-    size?: ConfirmSize;
+    columns: ColumnDef<DefaultTableFeatures, TData, unknown>[] | ReturnType<ColumnHelper<DefaultTableFeatures, TData>["columns"]>;
     /**
-     * Nhãn văn bản cho nút Xác nhận
-     * @default 'Xác nhận'
+     * Mảng dữ liệu nguồn hiển thị trong bảng
      */
-    confirmText?: ReactNode;
+    data: TData[];
     /**
-     * Nhãn văn bản cho nút Hủy (truyền `false` để ẩn nút Hủy)
-     * @default 'Hủy'
+     * 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'
      */
-    cancelText?: ReactNode | false;
+    variant?: TableVariant;
     /**
-     * Biến thể của nút Xác nhận ('filled', 'outline', 'soft', ...)
-     * @default 'filled'
+     * Kích thước bảng ('sm' nhỏ gọn, 'md' chuẩn, 'lg' thoáng đãng)
+     * @default 'md'
      */
-    confirmVariant?: ButtonVariant;
+    size?: TableSize;
     /**
-     * Biến thể của nút Hủy ('filled', 'outline', 'soft', ...)
-     * @default 'outline'
+     * Trạng thái đang tải dữ liệu (tự động hiển thị các dòng Skeleton animation)
+     * @default false
      */
-    cancelVariant?: ButtonVariant;
+    isLoading?: boolean;
     /**
-     * Màu nút Xác nhận tùy chỉnh (mặc định lấy theo `color`)
+     * Bật nút làm mới dữ liệu trên thanh công cụ (Refresh button)
+     * @default false
      */
-    confirmColor?: ButtonColor;
+    isRefresh?: boolean;
     /**
-     * Màu nút Hủy
-     * @default 'secondary'
+     * Callback được gọi khi người dùng click vào nút làm mới trên thanh công cụ
      */
-    cancelColor?: ButtonColor;
+    onRefresh?: () => void;
     /**
-     * Callback khi người dùng bấm nút Xác nhận (trả về void hoặc Promise)
+     * Số dòng Skeleton hiển thị khi đang tải (`isLoading={true}`)
+     * @default 5
      */
-    onConfirm?: () => void | Promise<unknown>;
+    loadingRowsCount?: number;
     /**
-     * Callback khi người dùng bấm nút Hủy
+     * 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ị'
      */
-    onCancel?: () => void;
+    emptyText?: string;
     /**
-     * Callback đóng hộp thoại
+     * 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)
      */
-    onClose?: () => void;
+    emptyIllustration?: ReactNode;
     /**
-     * Props bổ sung truyền trực tiếp cho component Button Xác nhận
+     * Bật tính năng sắp xếp (Sorting) khi click vào tiêu đề cột
+     * @default true
      */
-    confirmButtonProps?: Partial<ButtonProps>;
+    enableSorting?: boolean;
     /**
-     * Props bổ sung truyền trực tiếp cho component Button Hủy
+     * Bật ô tìm kiếm toàn bảng (Global Filter) trên thanh công cụ
+     * @default true
      */
-    cancelButtonProps?: Partial<ButtonProps>;
+    enableFiltering?: boolean;
     /**
-     * Class CSS tùy biến cho khối footer
+     * Bật thanh phân trang (Pagination) ở chân bảng
+     * @default true
      */
-    className?: string;
+    enablePagination?: boolean;
     /**
-     * Các nút bấm tùy chỉnh bên trong footer (khi dùng Pure Compound Pattern)
+     * 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
      */
-    children?: ReactNode;
-}
-/**
- * Props cho component `<ConfirmContainer>` (Tầng Wrapper quản lý Overlay Backdrop, Native Dialog, ESC & Animation)
- */
-interface ConfirmContainerProps extends HTMLAttributes<HTMLDialogElement> {
+    enableRowSelection?: boolean;
     /**
-     * Trạng thái hiển thị mở/đóng Confirm (Controlled State)
-     * @default false
+     * Bật menu Popover cho phép người dùng chủ động ẩn/hiện từng cột
+     * @default true
      */
-    open?: boolean;
+    enableColumnVisibility?: 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)
+     * Bật tính năng kéo thả thay đổi thứ tự các cột (Column Ordering / Dnd)
+     * @default false
      */
-    onClose?: () => void;
+    enableColumnOrdering?: boolean;
     /**
-     * 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'
+     * Văn bản gợi ý placeholder cho ô tìm kiếm
+     * @default 'Tìm kiếm trong bảng...'
      */
-    size?: ConfirmSize;
+    searchPlaceholder?: string;
     /**
-     * Chủ đề màu sắc tổng thể của Confirm (truyền xuống context để đồng bộ cho Confirm, Header, Footer)
-     * @default 'warning'
+     * 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...)
      */
-    color?: ConfirmColor;
+    toolbarActions?: ReactNode;
     /**
-     * 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
+     * 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...)
      */
-    isLoading?: boolean;
+    renderBulkActions?: (selectedRows: Row<DefaultTableFeatures, TData>[]) => ReactNode;
     /**
-     * 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
+     * Danh sách các tùy chọn số lượng dòng trên mỗi trang
+     * @default [10, 20, 50, 100]
      */
-    closeOnOverlayClick?: boolean;
+    pageSizeOptions?: number[];
     /**
-     * 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
+     * Số lượng dòng hiển thị mặc định mỗi trang khi khởi tạo
+     * @default 10
      */
-    closeOnEsc?: boolean;
+    initialPageSize?: number;
     /**
-     * Tự động khóa cuộn trang (body scroll lock) khi Confirm đang hiển thị
-     * @default true
+     * 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
      */
-    lockScroll?: boolean;
+    manualPagination?: boolean;
     /**
-     * Class tùy biến CSS cho lớp nền backdrop mờ toàn màn hình
+     * Bật chế độ sắp xếp thủ công từ server (truyền tham số sort lên API)
+     * @default false
      */
-    overlayClassName?: string;
+    manualSorting?: boolean;
     /**
-     * Class tùy biến CSS cho container bao ngoài dialog
+     * 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
      */
-    className?: string;
+    manualFiltering?: boolean;
     /**
-     * Nội dung bên trong container (thường là component `<Confirm>`)
+     * Tổng số trang trả về từ máy chủ (bắt buộc khi dùng `manualPagination={true}`)
      */
-    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> {
+    pageCount?: number;
     /**
-     * Component con cần bọc để kích hoạt sự kiện đóng (thường là `<Button>`)
+     * Tổng số lượng bản ghi thực tế từ máy chủ
      */
-    children?: ReactNode;
+    rowCount?: number;
     /**
-     * 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
+     * Trạng thái phân trang điều khiển ngoài: `{ pageIndex, pageSize }`
      */
-    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 {
+    pagination?: PaginationState;
     /**
-     * Callback kích hoạt đóng Confirm kèm hiệu ứng thoát (Exit Animation)
+     * Callback khi trạng thái phân trang thay đổi
      */
-    onClose: () => void;
+    onPaginationChange?: ((pagination: PaginationState) => void) | OnChangeFn<PaginationState>;
     /**
-     * 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.
+     * Trạng thái sắp xếp điều khiển ngoài: `Array<{ id, desc }>`
      */
-    isLoading?: boolean;
+    sorting?: SortingState;
     /**
-     * Kích thước chiều rộng của Confirm
+     * Callback khi trạng thái sắp xếp thay đổi
      */
-    size?: ConfirmSize;
+    onSortingChange?: ((sorting: SortingState) => void) | OnChangeFn<SortingState>;
     /**
-     * Chủ đề màu sắc của Confirm
+     * Trạng thái dòng được chọn điều khiển ngoài: `Record<rowId, boolean>`
      */
-    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> {
+    rowSelection?: RowSelectionState;
     /**
-     * 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'
+     * Callback khi danh sách dòng được chọn thay đổi
      */
-    variant?: SkeletonVariant;
+    onRowSelectionChange?: ((selection: RowSelectionState) => void) | OnChangeFn<RowSelectionState>;
     /**
-     * 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'
+     * Trạng thái hiển thị cột điều khiển ngoài: `Record<columnId, boolean>`
      */
-    shape?: SkeletonShape;
+    columnVisibility?: ColumnVisibilityState;
     /**
-     * Độ bo góc, chỉ áp dụng khi `shape === 'rectangle'`
-     * @default 'md'
+     * Callback khi trạng thái hiển thị cột thay đổi
      */
-    radius?: SkeletonRadius;
+    onColumnVisibilityChange?: ((visibility: ColumnVisibilityState) => void) | OnChangeFn<ColumnVisibilityState>;
     /**
-     * Chiều rộng (CSS string hoặc số px)
-     * @example "100%", "200px", 200
+     * Trạng thái thứ tự các cột điều khiển ngoài (mảng danh sách ID cột)
      */
-    width?: string | number;
+    columnOrder?: string[];
     /**
-     * Chiều cao (CSS string hoặc số px)
-     * @example "1rem", "40px", 40
-     * @default "1rem"
+     * Callback khi thứ tự cột thay đổi
      */
-    height?: string | number;
+    onColumnOrderChange?: ((order: string[]) => void) | OnChangeFn<string[]>;
     /**
-     * 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
+     * Từ khóa tìm kiếm toàn bảng điều khiển ngoài
      */
-    lines?: number;
+    globalFilter?: string;
     /**
-     * Khoảng cách giữa các dòng khi `lines > 1` (CSS string hoặc số px)
-     * @default "0.5rem"
+     * Callback khi từ khóa tìm kiếm toàn bảng thay đổi
      */
-    gap?: string | number;
-}
-interface LoadingImageProps extends Omit<ImageProps, "onLoad" | "onError"> {
+    onGlobalFilterChange?: (filter: string) => void;
     /**
-     * Kiểu animation của skeleton khi đang tải ảnh.
-     * @default 'pulse'
+     * 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).
      */
-    skeletonVariant?: SkeletonVariant;
+    globalFilterFn?: FilterFnOption<DefaultTableFeatures, TData>;
     /**
-     * Độ bo góc áp dụng đồng thời cho skeleton placeholder và ảnh.
-     * @default 'md'
+     * 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ụ
      */
-    radius?: SkeletonRadius;
+    filters?: TableFilterDef[];
     /**
-     * Class CSS tuỳ thêm cho wrapper bên ngoài.
+     * Trạng thái bộ lọc cột điều khiển ngoài (ColumnFiltersState của TanStack Table)
      */
-    wrapperClassName?: string;
+    columnFilters?: ColumnFiltersState;
     /**
-     * Inline style tuỳ thêm cho wrapper bên ngoài.
+     * Callback khi trạng thái bộ lọc cột thay đổi (trả về mảng ColumnFiltersState của TanStack Table)
      */
-    wrapperStyle?: react__default.CSSProperties;
+    onColumnFiltersChange?: ((filters: ColumnFiltersState) => void) | OnChangeFn<ColumnFiltersState>;
     /**
-     * Callback được gọi khi ảnh tải thành công.
+     * Callback được kích hoạt khi người dùng click vào một dòng trong bảng
      */
-    onLoad?: ImageProps["onLoad"];
+    onRowClick?: (row: Row<DefaultTableFeatures, TData>) => void;
     /**
-     * Callback được gọi khi ảnh gặp lỗi tải.
+     * Class tùy biến cho phần tử bọc ngoài toàn bộ component (gồm toolbar + table + pagination)
      */
-    onError?: ImageProps["onError"];
-}
+    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, AlertProps, AlertTriangleIcon, 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, ToastOptions, ToastPromiseOptions, Toaster, 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 };