@lucasvu/scope-ui 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -1,95 +1,56 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, SVGProps, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, FormHTMLAttributes, LabelHTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, RefObject, ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react from 'react';
+import { ReactNode, CSSProperties, SVGProps, HTMLAttributes, ElementType, ButtonHTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as SelectPrimitive from '@radix-ui/react-select';
 export { ColorMode, ROOT_CLIENT_THEME_ATTRIBUTE, ROOT_COLOR_MODE_ATTRIBUTE, UiAiComponentDescriptor, UiAiComponentProp, UiScreenBriefField, UiScreenKind, UiThemeLayerAsset, UiThemePreset, UiThemeToken, applyDocumentClientTheme, applyDocumentColorMode, cn, getSystemColorMode, initializeDocumentColorMode, isColorMode, subscribeToSystemColorMode, syncDocumentColorModeToSystem, uiAiManifest, uiDefaultThemePreset, uiProjectAiRules, uiScreenBlueprint, uiScreenBriefFields, uiThemeContract, uiThemeLayerAssets, uiThemePresets } from './core/index.js';
+import * as SelectPrimitive from '@radix-ui/react-select';
 
 type ComponentSize = 'sm' | 'md' | 'lg';
 interface SharedComponentProps {
     /**
-     * Nhãn hiển thị phía trên component hoặc control.
      * Visible label rendered above the component or control.
-     * 显示在组件或控件上方的标签。
      */
     label?: ReactNode;
     /**
-     * Nội dung hỗ trợ nằm dưới control khi không có lỗi.
      * Helper content shown below the control when there is no error.
-     * 没有错误时显示在控件下方的辅助说明。
      */
     helperText?: ReactNode;
     /**
-     * Nội dung lỗi hiển thị ưu tiên dưới control.
      * Error content displayed below the control with higher priority.
-     * 优先显示在控件下方的错误信息。
      */
     errorMessage?: ReactNode;
     /**
-     * Trạng thái đang xử lý dữ liệu hoặc gọi API.
      * Loading state while the component is processing or waiting for data.
-     * 组件处理中或等待数据时的加载状态。
      */
     loading?: boolean;
     /**
-     * Trạng thái vô hiệu hóa tương tác.
      * Disables user interaction with the component.
-     * 禁用组件交互。
      */
     disabled?: boolean;
     /**
-     * Kích thước hiển thị chung của component.
      * Shared visual size of the component.
-     * 组件的通用显示尺寸。
      */
     size?: ComponentSize;
     /**
-     * Class bổ sung để mở rộng style từ bên ngoài.
      * Extra class names for extending styles from the outside.
-     * 用于从外部扩展样式的额外 class。
      */
     className?: string;
     /**
-     * Inline style áp trực tiếp vào wrapper gốc của component.
      * Inline styles applied directly to the component root wrapper.
-     * 直接作用于组件根容器的内联样式。
      */
     style?: CSSProperties;
 }
 declare const spinnerSizes: Record<'xs' | 'sm' | 'md' | 'lg', string>;
 interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
     /**
-     * Kích thước của icon loading.
      * Visual size of the loading spinner icon.
-     * 加载图标的显示尺寸。
      */
     size?: keyof typeof spinnerSizes;
 }
 
-declare const alertVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
-type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-interface AlertProps extends SharedComponentProps {
-    description?: ReactNode;
-    icon?: ReactNode;
-    tone?: AlertTone;
-    variant?: AlertVariant;
-    title?: ReactNode;
-    children?: ReactNode;
-}
-/**
- * Status-aware alert panel with selectable variants, helper text, and optional iconography.
- * @remarks
- * Use `variant` (default/info/success/warning/destructive) and `size` (sm/md/lg) to tune the tone, show `description` or `helperText`, and decorate with a spinner via `loading`.
- */
-declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
-
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "destructive" | "solid" | "outline" | null | undefined;
+    variant?: "solid" | "outline" | "success" | "warning" | "destructive" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
@@ -105,130 +66,161 @@ interface BadgeProps extends SharedComponentProps {
  */
 declare function Badge({ variant, size, label, helperText, errorMessage, loading, disabled, className, style, text, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-type BreadcrumbItem = {
+type SidebarItem$1 = {
     /**
-     * Nội dung hiển thị của breadcrumb item.
-     * Visible content of the breadcrumb item.
-     * 面包屑项的显示内容。
+     * Unique identifier of the sidebar item.
      */
-    label: ReactNode;
+    id: string;
     /**
-     * Callback khi người dùng click item dạng button.
-     * Callback fired when the item is clicked as a button.
-     * 当该项以按钮形式点击时触发的回调。
+     * Title rendered directly in the menu.
      */
-    onClick?: () => void;
+    title?: string;
     /**
-     * URL điều hướng nếu item là link.
-     * Navigation URL when the item behaves as a link.
-     * 当该项作为链接时的跳转地址。
+     * i18n key when the title is translated outside this component.
+     */
+    titleKey?: string;
+    /**
+     * Item icon, either a ReactNode or a component type.
+     */
+    icon?: ReactNode | ElementType;
+    /**
+     * Navigation target when the item is clicked.
      */
     href?: string;
     /**
-     * Đánh dấu item là vị trí hiện tại.
-     * Marks the item as the current location.
-     * 标记该项为当前位置。
+     * Required permission(s) for the item to be visible.
      */
-    current?: boolean;
+    permission?: string | string[];
+    /**
+     * Nested child items.
+     */
+    children?: SidebarItem$1[];
 };
-type BreadcrumbProps = {
+type PermissionChecker = (permission: string | string[] | undefined, userPermissions?: string[]) => boolean;
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Danh sách item của breadcrumb.
-     * List of breadcrumb items.
-     * 面包屑项列表。
+     * Full item tree rendered inside the sidebar.
      */
-    items: BreadcrumbItem[];
+    items: SidebarItem$1[];
     /**
-     * Class bổ sung cho thẻ `nav`.
-     * Extra class names for the `nav` element.
-     * `nav` 元素的额外 class。
+     * Current permission list of the active user.
      */
-    className?: string;
+    userPermissions?: string[];
     /**
-     * Ký tự hoặc node dùng để ngăn cách các item.
-     * Character or node used to separate items.
-     * 用于分隔各项的字符或节点。
+     * Custom permission checking function.
      */
-    separator?: ReactNode;
+    permissionChecker?: PermissionChecker;
+    /**
+     * `id` of the currently active item.
+     */
+    activeItemId?: string;
+    /**
+     * Callback fired when the user clicks an item.
+     */
+    onItemClick?: (item: SidebarItem$1) => void;
+    /**
+     * Extra class names for the top-level list.
+     */
+    listClassName?: string;
+    /**
+     * Extra class names for nested lists.
+     */
+    nestedListClassName?: string;
+    /**
+     * Extra class names applied to each item.
+     */
+    itemClassName?: string;
+    /**
+     * Indentation size for each nested level.
+     */
+    indentSize?: number;
+    /**
+     * Accessibility label for the `nav` element.
+     */
+    ariaLabel?: string;
+    /**
+     * Enables collapsing and expanding the sidebar.
+     */
+    collapsible?: boolean;
+    /**
+     * Controlled collapsed state from the parent.
+     */
+    collapsed?: boolean;
+    /**
+     * Default collapsed state in uncontrolled mode.
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Callback fired when the collapsed state changes.
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Sidebar width when collapsed.
+     */
+    collapsedWidth?: number | string;
+    /**
+     * Sidebar width when expanded.
+     */
+    expandedWidth?: number | string;
+    /**
+     * Accessibility label for the collapse/expand button.
+     */
+    collapseButtonLabel?: string;
+}
+
+type ArgonSidebarHeaderRender = (state: {
+    collapsed: boolean;
+    hoverExpanded: boolean;
+}) => React.ReactNode;
+type ArgonSidebarProps = SidebarProps & {
+    /**
+     * Callback fired when hover-expansion state changes.
+     */
+    onHoverChange?: (hovered: boolean) => void;
+    /**
+     * Header content or a render function for dynamic header content.
+     */
+    header?: React.ReactNode | ArgonSidebarHeaderRender;
 };
-declare function Breadcrumb({ items, className, separator, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+/**
+ * Argon-style sidebar for legacy `main-fe` with collapse and permission filtering.
+ */
+declare function ArgonSidebar({ items, userPermissions, permissionChecker, activeItemId, onItemClick, listClassName, nestedListClassName, itemClassName, indentSize, ariaLabel, className, collapsible, collapsed, defaultCollapsed, onCollapseChange, collapsedWidth, expandedWidth, collapseButtonLabel, style, onHoverChange, header, ...rest }: ArgonSidebarProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants$1: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "confirm" | "secondary" | "ghost" | "create" | null | undefined;
+    variant?: "link" | "outline" | "destructive" | "default" | "confirm" | "secondary" | "ghost" | "create" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant$1 = VariantProps<typeof buttonVariants$1>['variant'];
 type ButtonSize$1 = 'sm' | 'md' | 'lg' | 'icon';
 interface ButtonProps$1 extends Omit<SharedComponentProps, 'size'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'className'> {
+    /**
+     * Visual variant of the button.
+     */
     variant?: ButtonVariant$1;
+    /**
+     * Visual size of the button.
+     */
     size?: ButtonSize$1;
-    block?: boolean;
+    /**
+     * Icon rendered before the main content.
+     */
     startIcon?: ReactNode;
+    /**
+     * Icon rendered after the main content.
+     */
     endIcon?: ReactNode;
+    /**
+     * Custom button content.
+     */
     children?: ReactNode;
 }
 /**
- * Primary action button with shadcn-inspired variants, helper text, and optional loading rewards.
- * @remarks
- * Support `variant` (default/destructive/outline/secondary/ghost/link) and `size` (sm/md/lg), adorn with icons, and surface helper or error text without needing custom wrappers.
+ * Button theo visual style legacy `main-fe`.
+ * Legacy `main-fe` styled button.
  */
 declare const Button$1: react.ForwardRefExoticComponent<ButtonProps$1 & react.RefAttributes<HTMLButtonElement>>;
 
-declare const inputVariants$1: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type InputVariant$1 = VariantProps<typeof inputVariants$1>['variant'];
-interface InputProps$1 extends SharedComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'prefix'> {
-    variant?: InputVariant$1;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
-    inputClassName?: string;
-    onValueChange?: (value: string) => void;
-    showPasswordToggle?: boolean;
-}
-/**
- * Accessible input surface with shadcn styling, optional prefix/suffix, and helpers for feedback.
- * @remarks
- * Swap `variant` (default/ghost/outline) and `size` (sm/md/lg), keep adornments with `prefix`/`suffix`, display helper/error text, and show a spinner via `loading`.
- */
-declare const Input$1: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
-
-type FormatOnBlur = 'trim' | 'fixed' | 'none';
-type NumericMode = 'integer' | 'decimal';
-type DecimalSeparator = '.' | ',' | 'auto';
-
-interface NumericInputProps extends Omit<InputProps$1, 'type' | 'inputMode' | 'value' | 'defaultValue' | 'onChange' | 'onValueChange'>, Pick<InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onFocus' | 'name'> {
-    value?: string | number;
-    defaultValue?: string | number;
-    onValueChange?: (raw: string) => void;
-    onNumberChange?: (num: number | null) => void;
-    mode?: NumericMode;
-    decimalScale?: number;
-    maxDecimalScale?: number;
-    scale?: number;
-    min?: number;
-    max?: number;
-    allowNegative?: boolean;
-    decimalSeparator?: DecimalSeparator;
-    formatOnBlur?: FormatOnBlur;
-    clampOnBlur?: boolean;
-}
-declare const NumericInput: react.ForwardRefExoticComponent<NumericInputProps & react.RefAttributes<HTMLInputElement>>;
-
-declare const textareaVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type TextareaVariant = VariantProps<typeof textareaVariants>['variant'];
-interface TextareaProps extends SharedComponentProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
-    variant?: TextareaVariant;
-    textareaClassName?: string;
-    onValueChange?: (value: string) => void;
-    suffix?: ReactNode;
-}
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-
 declare function Card$1({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function CardHeader$1({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function CardTitle$1({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
@@ -238,230 +230,297 @@ declare function CardContent$1({ className, ...props }: react.ComponentProps<'di
 declare function CardFooter$1({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption$2 = {
+    /**
+     * Visible label shown in the input and dropdown.
+     */
     label: string;
+    /**
+     * Actual value of the option.
+     */
     value: string | number;
+    /**
+     * Secondary description for the option when the UI needs extra context.
+     */
     description?: string;
+    /**
+     * Alternate value used specifically for searching.
+     */
     searchValue?: string;
+    /**
+     * Marks the option as unavailable for selection.
+     */
     disabled?: boolean;
 };
+type ComboboxAsyncConfig = {
+    /**
+     * Remote search callback fired when the user types.
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Callback for loading more data when the dropdown reaches the end.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Indicates whether more remote data is available.
+     */
+    hasMore?: boolean;
+    /**
+     * Whether to reset the search term when the field is focused again.
+     */
+    resetSearchOnFocus?: boolean;
+    /**
+     * Whether to restore the selected option on blur if nothing new is chosen.
+     */
+    restoreSelectedOnBlur?: boolean;
+};
 interface ComboboxProps$1 extends SharedComponentProps {
+    /**
+     * Option list rendered in the dropdown.
+     */
     options: ComboboxOption$2[];
+    /**
+     * Currently selected value.
+     */
     value?: string | number;
+    /**
+     * Placeholder shown when no value is selected.
+     */
     placeholder?: string;
-    onChange?: (value: ComboboxOption$2['value']) => void;
-    onInputChange?: (value: string) => void;
-    loading?: boolean;
-    disabled?: boolean;
-    searchPlaceholder?: string;
-    helperId?: string;
-    errorId?: string;
-    allowClear?: boolean;
-    onClear?: () => void;
-    portal?: boolean;
-}
-declare const Combobox$1: react.ForwardRefExoticComponent<ComboboxProps$1 & react.RefAttributes<HTMLInputElement>>;
-
-type ComboboxOption$1 = {
-    label: string;
-    value: string | number;
-    description?: string;
-    searchValue?: string;
-    disabled?: boolean;
-};
-interface AsyncComboboxProps extends SharedComponentProps {
-    options: ComboboxOption$1[];
-    value?: string | number;
-    placeholder?: string;
-    onChange?: (value: ComboboxOption$1['value']) => void;
+    /**
+     * Callback fired when the user selects an option.
+     */
+    onChange?: (value: ComboboxOption$2['value']) => void;
+    /**
+     * Callback fired when the input text changes.
+     */
     onInputChange?: (value: string) => void;
-    onInputFocus?: () => void;
-    onScrollEnd?: () => void;
+    /**
+     * Manual callback for loading more items at the end of the list.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Indicates whether more data can be loaded.
+     */
+    hasMore?: boolean;
+    /**
+     * Configuration for async or remote-search behavior.
+     */
+    asyncConfig?: ComboboxAsyncConfig;
+    /**
+     * Loading state while data is being fetched.
+     */
     loading?: boolean;
+    /**
+     * Disables the entire combobox.
+     */
     disabled?: boolean;
+    /**
+     * Placeholder specifically for the search input.
+     */
     searchPlaceholder?: string;
+    /**
+     * `id` used by helper text for accessibility linkage.
+     */
     helperId?: string;
+    /**
+     * `id` used by error text for accessibility linkage.
+     */
     errorId?: string;
+    /**
+     * Enables a button for clearing the current value.
+     */
     allowClear?: boolean;
+    /**
+     * Callback fired when the current value is cleared.
+     */
     onClear?: () => void;
+    /**
+     * Renders the dropdown in a portal outside the current layout.
+     */
     portal?: boolean;
-}
-declare const AsyncCombobox: react.ForwardRefExoticComponent<AsyncComboboxProps & react.RefAttributes<HTMLInputElement>>;
-
-type MultiSelectOption = {
-    label: string;
-    value: string | number;
-    disabled?: boolean;
-    searchValue?: string;
-};
-interface MultiSelectProps extends SharedComponentProps {
-    options: MultiSelectOption[];
-    value?: Array<MultiSelectOption['value']>;
-    placeholder?: string;
-    onChange?: (value: Array<MultiSelectOption['value']>) => void;
-    onSearch?: (value: string) => void;
-    loading?: boolean;
-    disabled?: boolean;
-    searchable?: boolean;
-    searchPlaceholder?: string;
-}
-declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLButtonElement>>;
-
-/**
- * Vertical form wrapper that keeps consistent spacing between fields.
- * @remarks
- * Extend `className` or pass native form props while maintaining consistent letter spacing for each child row.
- */
-declare function Form({ className, ...props }: FormHTMLAttributes<HTMLFormElement>): react_jsx_runtime.JSX.Element;
-interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
-    label?: ReactNode;
-    helperText?: ReactNode;
-    errorMessage?: ReactNode;
-    required?: boolean;
-    htmlFor?: string;
-}
-/**
- * Grid-aligned form field wrapper for label/control/description clusters.
- */
-declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * Container for a single form item to stack label, control, and messages vertically.
- */
-declare const FormItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
-/**
- * Styled label with strong typography and surface-aware coloring.
- */
-declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;
-/**
- * Flex container that aligns inputs and accessory controls horizontally.
- */
-declare const FormControl: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
-/**
- * Neutral description text for a form field.
- */
-declare const FormDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
-/**
- * Inline error message text for destructive validation states.
- */
-declare const FormMessage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
-
-type SelectOption = {
-    label: ReactNode;
-    value: string | number;
-    disabled?: boolean;
-};
-type Option = SelectOption;
-declare const triggerVariants$1: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SelectVariant$1 = VariantProps<typeof triggerVariants$1>['variant'];
-interface SelectProps extends SharedComponentProps, Omit<SelectPrimitive.SelectProps, 'defaultValue' | 'value' | 'children' | 'onValueChange'> {
-    options: SelectOption[];
-    value?: string | number;
-    defaultValue?: string | number;
-    placeholder?: string;
-    onChange?: (value: SelectOption['value']) => void;
-    variant?: SelectVariant$1;
-}
-/**
- * Select field powered by Radix primitives with customizable trigger variants and accessible helpers.
- * @remarks
- * Provide `options`, manage `value`/`defaultValue`, and style via `variant` (default/outline/ghost) plus `size` (sm/md/lg); show helper/error text and `loading`.
- */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
-
-type SearchableSelectOption = {
-    label: ReactNode;
-    value: string | number;
-    disabled?: boolean;
-    searchValue?: string;
-};
-declare const triggerVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SelectVariant = VariantProps<typeof triggerVariants>['variant'];
-interface SearchableSelectProps extends SharedComponentProps, Omit<SelectPrimitive.SelectProps, 'defaultValue' | 'value' | 'children' | 'onValueChange'> {
-    options: SearchableSelectOption[];
-    value?: string | number;
-    defaultValue?: string | number;
-    placeholder?: string;
-    onChange?: (value: SearchableSelectOption['value']) => void;
-    variant?: SelectVariant;
-    onSearch?: (query: string) => void;
-    loading?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    searchPlaceholder?: string;
-}
-declare const SearchableSelect: react.ForwardRefExoticComponent<SearchableSelectProps & react.RefAttributes<HTMLButtonElement>>;
-
-type Trend = 'up' | 'down' | 'flat';
-interface StatProps extends SharedComponentProps {
-    value: ReactNode;
-    helper?: ReactNode;
-    delta?: ReactNode;
-    trend?: Trend;
+    /**
+     * Extra class names for the dropdown menu.
+     */
+    dropdownClassName?: string;
+    /**
+     * Overrides the maximum height of the dropdown.
+     */
+    dropdownMaxHeight?: number;
+    /**
+     * Keeps error styling without rendering the error text below the field.
+     */
+    hideErrorMessage?: boolean;
 }
 /**
- * Metric card that exposes a primary `value`, optional `delta`, and severity-aware `trend` indicator.
- * @remarks
- * Accepts `size` (sm/md/lg), shows `helper` or helper text, and can render `loading`/`disabled` states while aligning helper/error messaging.
+ * Legacy `main-fe` combobox with remote search and load-more support.
  */
-declare function Stat({ label, value, helper, delta, trend, helperText, errorMessage, loading, disabled, size, className, style, }: StatProps): react_jsx_runtime.JSX.Element;
+declare const Combobox$1: react.ForwardRefExoticComponent<ComboboxProps$1 & react.RefAttributes<HTMLInputElement>>;
 
 type DataTableSortDirection$1 = 'asc' | 'desc';
 type DataTableAlign$1 = 'left' | 'center' | 'right';
 type DataTableSortState$1 = {
+    /**
+     * `key` of the column currently being sorted.
+     */
     key: string;
+    /**
+     * Current sort direction.
+     */
     direction: DataTableSortDirection$1;
 };
 type DataTableColumn$1<T> = {
+    /**
+     * Unique identifier of the column.
+     */
     key: string;
+    /**
+     * Visible header content of the column.
+     */
     title: ReactNode;
+    /**
+     * Record field used as the default data source.
+     */
     dataIndex?: keyof T;
+    /**
+     * Fixed or relative width of the column.
+     */
     width?: number | string;
+    /**
+     * Custom renderer for the cell content.
+     */
     render?: (value: T[keyof T] | undefined, record: T, index: number) => ReactNode;
+    /**
+     * Enables or disables sorting for the column.
+     */
     sortable?: boolean;
+    /**
+     * Custom comparator used for client-side sorting.
+     */
     sorter?: (a: T, b: T) => number;
+    /**
+     * Function that returns a dedicated value for sorting.
+     */
     sortValue?: (record: T) => string | number | Date | null | undefined;
+    /**
+     * Per-column header alignment override.
+     */
     headerAlign?: DataTableAlign$1;
+    /**
+     * Per-column cell alignment override.
+     */
     cellAlign?: DataTableAlign$1;
 };
 type DataTablePagination$1 = {
+    /**
+     * Current page.
+     */
     page: number;
+    /**
+     * Number of rows per page.
+     */
     pageSize: number;
+    /**
+     * Total number of records.
+     */
     total: number;
+    /**
+     * Callback fired when the page changes.
+     */
     onChange: (page: number) => void;
+    /**
+     * Page-size options shown in the dropdown.
+     */
     pageSizeOptions?: number[];
+    /**
+     * Callback fired when page size changes.
+     */
     onPageSizeChange?: (pageSize: number) => void;
 };
 type RowKey$1 = string | number;
 type DataTableRowSelection$1 = {
+    /**
+     * Row keys that are currently selected.
+     */
     selectedRowKeys: Array<RowKey$1>;
+    /**
+     * Callback fired when the selected rows change.
+     */
     onChange: (selectedRowKeys: Array<RowKey$1>) => void;
 };
 type DataTableProps$1<T> = {
+    /**
+     * Column configuration of the table.
+     */
     columns: Array<DataTableColumn$1<T>>;
+    /**
+     * Source data rendered by the table.
+     */
     data: T[];
+    /**
+     * How to resolve a unique key for each row.
+     */
     rowKey: keyof T | ((record: T) => RowKey$1);
+    /**
+     * Loading state of the table.
+     */
     loading?: boolean;
+    /**
+     * Content shown when the table has no data.
+     */
     emptyText?: ReactNode;
+    /**
+     * Pagination configuration.
+     */
     pagination?: DataTablePagination$1;
+    /**
+     * Current sort state when controlled from the parent.
+     */
     sort?: DataTableSortState$1 | null;
+    /**
+     * Callback fired when sort state changes.
+     */
     onSortChange?: (sort: DataTableSortState$1 | null) => void;
+    /**
+     * Sorting mode handled on the client or server.
+     */
     sortMode?: 'client' | 'server';
+    /**
+     * Callback fired when a row is clicked.
+     */
     onRowClick?: (record: T) => void;
+    /**
+     * Row-selection configuration.
+     */
     rowSelection?: DataTableRowSelection$1;
+    /**
+     * Renderer for the per-row action column.
+     */
     renderActions?: (record: T) => ReactNode;
+    /**
+     * Width of the action column.
+     */
+    actionColumnWidth?: number | string;
+    /**
+     * Extra class names for the table wrapper.
+     */
     className?: string;
+    /**
+     * Default alignment for all headers.
+     */
     headerAlign?: DataTableAlign$1;
+    /**
+     * Default alignment for all cells.
+     */
     cellAlign?: DataTableAlign$1;
+    /**
+     * Sticky offset for header or fixed columns when the layout has a top bar.
+     */
     stickyOffset?: number;
-    /** When false, table container does not scroll (overflow-visible). Default true. */
-    scrollable?: boolean;
 };
-declare function DataTable$1<T>({ columns, data, rowKey, loading, emptyText, pagination, sort, onSortChange, sortMode, onRowClick, rowSelection, renderActions, className, headerAlign, stickyOffset, scrollable, }: DataTableProps$1<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Legacy `main-fe` data table with sorting, selection, actions, and pagination.
+ */
+declare function DataTable$1<T>({ columns, data, rowKey, loading, emptyText, pagination, sort, onSortChange, sortMode, onRowClick, rowSelection, renderActions, actionColumnWidth, className, headerAlign, stickyOffset, }: DataTableProps$1<T>): react_jsx_runtime.JSX.Element;
 declare const Table$1: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
 declare const TableHeader$1: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody$1: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
@@ -470,1342 +529,957 @@ declare const TableCell$1: react.ForwardRefExoticComponent<TdHTMLAttributes<HTML
     as?: "td" | "th";
 } & react.RefAttributes<HTMLTableCellElement>>;
 
-type PaginationInfo = {
-    page: number;
-    pageSize: number;
-    total: number;
-    totalPages: number;
-    showingStart: number;
-    showingEnd: number;
-};
-type PaginationProps = {
-    page: number;
-    pageSize: number;
-    total: number;
-    onChange: (page: number) => void;
-    pageSizeOptions?: number[];
-    onPageSizeChange?: (pageSize: number) => void;
-    className?: string;
-    showFirstLast?: boolean;
-    label?: (info: PaginationInfo) => ReactNode;
-};
-declare const Pagination: ({ page, pageSize, total, onChange, pageSizeOptions, onPageSizeChange, className, showFirstLast, label, }: PaginationProps) => react_jsx_runtime.JSX.Element;
-
-type PageTitleProps = {
-    /**
-     * Tiêu đề chính của trang.
-     * Main title of the page.
-     * 页面主标题。
-     */
-    title: string;
-    /**
-     * Mô tả ngắn nằm dưới tiêu đề.
-     * Short description shown below the title.
-     * 显示在标题下方的简短描述。
-     */
-    subtitle?: string;
+type DateRangePickerValue = {
     /**
-     * Mật độ hiển thị của header trang.
-     * Visual density of the page header.
-     * 页面头部的显示密度。
+     * Start date in string or ISO format.
      */
-    size?: 'default' | 'compact';
+    startDate?: string | null;
     /**
-     * Slot hiển thị bên phải phần header.
-     * Slot rendered on the right side of the header.
-     * 显示在头部右侧的插槽。
+     * End date in string or ISO format.
      */
-    rightSlot?: ReactNode;
+    endDate?: string | null;
 };
-declare function PageTitle$1({ title, subtitle, size, rightSlot, }: PageTitleProps): react_jsx_runtime.JSX.Element;
-
-type SectionTitleProps = {
+interface DateRangePickerProps {
     /**
-     * Tiêu đề chính của section.
-     * Main title of the section.
-     * 区块主标题。
+     * Current date range value of the component.
      */
-    title: string;
+    value?: DateRangePickerValue;
     /**
-     * Mô tả ngắn giải thích section.
-     * Short description that explains the section.
-     * 用于说明该区块的简短描述。
+     * Callback fired when the user confirms a new date range.
      */
-    subtitle?: string;
+    onChange: (next: Required<DateRangePickerValue>) => void;
     /**
-     * Icon hiển thị bên trái title.
-     * Icon displayed to the left of the title.
-     * 显示在标题左侧的图标。
+     * Label shown above the picker.
      */
-    icon?: ReactNode;
+    label?: string;
     /**
-     * Class tùy chỉnh cho wrapper của icon.
-     * Custom class for the icon wrapper.
-     * 图标容器的自定义 class。
+     * Placeholder shown before a range is selected.
      */
-    iconClassName?: string;
+    placeholder?: string;
     /**
-     * Slot hiển thị bên phải section title.
-     * Slot rendered on the right side of the section title.
-     * 显示在区块标题右侧的插槽。
+     * Extra class names for the picker wrapper.
      */
-    rightSlot?: ReactNode;
-};
-declare function SectionTitle$1({ title, subtitle, icon, iconClassName, rightSlot, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
-
-interface TabItem {
-    value: string;
-    label: ReactNode;
-    content: ReactNode;
-    badge?: ReactNode;
-}
-interface TabsProps {
-    items: TabItem[];
-    defaultValue?: string;
-    onChange?: (value: string) => void;
     className?: string;
-    listClassName?: string;
-    contentClassName?: string;
-}
-declare function Tabs({ items, defaultValue, onChange, className, listClassName, contentClassName, }: TabsProps): react_jsx_runtime.JSX.Element;
-
-interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
-    label?: ReactNode;
-    size?: LoadingSpinnerProps['size'];
 }
-declare function Loading({ label, size, className, ...props }: LoadingProps): react_jsx_runtime.JSX.Element;
+/**
+ * Date-range picker for legacy `main-fe` screens.
+ */
+declare function DateRangePicker({ value, onChange, label, placeholder, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
-type TooltipSide$2 = 'top' | 'right' | 'bottom' | 'left';
-type TooltipAlign$2 = 'start' | 'center' | 'end';
-type TooltipProps = {
+type QuickOption = {
     /**
-     * Nội dung tooltip hiển thị khi hover/focus.
-     * Tooltip content shown on hover or focus.
-     * 悬停或聚焦时显示的 tooltip 内容。
+     * Visible label of the quick option.
      */
-    content: ReactNode;
+    label: string;
     /**
-     * Phần tử trigger của tooltip.
-     * Trigger element for the tooltip.
-     * tooltip 的触发元素。
+     * Value applied to the picker when the quick option is chosen.
      */
-    children: ReactNode;
+    value: string;
+};
+interface DateTimePickerProps {
     /**
-     * Vị trí tooltip so với trigger.
-     * Tooltip side relative to the trigger.
-     * tooltip 相对触发元素的位置。
+     * Label shown above the picker.
      */
-    side?: TooltipSide$2;
+    label?: ReactNode;
     /**
-     * Cách canh tooltip theo trục phụ.
-     * Tooltip alignment on the secondary axis.
-     * tooltip 在次轴上的对齐方式。
+     * Placeholder shown when no value is set.
      */
-    align?: TooltipAlign$2;
+    placeholder?: string;
     /**
-     * Class bổ sung cho wrapper của trigger.
-     * Extra class names for the trigger wrapper.
-     * 触发器容器的额外 class。
+     * Current value of the picker.
      */
-    className?: string;
+    value?: string;
     /**
-     * Class bổ sung cho panel tooltip.
-     * Extra class names for the tooltip panel.
-     * tooltip 面板的额外 class。
+     * Callback fired when the date-time value changes.
      */
-    contentClassName?: string;
+    onChange: (value: string) => void;
     /**
-     * Cho phép nội dung tooltip xuống dòng.
-     * Allows tooltip content to wrap onto multiple lines.
-     * 是否允许 tooltip 内容换行。
+     * Disables the entire picker.
      */
-    wrap?: boolean;
+    disabled?: boolean;
     /**
-     * Render tooltip bằng portal ra `document.body`.
-     * Renders the tooltip through a portal into `document.body`.
-     * 通过 portal 将 tooltip 渲染到 `document.body`。
+     * Error message shown below the field.
      */
-    portal?: boolean;
-};
-declare function Tooltip({ content, children, side, align, className, contentClassName, wrap, portal, }: TooltipProps): react_jsx_runtime.JSX.Element;
-
-type TooltipSide$1 = 'top' | 'right' | 'bottom' | 'left';
-type TooltipAlign$1 = 'start' | 'center' | 'end';
-type OverflowTooltipProps = {
-    content: ReactNode;
-    children: ReactNode;
-    targetRef?: RefObject<HTMLElement | null>;
-    side?: TooltipSide$1;
-    align?: TooltipAlign$1;
-    className?: string;
-    contentClassName?: string;
-    wrap?: boolean;
-    portal?: boolean;
-    disabled?: boolean;
-    watch?: ReadonlyArray<unknown>;
-};
-declare function OverflowTooltip({ content, children, targetRef, side, align, className, contentClassName, wrap, portal, disabled, watch, }: OverflowTooltipProps): react_jsx_runtime.JSX.Element;
-
-type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
-type TooltipAlign = 'start' | 'center' | 'end';
-type LineClampTooltipProps = {
-    text: string;
-    lineClamp?: number;
-    className?: string;
-    side?: TooltipSide;
-    align?: TooltipAlign;
-    wrap?: boolean;
-    portal?: boolean;
-};
-declare function LineClampTooltip({ text, lineClamp, className, side, align, wrap, portal, }: LineClampTooltipProps): react_jsx_runtime.JSX.Element;
-
-type TruncatedTextProps = {
-    email: string;
-};
-declare function TruncatedText({ email, }: TruncatedTextProps): react_jsx_runtime.JSX.Element;
-
-type SidebarItem$1 = {
+    errorMessage?: string;
     /**
-     * Định danh duy nhất của item.
-     * Unique identifier of the sidebar item.
-     * 侧边栏项的唯一标识。
+     * Extra class names for the picker wrapper.
      */
-    id: string;
+    className?: string;
     /**
-     * Tiêu đề hiển thị trực tiếp trên menu.
-     * Title rendered directly in the menu.
-     * 菜单中直接显示的标题。
+     * Format used to parse the incoming `value`.
      */
-    title?: string;
+    parseFormat?: string;
     /**
-     * Khóa i18n nếu title sẽ được dịch ở tầng ngoài.
-     * i18n key when the title is translated outside this component.
-     * 当标题由外部国际化处理时使用的 i18n key。
+     * Format used for outgoing values passed to `onChange`.
      */
-    titleKey?: string;
+    outputFormat?: string;
     /**
-     * Icon của item, có thể là ReactNode hoặc component.
-     * Item icon, either a ReactNode or a component type.
-     * 菜单项图标，可传 ReactNode 或组件类型。
+     * Display format for the text shown in the trigger.
      */
-    icon?: ReactNode | ElementType;
+    displayFormat?: string;
     /**
-     * Đường dẫn điều hướng khi click item.
-     * Navigation target when the item is clicked.
-     * 点击菜单项后的跳转地址。
+     * Minimum selectable date-time.
      */
-    href?: string;
+    minDateTime?: Date;
     /**
-     * Quyền yêu cầu để item được hiển thị.
-     * Required permission(s) for the item to be visible.
-     * 显示该菜单项所需的权限。
+     * List of quick-select options.
      */
-    permission?: string | string[];
+    quickOptions?: QuickOption[];
     /**
-     * Danh sách item con.
-     * Nested child items.
-     * 子菜单项列表。
+     * Callback fired when a quick option is selected.
      */
-    children?: SidebarItem$1[];
-};
-type PermissionChecker = (permission: string | string[] | undefined, userPermissions?: string[]) => boolean;
-interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    onQuickSelect?: (value: string) => void;
     /**
-     * Cấu hình toàn bộ item sẽ render trong sidebar.
-     * Full item tree rendered inside the sidebar.
-     * 侧边栏中要渲染的完整菜单树。
+     * Callback fired when the current value is cleared.
      */
-    items: SidebarItem$1[];
+    onClear?: () => void;
     /**
-     * Danh sách quyền hiện tại của người dùng.
-     * Current permission list of the active user.
-     * 当前用户的权限列表。
+     * Title for the quick-range section.
      */
-    userPermissions?: string[];
+    quickRangesLabel?: string;
     /**
-     * Hàm kiểm tra quyền tùy chỉnh.
-     * Custom permission checking function.
-     * 自定义权限校验函数。
+     * Label shown for the clear action.
      */
-    permissionChecker?: PermissionChecker;
+    clearLabel?: string;
     /**
-     * `id` của item đang active.
-     * `id` of the currently active item.
-     * 当前激活菜单项的 `id`。
+     * Renders the picker panel in a portal outside the current layout.
      */
-    activeItemId?: string;
+    portal?: boolean;
+}
+/**
+ * Legacy `main-fe` date-time picker with quick options and custom formats.
+ */
+declare function DateTimePicker({ label, placeholder, value, onChange, disabled, errorMessage, className, parseFormat, outputFormat, displayFormat, minDateTime, quickOptions, onQuickSelect, onClear, quickRangesLabel, clearLabel, portal, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+
+declare const inputVariants$1: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariant$1 = VariantProps<typeof inputVariants$1>['variant'];
+interface InputProps$1 extends SharedComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'prefix'> {
     /**
-     * Callback khi người dùng click vào item.
-     * Callback fired when the user clicks an item.
-     * 用户点击菜单项时触发的回调。
+     * Visual variant of the input.
      */
-    onItemClick?: (item: SidebarItem$1) => void;
+    variant?: InputVariant$1;
     /**
-     * Class bổ sung cho danh sách cấp 1.
-     * Extra class names for the top-level list.
-     * 顶层列表的额外 class。
+     * Content rendered on the left side of the input.
      */
-    listClassName?: string;
+    prefix?: ReactNode;
     /**
-     * Class bổ sung cho danh sách lồng nhau.
-     * Extra class names for nested lists.
-     * 嵌套列表的额外 class。
+     * Content rendered on the right side of the input.
      */
-    nestedListClassName?: string;
+    suffix?: ReactNode;
     /**
-     * Class bổ sung cho từng item.
-     * Extra class names applied to each item.
-     * 每个菜单项的额外 class。
+     * Class names applied directly to the `<input>` element.
      */
-    itemClassName?: string;
+    inputClassName?: string;
     /**
-     * Khoảng thụt lề cho mỗi cấp con.
-     * Indentation size for each nested level.
-     * 每一级嵌套的缩进宽度。
+     * Callback that returns the current string value of the input.
      */
-    indentSize?: number;
+    onValueChange?: (value: string) => void;
     /**
-     * Nhãn trợ năng cho phần tử `nav`.
-     * Accessibility label for the `nav` element.
-     * `nav` 元素的无障碍标签。
+     * Enables or disables the password visibility toggle when `type="password"`.
      */
-    ariaLabel?: string;
+    showPasswordToggle?: boolean;
+}
+/**
+ * Legacy `main-fe` input with prefix/suffix plus helper/error support.
+ */
+declare const Input$1: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
+
+type MultiTabItem = {
     /**
-     * Cho phép thu gọn hoặc mở rộng sidebar.
-     * Enables collapsing and expanding the sidebar.
-     * 是否允许侧边栏折叠/展开。
+     * Visible label rendered on the tab.
      */
-    collapsible?: boolean;
+    label: ReactNode;
     /**
-     * Trạng thái thu gọn có kiểm soát từ bên ngoài.
-     * Controlled collapsed state from the parent.
-     * 由外部控制的折叠状态。
+     * Identifier value of the tab.
      */
-    collapsed?: boolean;
+    value: string;
+};
+interface MultiTabsProps {
     /**
-     * Trạng thái thu gọn mặc định khi dùng uncontrolled mode.
-     * Default collapsed state in uncontrolled mode.
-     * 非受控模式下的默认折叠状态。
+     * List of tabs to render.
      */
-    defaultCollapsed?: boolean;
+    items: MultiTabItem[];
     /**
-     * Callback khi trạng thái thu gọn thay đổi.
-     * Callback fired when the collapsed state changes.
-     * 折叠状态变化时触发的回调。
+     * Currently selected tab value.
      */
-    onCollapseChange?: (collapsed: boolean) => void;
+    value: string;
     /**
-     * Chiều rộng sidebar khi đang thu gọn.
-     * Sidebar width when collapsed.
-     * 折叠时的侧边栏宽度。
+     * Callback fired when the user switches tabs.
      */
-    collapsedWidth?: number | string;
+    onChange: (value: string) => void;
     /**
-     * Chiều rộng sidebar khi đang mở rộng.
-     * Sidebar width when expanded.
-     * 展开时的侧边栏宽度。
+     * Extra class names for the tab group wrapper.
      */
-    expandedWidth?: number | string;
+    className?: string;
     /**
-     * Nhãn trợ năng cho nút collapse/expand.
-     * Accessibility label for the collapse/expand button.
-     * 折叠/展开按钮的无障碍标签。
+     * Inline styles for the tab group wrapper.
      */
-    collapseButtonLabel?: string;
+    style?: CSSProperties;
 }
-
-declare function Sidebar({ items, userPermissions, permissionChecker, activeItemId, onItemClick, listClassName, nestedListClassName, itemClassName, indentSize, ariaLabel, className, collapsible, collapsed, defaultCollapsed, onCollapseChange, collapsedWidth, expandedWidth, collapseButtonLabel, style, ...rest }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-type SidebarItemProps = {
-    item: SidebarItem$1;
-    depth: number;
-    activeItemId?: string;
-    onItemClick?: (item: SidebarItem$1) => void;
-    indentSize?: number;
-    nestedListClassName?: string;
-    itemClassName?: string;
-    collapsed?: boolean;
-};
-declare function SidebarItem({ item, depth, activeItemId, onItemClick, indentSize, nestedListClassName, itemClassName, collapsed, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
-
-declare const defaultPermissionChecker: PermissionChecker;
-declare function filterSidebarItems(items: SidebarItem$1[], userPermissions: string[] | undefined, permissionChecker?: PermissionChecker): SidebarItem$1[];
-declare function hasActiveDescendant(item: SidebarItem$1, activeItemId?: string): boolean;
-
-type ArgonSidebarHeaderRender = (state: {
-    collapsed: boolean;
-    hoverExpanded: boolean;
-}) => React.ReactNode;
-type ArgonSidebarProps = SidebarProps & {
-    /**
-     * Callback khi trạng thái hover mở rộng thay đổi.
-     * Callback fired when hover-expansion state changes.
-     * 悬停展开状态变化时触发的回调。
-     */
-    onHoverChange?: (hovered: boolean) => void;
-    /**
-     * Nội dung header hoặc hàm render header động.
-     * Header content or a render function for dynamic header content.
-     * 头部内容，或用于动态渲染头部的函数。
-     */
-    header?: React.ReactNode | ArgonSidebarHeaderRender;
-};
-declare function ArgonSidebar({ items, userPermissions, permissionChecker, activeItemId, onItemClick, listClassName, nestedListClassName, itemClassName, indentSize, ariaLabel, className, collapsible, collapsed, defaultCollapsed, onCollapseChange, collapsedWidth, expandedWidth, collapseButtonLabel, style, onHoverChange, header, ...rest }: ArgonSidebarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Segmented tab control for legacy `main-fe` screens.
+ */
+declare function MultiTabs({ items, value, onChange, className, style, }: MultiTabsProps): react_jsx_runtime.JSX.Element;
 
 type MainFePageTitleProps = {
     /**
-     * Tiêu đề chính của trang.
      * Main title of the page.
-     * 页面主标题。
      */
     title: string;
     /**
-     * Mô tả ngắn nằm dưới tiêu đề.
      * Short description shown below the title.
-     * 显示在标题下方的简短描述。
      */
     subtitle?: string;
     /**
-     * Mật độ hiển thị của header trang.
      * Visual density of the page header.
-     * 页面头部的显示密度。
      */
     size?: 'default' | 'compact';
     /**
-     * Slot hiển thị phía trên title, thường dùng cho breadcrumb hoặc status.
      * Slot rendered above the title, commonly used for breadcrumbs or status tags.
-     * 显示在标题上方的插槽，常用于面包屑或状态标签。
      */
     topSlot?: ReactNode;
     /**
-     * Slot hiển thị phía bên phải phần header.
      * Slot rendered on the right side of the header.
-     * 显示在头部右侧的插槽。
      */
     rightSlot?: ReactNode;
 };
-declare function PageTitle({ title, subtitle, size, topSlot, rightSlot, }: MainFePageTitleProps): react_jsx_runtime.JSX.Element;
+/**
+ * Legacy page header for `main-fe` screens.
+ */
+declare function PageTitle$1({ title, subtitle, size, topSlot, rightSlot, }: MainFePageTitleProps): react_jsx_runtime.JSX.Element;
+
+type RemoteLoadingProps = {
+    /**
+     * Extra class names for the full-page loading wrapper.
+     */
+    className?: string;
+};
+/**
+ * Full-area loading state for remote or legacy screens.
+ */
+declare function RemoteLoading({ className }: RemoteLoadingProps): react_jsx_runtime.JSX.Element;
 
 type MainFeSectionTitleProps = {
     /**
-     * Tiêu đề chính của section.
      * Main title of the section.
-     * 区块主标题。
      */
     title: string;
     /**
-     * Mô tả ngắn giải thích section.
      * Short description that explains the section.
-     * 用于说明该区块的简短描述。
      */
     subtitle?: string;
     /**
-     * Icon hiển thị bên trái title.
      * Icon displayed to the left of the title.
-     * 显示在标题左侧的图标。
      */
     icon?: ReactNode;
     /**
-     * Class tùy chỉnh cho wrapper của icon.
      * Custom class for the icon wrapper.
-     * 图标容器的自定义 class。
      */
     iconClassName?: string;
     /**
-     * Slot hiển thị bên phải section title.
      * Slot rendered on the right side of the section title.
-     * 显示在区块标题右侧的插槽。
      */
     rightSlot?: ReactNode;
 };
-declare function SectionTitle({ title, subtitle, icon, iconClassName, rightSlot, }: MainFeSectionTitleProps): react_jsx_runtime.JSX.Element;
-
-type MultiTabItem = {
-    /**
-     * Nhãn hiển thị trên tab.
-     * Visible label rendered on the tab.
-     * Tab 上显示的标签文本。
-     */
-    label: ReactNode;
-    /**
-     * Giá trị định danh của tab.
-     * Identifier value of the tab.
-     * Tab 的标识值。
-     */
-    value: string;
-};
-interface MultiTabsProps {
-    /**
-     * Danh sách tab cần render.
-     * List of tabs to render.
-     * 需要渲染的 tab 列表。
-     */
-    items: MultiTabItem[];
-    /**
-     * Giá trị tab đang được chọn.
-     * Currently selected tab value.
-     * 当前选中的 tab 值。
-     */
-    value: string;
-    /**
-     * Callback khi người dùng đổi tab.
-     * Callback fired when the user switches tabs.
-     * 用户切换 tab 时触发的回调。
-     */
-    onChange: (value: string) => void;
-    /**
-     * Class bổ sung cho wrapper của nhóm tab.
-     * Extra class names for the tab group wrapper.
-     * tab 组容器的额外 class。
-     */
-    className?: string;
-    /**
-     * Inline style cho wrapper của nhóm tab.
-     * Inline styles for the tab group wrapper.
-     * tab 组容器的内联样式。
-     */
-    style?: CSSProperties;
-}
-declare function MultiTabs({ items, value, onChange, className, style, }: MultiTabsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Section header for legacy `main-fe` cards and panels.
+ */
+declare function SectionTitle$1({ title, subtitle, icon, iconClassName, rightSlot, }: MainFeSectionTitleProps): react_jsx_runtime.JSX.Element;
 
 type StatTone = 'emerald' | 'sky' | 'violet' | 'rose';
 type StatCardProps = {
     /**
-     * Nhãn mô tả ý nghĩa của chỉ số.
      * Label describing what the metric represents.
-     * 用于说明指标含义的标签。
      */
     label: ReactNode;
     /**
-     * Giá trị chính cần nhấn mạnh.
      * Primary value that should be emphasized.
-     * 需要重点展示的主数值。
      */
     value: ReactNode;
     /**
-     * Tông màu chủ đạo của card.
      * Primary visual tone of the card.
-     * 卡片的主视觉色调。
      */
     tone?: StatTone;
     /**
-     * Icon hiển thị ở góc phải card.
      * Icon displayed in the right corner of the card.
-     * 显示在卡片右侧的图标。
      */
     icon?: ReactNode;
     /**
-     * Class bổ sung cho wrapper của card.
      * Extra class names for the card wrapper.
-     * 卡片容器的额外 class。
      */
     className?: string;
 };
+/**
+ * Metric card for highlighted stats in legacy dashboards or lists.
+ */
 declare function StatCard({ label, value, tone, icon, className, }: StatCardProps): react_jsx_runtime.JSX.Element;
 
-type RemoteLoadingProps = {
-    /**
-     * Class bổ sung cho wrapper loading toàn trang.
-     * Extra class names for the full-page loading wrapper.
-     * 全页加载容器的额外 class。
-     */
-    className?: string;
+type StatusAction = {
+    label: ReactNode;
+    color?: string;
+    href?: string;
+    onClick?: () => void;
 };
-declare function RemoteLoading({ className }: RemoteLoadingProps): react_jsx_runtime.JSX.Element;
+type StatusOption = {
+    value: string | number;
+    label: ReactNode;
+    color?: string;
+    action?: StatusAction;
+};
+type StatusPresentation = {
+    label: ReactNode;
+    color?: string;
+    action?: StatusAction;
+};
+declare function getStatusPresentation(status: string | number | null | undefined, options: StatusOption[]): StatusPresentation | null;
 
-type DateRangePickerValue = {
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'onChange'> {
     /**
-     * Ngày bắt đầu ở dạng string/ISO.
-     * Start date in string or ISO format.
-     * 字符串/ISO 格式的开始日期。
+     * Extra class names for the outer switch wrapper.
      */
-    startDate?: string | null;
+    className?: string;
     /**
-     * Ngày kết thúc ở dạng string/ISO.
-     * End date in string or ISO format.
-     * 字符串/ISO 格式的结束日期。
+     * Custom class for the switch track.
      */
-    endDate?: string | null;
-};
-interface DateRangePickerProps {
+    trackClassName?: string;
     /**
-     * Khoảng ngày hiện tại của component.
-     * Current date range value of the component.
-     * 组件当前的日期区间值。
+     * Custom class for the switch thumb.
      */
-    value?: DateRangePickerValue;
+    thumbClassName?: string;
     /**
-     * Callback khi người dùng xác nhận khoảng ngày mới.
-     * Callback fired when the user confirms a new date range.
-     * 用户确认新的日期区间时触发的回调。
+     * Callback that returns the next checked state.
      */
-    onChange: (next: Required<DateRangePickerValue>) => void;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * Legacy `main-fe` styled switch.
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
+type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends SharedComponentProps {
+    description?: ReactNode;
+    icon?: ReactNode;
+    tone?: AlertTone;
+    variant?: AlertVariant;
+    title?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Status-aware alert panel with selectable variants, helper text, and optional iconography.
+ * @remarks
+ * Use `variant` (default/info/success/warning/destructive) and `size` (sm/md/lg) to tune the tone, show `description` or `helperText`, and decorate with a spinner via `loading`.
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+type BreadcrumbItem = {
     /**
-     * Nhãn hiển thị phía trên picker.
-     * Label shown above the picker.
-     * 显示在选择器上方的标签。
+     * Visible content of the breadcrumb item.
      */
-    label?: string;
+    label: ReactNode;
     /**
-     * Placeholder khi chưa chọn ngày.
-     * Placeholder shown before a range is selected.
-     * 未选择日期时显示的占位文本。
+     * Callback fired when the item is clicked as a button.
      */
-    placeholder?: string;
+    onClick?: () => void;
     /**
-     * Class bổ sung cho wrapper của picker.
-     * Extra class names for the picker wrapper.
-     * 选择器容器的额外 class。
-     */
-    className?: string;
-}
-declare function DateRangePicker({ value, onChange, label, placeholder, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
-
-type QuickOption = {
-    /**
-     * Nhãn hiển thị của lựa chọn nhanh.
-     * Visible label of the quick option.
-     * 快捷选项的显示标签。
+     * Navigation URL when the item behaves as a link.
      */
-    label: string;
+    href?: string;
     /**
-     * Giá trị sẽ được áp vào picker khi chọn nhanh.
-     * Value applied to the picker when the quick option is chosen.
-     * 选择快捷项时写入 picker 的值。
+     * Marks the item as the current location.
      */
-    value: string;
+    current?: boolean;
 };
-interface DateTimePickerProps {
-    /**
-     * Nhãn hiển thị phía trên picker.
-     * Label shown above the picker.
-     * 显示在选择器上方的标签。
-     */
-    label?: ReactNode;
-    /**
-     * Placeholder khi chưa có giá trị.
-     * Placeholder shown when no value is set.
-     * 未设置值时显示的占位文本。
-     */
-    placeholder?: string;
-    /**
-     * Giá trị hiện tại của picker.
-     * Current value of the picker.
-     * picker 当前值。
-     */
-    value?: string;
-    /**
-     * Callback khi giá trị ngày giờ thay đổi.
-     * Callback fired when the date-time value changes.
-     * 日期时间值变化时触发的回调。
-     */
-    onChange: (value: string) => void;
-    /**
-     * Vô hiệu hóa toàn bộ picker.
-     * Disables the entire picker.
-     * 禁用整个选择器。
-     */
-    disabled?: boolean;
+type BreadcrumbProps = {
     /**
-     * Thông báo lỗi hiển thị dưới field.
-     * Error message shown below the field.
-     * 显示在字段下方的错误信息。
+     * List of breadcrumb items.
      */
-    errorMessage?: string;
+    items: BreadcrumbItem[];
     /**
-     * Class bổ sung cho wrapper của picker.
-     * Extra class names for the picker wrapper.
-     * 选择器容器的额外 class。
+     * Extra class names for the `nav` element.
      */
     className?: string;
     /**
-     * Format dùng để parse `value` đầu vào.
-     * Format used to parse the incoming `value`.
-     * 用于解析输入 `value` 的格式。
-     */
-    parseFormat?: string;
-    /**
-     * Format dùng để trả dữ liệu ra ngoài qua `onChange`.
-     * Format used for outgoing values passed to `onChange`.
-     * 通过 `onChange` 输出时使用的格式。
-     */
-    outputFormat?: string;
-    /**
-     * Format hiển thị cho phần text trong trigger.
-     * Display format for the text shown in the trigger.
-     * 触发器中显示文本所使用的格式。
-     */
-    displayFormat?: string;
-    /**
-     * Mốc ngày giờ nhỏ nhất được phép chọn.
-     * Minimum selectable date-time.
-     * 可选择的最小日期时间。
-     */
-    minDateTime?: Date;
-    /**
-     * Danh sách lựa chọn nhanh.
-     * List of quick-select options.
-     * 快捷选择项列表。
-     */
-    quickOptions?: QuickOption[];
-    /**
-     * Callback khi người dùng chọn một quick option.
-     * Callback fired when a quick option is selected.
-     * 用户选择快捷项时触发的回调。
-     */
-    onQuickSelect?: (value: string) => void;
-    /**
-     * Callback khi người dùng xóa giá trị hiện tại.
-     * Callback fired when the current value is cleared.
-     * 用户清空当前值时触发的回调。
-     */
-    onClear?: () => void;
-    /**
-     * Tiêu đề cho nhóm quick ranges.
-     * Title for the quick-range section.
-     * 快捷范围分组标题。
-     */
-    quickRangesLabel?: string;
-    /**
-     * Nhãn hiển thị cho hành động clear.
-     * Label shown for the clear action.
-     * 清空操作显示的标签。
-     */
-    clearLabel?: string;
-    /**
-     * Render panel bằng portal ra ngoài layout hiện tại.
-     * Renders the picker panel in a portal outside the current layout.
-     * 通过 portal 在当前布局外渲染面板。
+     * Character or node used to separate items.
      */
-    portal?: boolean;
-}
-declare function DateTimePicker({ label, placeholder, value, onChange, disabled, errorMessage, className, parseFormat, outputFormat, displayFormat, minDateTime, quickOptions, onQuickSelect, onClear, quickRangesLabel, clearLabel, portal, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+    separator?: ReactNode;
+};
+declare function Breadcrumb({ items, className, separator, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "confirm" | "secondary" | "ghost" | "create" | null | undefined;
+    variant?: "link" | "outline" | "destructive" | "default" | "confirm" | "secondary" | "ghost" | "create" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
 interface ButtonProps extends Omit<SharedComponentProps, 'size'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'className'> {
-    /**
-     * Biến thể giao diện của button.
-     * Visual variant of the button.
-     * 按钮的视觉变体。
-     */
     variant?: ButtonVariant;
-    /**
-     * Kích thước hiển thị của button.
-     * Visual size of the button.
-     * 按钮的显示尺寸。
-     */
     size?: ButtonSize;
-    /**
-     * Icon hiển thị trước nội dung chính.
-     * Icon rendered before the main content.
-     * 显示在主要内容前面的图标。
-     */
+    block?: boolean;
     startIcon?: ReactNode;
-    /**
-     * Icon hiển thị sau nội dung chính.
-     * Icon rendered after the main content.
-     * 显示在主要内容后面的图标。
-     */
     endIcon?: ReactNode;
-    /**
-     * Nội dung custom của button.
-     * Custom button content.
-     * 按钮的自定义内容。
-     */
     children?: ReactNode;
 }
+/**
+ * Primary action button with shadcn-inspired variants, helper text, and optional loading rewards.
+ * @remarks
+ * Support `variant` (default/destructive/outline/secondary/ghost/link) and `size` (sm/md/lg), adorn with icons, and surface helper or error text without needing custom wrappers.
+ */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | null | undefined;
+    variant?: "outline" | "default" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputVariant = VariantProps<typeof inputVariants>['variant'];
 interface InputProps extends SharedComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'prefix'> {
-    /**
-     * Biến thể giao diện của input.
-     * Visual variant of the input.
-     * 输入框的视觉变体。
-     */
     variant?: InputVariant;
-    /**
-     * Nội dung hiển thị ở mép trái input.
-     * Content rendered on the left side of the input.
-     * 显示在输入框左侧的内容。
-     */
     prefix?: ReactNode;
-    /**
-     * Nội dung hiển thị ở mép phải input.
-     * Content rendered on the right side of the input.
-     * 显示在输入框右侧的内容。
-     */
     suffix?: ReactNode;
-    /**
-     * Class áp trực tiếp lên thẻ `<input>`.
-     * Class names applied directly to the `<input>` element.
-     * 直接作用于 `<input>` 元素的 class。
-     */
     inputClassName?: string;
-    /**
-     * Callback trả về giá trị string hiện tại của input.
-     * Callback that returns the current string value of the input.
-     * 返回当前输入字符串值的回调。
-     */
     onValueChange?: (value: string) => void;
-    /**
-     * Bật hoặc tắt nút hiện/ẩn mật khẩu khi `type="password"`.
-     * Enables or disables the password visibility toggle when `type="password"`.
-     * 当 `type="password"` 时启用或禁用密码显隐切换按钮。
-     */
     showPasswordToggle?: boolean;
 }
+/**
+ * Accessible input surface with shadcn styling, optional prefix/suffix, and helpers for feedback.
+ * @remarks
+ * Swap `variant` (default/ghost/outline) and `size` (sm/md/lg), keep adornments with `prefix`/`suffix`, display helper/error text, and show a spinner via `loading`.
+ */
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
-type ComboboxOption = {
-    /**
-     * Nhãn hiển thị trong input và dropdown.
-     * Visible label shown in the input and dropdown.
-     * 显示在输入框和下拉列表中的标签。
-     */
+type FormatOnBlur = 'trim' | 'fixed' | 'none';
+type NumericMode = 'integer' | 'decimal';
+type DecimalSeparator = '.' | ',' | 'auto';
+
+interface NumericInputProps extends Omit<InputProps, 'type' | 'inputMode' | 'value' | 'defaultValue' | 'onChange' | 'onValueChange'>, Pick<InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onFocus' | 'name'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (raw: string) => void;
+    onNumberChange?: (num: number | null) => void;
+    mode?: NumericMode;
+    decimalScale?: number;
+    maxDecimalScale?: number;
+    scale?: number;
+    min?: number;
+    max?: number;
+    allowNegative?: boolean;
+    decimalSeparator?: DecimalSeparator;
+    formatOnBlur?: FormatOnBlur;
+    clampOnBlur?: boolean;
+}
+declare const NumericInput: react.ForwardRefExoticComponent<NumericInputProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const textareaVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextareaVariant = VariantProps<typeof textareaVariants>['variant'];
+interface TextareaProps extends SharedComponentProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    variant?: TextareaVariant;
+    textareaClassName?: string;
+    onValueChange?: (value: string) => void;
+    suffix?: ReactNode;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare function Card({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+type ComboboxOption$1 = {
     label: string;
-    /**
-     * Giá trị thật của option.
-     * Actual value of the option.
-     * 选项的实际值。
-     */
     value: string | number;
-    /**
-     * Mô tả phụ của option nếu UI muốn hiển thị thêm.
-     * Secondary description for the option when the UI needs extra context.
-     * 当界面需要更多说明时可显示的次级描述。
-     */
     description?: string;
-    /**
-     * Giá trị dùng riêng cho việc tìm kiếm.
-     * Alternate value used specifically for searching.
-     * 专门用于搜索匹配的值。
-     */
     searchValue?: string;
-    /**
-     * Đánh dấu option không thể chọn.
-     * Marks the option as unavailable for selection.
-     * 标记该选项不可选。
-     */
     disabled?: boolean;
 };
-type ComboboxAsyncConfig = {
-    /**
-     * Callback tìm kiếm từ xa mỗi khi người dùng nhập.
-     * Remote search callback fired when the user types.
-     * 用户输入时触发的远程搜索回调。
-     */
-    onSearch?: (value: string) => void;
-    /**
-     * Callback tải thêm dữ liệu khi dropdown chạm cuối.
-     * Callback for loading more data when the dropdown reaches the end.
-     * 下拉列表滚动到底部时加载更多数据的回调。
-     */
-    onLoadMore?: () => void;
-    /**
-     * Cho biết còn dữ liệu để tải thêm hay không.
-     * Indicates whether more remote data is available.
-     * 是否还有更多远程数据可加载。
-     */
-    hasMore?: boolean;
-    /**
-     * Có reset từ khóa tìm kiếm khi focus lại hay không.
-     * Whether to reset the search term when the field is focused again.
-     * 再次聚焦时是否重置搜索词。
-     */
-    resetSearchOnFocus?: boolean;
-    /**
-     * Có khôi phục option đã chọn khi blur mà chưa chọn mới hay không.
-     * Whether to restore the selected option on blur if nothing new is chosen.
-     * 失焦且未选择新值时是否恢复已选项。
-     */
-    restoreSelectedOnBlur?: boolean;
-};
 interface ComboboxProps extends SharedComponentProps {
-    /**
-     * Danh sách option hiển thị trong dropdown.
-     * Option list rendered in the dropdown.
-     * 下拉列表中渲染的选项列表。
-     */
+    options: ComboboxOption$1[];
+    value?: string | number;
+    placeholder?: string;
+    onChange?: (value: ComboboxOption$1['value']) => void;
+    onInputChange?: (value: string) => void;
+    loading?: boolean;
+    disabled?: boolean;
+    searchPlaceholder?: string;
+    helperId?: string;
+    errorId?: string;
+    allowClear?: boolean;
+    onClear?: () => void;
+    portal?: boolean;
+}
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type ComboboxOption = {
+    label: string;
+    value: string | number;
+    description?: string;
+    searchValue?: string;
+    disabled?: boolean;
+};
+interface AsyncComboboxProps extends SharedComponentProps {
     options: ComboboxOption[];
-    /**
-     * Giá trị đang được chọn.
-     * Currently selected value.
-     * 当前选中的值。
-     */
     value?: string | number;
-    /**
-     * Placeholder hiển thị khi chưa có giá trị.
-     * Placeholder shown when no value is selected.
-     * 未选择值时显示的占位文本。
-     */
     placeholder?: string;
-    /**
-     * Callback khi người dùng chọn một option.
-     * Callback fired when the user selects an option.
-     * 用户选择某个选项时触发的回调。
-     */
     onChange?: (value: ComboboxOption['value']) => void;
-    /**
-     * Callback khi nội dung nhập thay đổi.
-     * Callback fired when the input text changes.
-     * 输入内容变化时触发的回调。
-     */
     onInputChange?: (value: string) => void;
-    /**
-     * Callback tải thêm thủ công ở cuối danh sách.
-     * Manual callback for loading more items at the end of the list.
-     * 列表末尾手动加载更多的回调。
-     */
-    onLoadMore?: () => void;
-    /**
-     * Cho biết còn dữ liệu để load thêm hay không.
-     * Indicates whether more data can be loaded.
-     * 是否还有更多数据可加载。
-     */
-    hasMore?: boolean;
-    /**
-     * Cấu hình cho chế độ async/remote search.
-     * Configuration for async or remote-search behavior.
-     * 异步/远程搜索模式的配置。
-     */
-    asyncConfig?: ComboboxAsyncConfig;
-    /**
-     * Trạng thái đang tải dữ liệu.
-     * Loading state while data is being fetched.
-     * 数据加载中的状态。
-     */
+    onInputFocus?: () => void;
+    onScrollEnd?: () => void;
     loading?: boolean;
-    /**
-     * Vô hiệu hóa toàn bộ combobox.
-     * Disables the entire combobox.
-     * 禁用整个 combobox。
-     */
     disabled?: boolean;
-    /**
-     * Placeholder dành riêng cho ô search.
-     * Placeholder specifically for the search input.
-     * 搜索输入框专用的占位文本。
-     */
     searchPlaceholder?: string;
-    /**
-     * `id` dùng cho helper text để liên kết accessibility.
-     * `id` used by helper text for accessibility linkage.
-     * 用于辅助文本无障碍关联的 `id`。
-     */
     helperId?: string;
-    /**
-     * `id` dùng cho error text để liên kết accessibility.
-     * `id` used by error text for accessibility linkage.
-     * 用于错误文本无障碍关联的 `id`。
-     */
     errorId?: string;
-    /**
-     * Cho phép hiển thị nút xóa giá trị hiện tại.
-     * Enables a button for clearing the current value.
-     * 是否显示清空当前值的按钮。
-     */
     allowClear?: boolean;
-    /**
-     * Callback khi người dùng bấm xóa giá trị.
-     * Callback fired when the current value is cleared.
-     * 用户清空当前值时触发的回调。
-     */
     onClear?: () => void;
-    /**
-     * Render dropdown bằng portal ra ngoài layout hiện tại.
-     * Renders the dropdown in a portal outside the current layout.
-     * 通过 portal 在当前布局外渲染下拉层。
-     */
     portal?: boolean;
-    /**
-     * Class bổ sung cho dropdown menu.
-     * Extra class names for the dropdown menu.
-     * 下拉菜单的额外 class。
-     */
-    dropdownClassName?: string;
-    /**
-     * Ghi đè chiều cao tối đa của dropdown.
-     * Overrides the maximum height of the dropdown.
-     * 覆盖下拉层的最大高度。
-     */
-    dropdownMaxHeight?: number;
-    /**
-     * Giữ style lỗi nhưng không render dòng error bên dưới field.
-     * Keeps error styling without rendering the error text below the field.
-     * 保留错误样式，但不在字段下方渲染错误文本。
-     */
-    hideErrorMessage?: boolean;
 }
-declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
+declare const AsyncCombobox: react.ForwardRefExoticComponent<AsyncComboboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type MultiSelectOption = {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    searchValue?: string;
+};
+interface MultiSelectProps extends SharedComponentProps {
+    options: MultiSelectOption[];
+    value?: Array<MultiSelectOption['value']>;
+    placeholder?: string;
+    onChange?: (value: Array<MultiSelectOption['value']>) => void;
+    onSearch?: (value: string) => void;
+    loading?: boolean;
+    disabled?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+}
+declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Vertical form wrapper that keeps consistent spacing between fields.
+ * @remarks
+ * Extend `className` or pass native form props while maintaining consistent letter spacing for each child row.
+ */
+declare function Form({ className, ...props }: FormHTMLAttributes<HTMLFormElement>): react_jsx_runtime.JSX.Element;
+interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorMessage?: ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+}
+/**
+ * Grid-aligned form field wrapper for label/control/description clusters.
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for a single form item to stack label, control, and messages vertically.
+ */
+declare const FormItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Styled label with strong typography and surface-aware coloring.
+ */
+declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;
+/**
+ * Flex container that aligns inputs and accessory controls horizontally.
+ */
+declare const FormControl: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Neutral description text for a form field.
+ */
+declare const FormDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Inline error message text for destructive validation states.
+ */
+declare const FormMessage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+
+type SelectOption = {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+};
+type Option = SelectOption;
+declare const triggerVariants$1: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SelectVariant$1 = VariantProps<typeof triggerVariants$1>['variant'];
+interface SelectProps extends SharedComponentProps, Omit<SelectPrimitive.SelectProps, 'defaultValue' | 'value' | 'children' | 'onValueChange'> {
+    options: SelectOption[];
+    value?: string | number;
+    defaultValue?: string | number;
+    placeholder?: string;
+    onChange?: (value: SelectOption['value']) => void;
+    variant?: SelectVariant$1;
+}
+/**
+ * Select field powered by Radix primitives with customizable trigger variants and accessible helpers.
+ * @remarks
+ * Provide `options`, manage `value`/`defaultValue`, and style via `variant` (default/outline/ghost) plus `size` (sm/md/lg); show helper/error text and `loading`.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SearchableSelectOption = {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    searchValue?: string;
+};
+declare const triggerVariants: (props?: ({
+    variant?: "outline" | "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SelectVariant = VariantProps<typeof triggerVariants>['variant'];
+interface SearchableSelectProps extends SharedComponentProps, Omit<SelectPrimitive.SelectProps, 'defaultValue' | 'value' | 'children' | 'onValueChange'> {
+    options: SearchableSelectOption[];
+    value?: string | number;
+    defaultValue?: string | number;
+    placeholder?: string;
+    onChange?: (value: SearchableSelectOption['value']) => void;
+    variant?: SelectVariant;
+    onSearch?: (query: string) => void;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    searchPlaceholder?: string;
+}
+declare const SearchableSelect: react.ForwardRefExoticComponent<SearchableSelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type Trend = 'up' | 'down' | 'flat';
+interface StatProps extends SharedComponentProps {
+    value: ReactNode;
+    helper?: ReactNode;
+    delta?: ReactNode;
+    trend?: Trend;
+}
+/**
+ * Metric card that exposes a primary `value`, optional `delta`, and severity-aware `trend` indicator.
+ * @remarks
+ * Accepts `size` (sm/md/lg), shows `helper` or helper text, and can render `loading`/`disabled` states while aligning helper/error messaging.
+ */
+declare function Stat({ label, value, helper, delta, trend, helperText, errorMessage, loading, disabled, size, className, style, }: StatProps): react_jsx_runtime.JSX.Element;
 
 type DataTableSortDirection = 'asc' | 'desc';
 type DataTableAlign = 'left' | 'center' | 'right';
 type DataTableSortState = {
-    /**
-     * `key` của column đang được sort.
-     * `key` of the column currently being sorted.
-     * 当前参与排序的列 `key`。
-     */
     key: string;
-    /**
-     * Hướng sắp xếp hiện tại.
-     * Current sort direction.
-     * 当前排序方向。
-     */
     direction: DataTableSortDirection;
 };
 type DataTableColumn<T> = {
-    /**
-     * Khóa định danh duy nhất của column.
-     * Unique identifier of the column.
-     * 列的唯一标识键。
-     */
     key: string;
-    /**
-     * Nội dung header hiển thị của column.
-     * Visible header content of the column.
-     * 列头显示内容。
-     */
     title: ReactNode;
-    /**
-     * Tên field trong record dùng để lấy dữ liệu mặc định.
-     * Record field used as the default data source.
-     * 默认取值时对应 record 的字段名。
-     */
     dataIndex?: keyof T;
-    /**
-     * Chiều rộng cố định hoặc tương đối của column.
-     * Fixed or relative width of the column.
-     * 列的固定或相对宽度。
-     */
     width?: number | string;
-    /**
-     * Hàm custom render cell.
-     * Custom renderer for the cell content.
-     * 单元格内容的自定义渲染函数。
-     */
     render?: (value: T[keyof T] | undefined, record: T, index: number) => ReactNode;
-    /**
-     * Bật hoặc tắt khả năng sort cho column.
-     * Enables or disables sorting for the column.
-     * 是否启用该列排序。
-     */
     sortable?: boolean;
+    sorter?: (a: T, b: T) => number;
+    sortValue?: (record: T) => string | number | Date | null | undefined;
+    headerAlign?: DataTableAlign;
+    cellAlign?: DataTableAlign;
+};
+type DataTablePagination = {
+    page: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number) => void;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+};
+type RowKey = string | number;
+type DataTableRowSelection = {
+    selectedRowKeys: Array<RowKey>;
+    onChange: (selectedRowKeys: Array<RowKey>) => void;
+};
+type DataTableProps<T> = {
+    columns: Array<DataTableColumn<T>>;
+    data: T[];
+    rowKey: keyof T | ((record: T) => RowKey);
+    loading?: boolean;
+    emptyText?: ReactNode;
+    pagination?: DataTablePagination;
+    sort?: DataTableSortState | null;
+    onSortChange?: (sort: DataTableSortState | null) => void;
+    sortMode?: 'client' | 'server';
+    onRowClick?: (record: T) => void;
+    rowSelection?: DataTableRowSelection;
+    renderActions?: (record: T) => ReactNode;
+    className?: string;
+    headerAlign?: DataTableAlign;
+    cellAlign?: DataTableAlign;
+    stickyOffset?: number;
+    /** When false, table container does not scroll (overflow-visible). Default true. */
+    scrollable?: boolean;
+};
+declare function DataTable<T>({ columns, data, rowKey, loading, emptyText, pagination, sort, onSortChange, sortMode, onRowClick, rowSelection, renderActions, className, headerAlign, stickyOffset, scrollable, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & ThHTMLAttributes<HTMLTableCellElement> & {
+    as?: "td" | "th";
+} & react.RefAttributes<HTMLTableCellElement>>;
+
+type PaginationInfo = {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+    showingStart: number;
+    showingEnd: number;
+};
+type PaginationProps = {
+    page: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number) => void;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    className?: string;
+    showFirstLast?: boolean;
+    label?: (info: PaginationInfo) => ReactNode;
+};
+declare const Pagination: ({ page, pageSize, total, onChange, pageSizeOptions, onPageSizeChange, className, showFirstLast, label, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+type PageTitleProps = {
     /**
-     * Hàm so sánh custom khi sort client-side.
-     * Custom comparator used for client-side sorting.
-     * 客户端排序时使用的自定义比较函数。
+     * Main title of the page.
      */
-    sorter?: (a: T, b: T) => number;
+    title: string;
     /**
-     * Hàm lấy giá trị dùng riêng cho sort.
-     * Function that returns a dedicated value for sorting.
-     * 专门用于排序的取值函数。
+     * Short description shown below the title.
      */
-    sortValue?: (record: T) => string | number | Date | null | undefined;
+    subtitle?: string;
     /**
-     * Canh lề riêng cho header của column này.
-     * Per-column header alignment override.
-     * 该列表头的单独对齐方式。
+     * Visual density of the page header.
      */
-    headerAlign?: DataTableAlign;
+    size?: 'default' | 'compact';
     /**
-     * Canh lề riêng cho cell của column này.
-     * Per-column cell alignment override.
-     * 该列单元格的单独对齐方式。
+     * Slot rendered on the right side of the header.
      */
-    cellAlign?: DataTableAlign;
+    rightSlot?: ReactNode;
 };
-type DataTablePagination = {
-    /**
-     * Trang hiện tại.
-     * Current page.
-     * 当前页码。
-     */
-    page: number;
-    /**
-     * Số dòng trên mỗi trang.
-     * Number of rows per page.
-     * 每页行数。
-     */
-    pageSize: number;
-    /**
-     * Tổng số bản ghi.
-     * Total number of records.
-     * 总记录数。
-     */
-    total: number;
+declare function PageTitle({ title, subtitle, size, rightSlot, }: PageTitleProps): react_jsx_runtime.JSX.Element;
+
+type SectionTitleProps = {
     /**
-     * Callback đổi trang.
-     * Callback fired when the page changes.
-     * 页码变化时触发的回调。
+     * Main title of the section.
      */
-    onChange: (page: number) => void;
+    title: string;
     /**
-     * Danh sách page size cho dropdown.
-     * Page-size options shown in the dropdown.
-     * 下拉中展示的分页大小选项。
+     * Short description that explains the section.
      */
-    pageSizeOptions?: number[];
+    subtitle?: string;
     /**
-     * Callback đổi số dòng trên mỗi trang.
-     * Callback fired when page size changes.
-     * 每页行数变化时触发的回调。
+     * Icon displayed to the left of the title.
      */
-    onPageSizeChange?: (pageSize: number) => void;
-};
-type RowKey = string | number;
-type DataTableRowSelection = {
+    icon?: ReactNode;
     /**
-     * Danh sách row key đang được chọn.
-     * Row keys that are currently selected.
-     * 当前已选中的行 key 列表。
+     * Custom class for the icon wrapper.
      */
-    selectedRowKeys: Array<RowKey>;
+    iconClassName?: string;
     /**
-     * Callback khi tập row được chọn thay đổi.
-     * Callback fired when the selected rows change.
-     * 已选行集合变化时触发的回调。
+     * Slot rendered on the right side of the section title.
      */
-    onChange: (selectedRowKeys: Array<RowKey>) => void;
+    rightSlot?: ReactNode;
 };
-type DataTableProps<T> = {
+declare function SectionTitle({ title, subtitle, icon, iconClassName, rightSlot, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    badge?: ReactNode;
+}
+interface TabsProps {
+    items: TabItem[];
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    listClassName?: string;
+    contentClassName?: string;
+}
+declare function Tabs({ items, defaultValue, onChange, className, listClassName, contentClassName, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+    size?: LoadingSpinnerProps['size'];
+}
+declare function Loading({ label, size, className, ...props }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+type TooltipSide$2 = 'top' | 'right' | 'bottom' | 'left';
+type TooltipAlign$2 = 'start' | 'center' | 'end';
+type TooltipProps = {
     /**
-     * Cấu hình các cột của bảng.
-     * Column configuration of the table.
-     * 表格列配置。
+     * Tooltip content shown on hover or focus.
      */
-    columns: Array<DataTableColumn<T>>;
+    content: ReactNode;
     /**
-     * Dữ liệu nguồn của bảng.
-     * Source data rendered by the table.
-     * 表格渲染的数据源。
+     * Trigger element for the tooltip.
      */
-    data: T[];
+    children: ReactNode;
     /**
-     * Cách lấy khóa duy nhất cho mỗi dòng.
-     * How to resolve a unique key for each row.
-     * 为每一行生成唯一 key 的方式。
+     * Tooltip side relative to the trigger.
      */
-    rowKey: keyof T | ((record: T) => RowKey);
+    side?: TooltipSide$2;
     /**
-     * Trạng thái loading của bảng.
-     * Loading state of the table.
-     * 表格的加载状态。
+     * Tooltip alignment on the secondary axis.
      */
-    loading?: boolean;
+    align?: TooltipAlign$2;
     /**
-     * Nội dung hiển thị khi bảng rỗng.
-     * Content shown when the table has no data.
-     * 表格无数据时显示的内容。
+     * Extra class names for the trigger wrapper.
      */
-    emptyText?: ReactNode;
+    className?: string;
     /**
-     * Cấu hình phân trang.
-     * Pagination configuration.
-     * 分页配置。
+     * Extra class names for the tooltip panel.
      */
-    pagination?: DataTablePagination;
+    contentClassName?: string;
     /**
-     * Trạng thái sort hiện tại nếu muốn control từ ngoài.
-     * Current sort state when controlled from the parent.
-     * 由外部控制时的当前排序状态。
+     * Allows tooltip content to wrap onto multiple lines.
      */
-    sort?: DataTableSortState | null;
+    wrap?: boolean;
     /**
-     * Callback khi trạng thái sort thay đổi.
-     * Callback fired when sort state changes.
-     * 排序状态变化时触发的回调。
+     * Renders the tooltip through a portal into `document.body`.
      */
-    onSortChange?: (sort: DataTableSortState | null) => void;
+    portal?: boolean;
+};
+declare function Tooltip({ content, children, side, align, className, contentClassName, wrap, portal, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+type TooltipSide$1 = 'top' | 'right' | 'bottom' | 'left';
+type TooltipAlign$1 = 'start' | 'center' | 'end';
+type OverflowTooltipProps = {
+    content: ReactNode;
+    children: ReactNode;
+    targetRef?: RefObject<HTMLElement | null>;
+    side?: TooltipSide$1;
+    align?: TooltipAlign$1;
+    className?: string;
+    contentClassName?: string;
+    wrap?: boolean;
+    portal?: boolean;
+    disabled?: boolean;
+    watch?: ReadonlyArray<unknown>;
+};
+declare function OverflowTooltip({ content, children, targetRef, side, align, className, contentClassName, wrap, portal, disabled, watch, }: OverflowTooltipProps): react_jsx_runtime.JSX.Element;
+
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+type TooltipAlign = 'start' | 'center' | 'end';
+type LineClampTooltipProps = {
+    text: string;
+    lineClamp?: number;
+    className?: string;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    wrap?: boolean;
+    portal?: boolean;
+};
+declare function LineClampTooltip({ text, lineClamp, className, side, align, wrap, portal, }: LineClampTooltipProps): react_jsx_runtime.JSX.Element;
+
+type TruncatedTextProps = {
+    email: string;
+};
+declare function TruncatedText({ email, }: TruncatedTextProps): react_jsx_runtime.JSX.Element;
+
+declare function Sidebar({ items, userPermissions, permissionChecker, activeItemId, onItemClick, listClassName, nestedListClassName, itemClassName, indentSize, ariaLabel, className, collapsible, collapsed, defaultCollapsed, onCollapseChange, collapsedWidth, expandedWidth, collapseButtonLabel, style, ...rest }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type SidebarItemProps = {
+    item: SidebarItem$1;
+    depth: number;
+    activeItemId?: string;
+    onItemClick?: (item: SidebarItem$1) => void;
+    indentSize?: number;
+    nestedListClassName?: string;
+    itemClassName?: string;
+    collapsed?: boolean;
+};
+declare function SidebarItem({ item, depth, activeItemId, onItemClick, indentSize, nestedListClassName, itemClassName, collapsed, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+declare const defaultPermissionChecker: PermissionChecker;
+declare function filterSidebarItems(items: SidebarItem$1[], userPermissions: string[] | undefined, permissionChecker?: PermissionChecker): SidebarItem$1[];
+declare function hasActiveDescendant(item: SidebarItem$1, activeItemId?: string): boolean;
+
+interface MainFeNamespace {
     /**
-     * Chế độ sort phía client hoặc server.
-     * Sorting mode handled on the client or server.
-     * 排序在客户端还是服务端处理。
+     * Legacy page header component.
      */
-    sortMode?: 'client' | 'server';
+    PageTitle: typeof PageTitle$1;
     /**
-     * Callback khi người dùng click vào một dòng.
-     * Callback fired when a row is clicked.
-     * 用户点击某一行时触发的回调。
+     * Section header for legacy `main-fe`.
      */
-    onRowClick?: (record: T) => void;
+    SectionTitle: typeof SectionTitle$1;
     /**
-     * Cấu hình chọn nhiều dòng.
-     * Row-selection configuration.
-     * 行选择配置。
+     * Button theo visual style legacy `main-fe`.
+     * Legacy `main-fe` styled button.
      */
-    rowSelection?: DataTableRowSelection;
+    Button: typeof Button$1;
     /**
-     * Hàm render cột action cho từng dòng.
-     * Renderer for the per-row action column.
-     * 每一行操作列的渲染函数。
+     * Input theo visual style legacy `main-fe`.
+     * Legacy `main-fe` styled input.
      */
-    renderActions?: (record: T) => ReactNode;
+    Input: typeof Input$1;
     /**
-     * Chiều rộng của cột action.
-     * Width of the action column.
-     * 操作列宽度。
+     * Legacy `main-fe` combobox with search/load-more.
      */
-    actionColumnWidth?: number | string;
+    Combobox: typeof Combobox$1;
     /**
-     * Class bổ sung cho wrapper của bảng.
-     * Extra class names for the table wrapper.
-     * 表格容器的额外 class。
+     * Switch theo visual style legacy `main-fe`.
+     * Legacy `main-fe` styled switch.
      */
-    className?: string;
+    Switch: typeof Switch;
     /**
-     * Canh lề mặc định cho toàn bộ header.
-     * Default alignment for all headers.
-     * 全部表头的默认对齐方式。
+     * Segmented tab group.
      */
-    headerAlign?: DataTableAlign;
+    MultiTabs: typeof MultiTabs;
     /**
-     * Canh lề mặc định cho toàn bộ cell.
-     * Default alignment for all cells.
-     * 全部单元格的默认对齐方式。
+     * Metric card for legacy dashboards/lists.
      */
-    cellAlign?: DataTableAlign;
+    StatCard: typeof StatCard;
     /**
-     * Offset sticky cho header/cột cố định nếu layout có top bar.
-     * Sticky offset for header or fixed columns when the layout has a top bar.
-     * 当布局存在顶部栏时，表头/固定列的 sticky 偏移。
+     * Legacy `main-fe` data table.
      */
-    stickyOffset?: number;
-};
-declare function DataTable<T>({ columns, data, rowKey, loading, emptyText, pagination, sort, onSortChange, sortMode, onRowClick, rowSelection, renderActions, actionColumnWidth, className, headerAlign, stickyOffset, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
-declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
-declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & ThHTMLAttributes<HTMLTableCellElement> & {
-    as?: "td" | "th";
-} & react.RefAttributes<HTMLTableCellElement>>;
-
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'onChange'> {
+    DataTable: typeof DataTable$1;
     /**
-     * Class bổ sung cho wrapper ngoài cùng của switch.
-     * Extra class names for the outer switch wrapper.
-     * 开关最外层容器的额外 class。
+     * Full-area loading state for remote or legacy screens.
      */
-    className?: string;
+    RemoteLoading: typeof RemoteLoading;
     /**
-     * Class tùy chỉnh cho phần track.
-     * Custom class for the switch track.
-     * 开关轨道的自定义 class。
+     * Date-range picker.
      */
-    trackClassName?: string;
+    DateRangePicker: typeof DateRangePicker;
     /**
-     * Class tùy chỉnh cho phần thumb.
-     * Custom class for the switch thumb.
-     * 开关圆点的自定义 class。
+     * Date-time picker.
      */
-    thumbClassName?: string;
+    DateTimePicker: typeof DateTimePicker;
     /**
-     * Callback trả về trạng thái checked mới.
-     * Callback that returns the next checked state.
-     * 返回最新选中状态的回调。
+     * Argon-style sidebar for legacy `main-fe`.
      */
-    onCheckedChange?: (checked: boolean) => void;
-}
-declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
-
-declare function Card({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardHeader({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardTitle({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardDescription({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardAction({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardContent({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CardFooter({ className, ...props }: react.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-
-type StatusAction = {
-    label: ReactNode;
-    color?: string;
-    href?: string;
-    onClick?: () => void;
-};
-type StatusOption = {
-    value: string | number;
-    label: ReactNode;
-    color?: string;
-    action?: StatusAction;
-};
-type StatusPresentation = {
-    label: ReactNode;
-    color?: string;
-    action?: StatusAction;
-};
-declare function getStatusPresentation(status: string | number | null | undefined, options: StatusOption[]): StatusPresentation | null;
-
-declare const index_ArgonSidebar: typeof ArgonSidebar;
-type index_ArgonSidebarHeaderRender = ArgonSidebarHeaderRender;
-type index_ArgonSidebarProps = ArgonSidebarProps;
-declare const index_Badge: typeof Badge;
-type index_BadgeProps = BadgeProps;
-declare const index_Button: typeof Button;
-type index_ButtonProps = ButtonProps;
-declare const index_Card: typeof Card;
-declare const index_CardAction: typeof CardAction;
-declare const index_CardContent: typeof CardContent;
-declare const index_CardDescription: typeof CardDescription;
-declare const index_CardFooter: typeof CardFooter;
-declare const index_CardHeader: typeof CardHeader;
-declare const index_CardTitle: typeof CardTitle;
-declare const index_Combobox: typeof Combobox;
-type index_ComboboxAsyncConfig = ComboboxAsyncConfig;
-type index_ComboboxOption = ComboboxOption;
-type index_ComboboxProps = ComboboxProps;
-declare const index_DataTable: typeof DataTable;
-type index_DataTableAlign = DataTableAlign;
-type index_DataTableColumn<T> = DataTableColumn<T>;
-type index_DataTablePagination = DataTablePagination;
-type index_DataTableProps<T> = DataTableProps<T>;
-type index_DataTableRowSelection = DataTableRowSelection;
-type index_DataTableSortDirection = DataTableSortDirection;
-type index_DataTableSortState = DataTableSortState;
-declare const index_DateRangePicker: typeof DateRangePicker;
-type index_DateRangePickerProps = DateRangePickerProps;
-type index_DateRangePickerValue = DateRangePickerValue;
-declare const index_DateTimePicker: typeof DateTimePicker;
-type index_DateTimePickerProps = DateTimePickerProps;
-declare const index_Input: typeof Input;
-type index_InputProps = InputProps;
-type index_MainFePageTitleProps = MainFePageTitleProps;
-type index_MainFeSectionTitleProps = MainFeSectionTitleProps;
-type index_MultiTabItem = MultiTabItem;
-declare const index_MultiTabs: typeof MultiTabs;
-type index_MultiTabsProps = MultiTabsProps;
-declare const index_PageTitle: typeof PageTitle;
-type index_QuickOption = QuickOption;
-declare const index_RemoteLoading: typeof RemoteLoading;
-type index_RemoteLoadingProps = RemoteLoadingProps;
-declare const index_SectionTitle: typeof SectionTitle;
-declare const index_StatCard: typeof StatCard;
-type index_StatCardProps = StatCardProps;
-type index_StatTone = StatTone;
-type index_StatusAction = StatusAction;
-type index_StatusOption = StatusOption;
-type index_StatusPresentation = StatusPresentation;
-declare const index_Switch: typeof Switch;
-type index_SwitchProps = SwitchProps;
-declare const index_Table: typeof Table;
-declare const index_TableBody: typeof TableBody;
-declare const index_TableCell: typeof TableCell;
-declare const index_TableHeader: typeof TableHeader;
-declare const index_TableRow: typeof TableRow;
-declare const index_getStatusPresentation: typeof getStatusPresentation;
-declare namespace index {
-  export { index_ArgonSidebar as ArgonSidebar, type index_ArgonSidebarHeaderRender as ArgonSidebarHeaderRender, type index_ArgonSidebarProps as ArgonSidebarProps, index_Badge as Badge, type index_BadgeProps as BadgeProps, index_Button as Button, type index_ButtonProps as ButtonProps, index_Card as Card, index_CardAction as CardAction, index_CardContent as CardContent, index_CardDescription as CardDescription, index_CardFooter as CardFooter, index_CardHeader as CardHeader, index_CardTitle as CardTitle, index_Combobox as Combobox, type index_ComboboxAsyncConfig as ComboboxAsyncConfig, type index_ComboboxOption as ComboboxOption, type index_ComboboxProps as ComboboxProps, index_DataTable as DataTable, type index_DataTableAlign as DataTableAlign, type index_DataTableColumn as DataTableColumn, type index_DataTablePagination as DataTablePagination, type index_DataTableProps as DataTableProps, type index_DataTableRowSelection as DataTableRowSelection, type index_DataTableSortDirection as DataTableSortDirection, type index_DataTableSortState as DataTableSortState, index_DateRangePicker as DateRangePicker, type index_DateRangePickerProps as DateRangePickerProps, type index_DateRangePickerValue as DateRangePickerValue, index_DateTimePicker as DateTimePicker, type index_DateTimePickerProps as DateTimePickerProps, index_Input as Input, type index_InputProps as InputProps, type index_MainFePageTitleProps as MainFePageTitleProps, type index_MainFeSectionTitleProps as MainFeSectionTitleProps, type index_MultiTabItem as MultiTabItem, index_MultiTabs as MultiTabs, type index_MultiTabsProps as MultiTabsProps, index_PageTitle as PageTitle, type index_QuickOption as QuickOption, index_RemoteLoading as RemoteLoading, type index_RemoteLoadingProps as RemoteLoadingProps, index_SectionTitle as SectionTitle, index_StatCard as StatCard, type index_StatCardProps as StatCardProps, type index_StatTone as StatTone, type index_StatusAction as StatusAction, type index_StatusOption as StatusOption, type index_StatusPresentation as StatusPresentation, index_Switch as Switch, type index_SwitchProps as SwitchProps, index_Table as Table, index_TableBody as TableBody, index_TableCell as TableCell, index_TableHeader as TableHeader, index_TableRow as TableRow, index_getStatusPresentation as getStatusPresentation };
+    ArgonSidebar: typeof ArgonSidebar;
+    Badge: typeof Badge;
+    Card: typeof Card$1;
+    CardHeader: typeof CardHeader$1;
+    CardFooter: typeof CardFooter$1;
+    CardTitle: typeof CardTitle$1;
+    CardAction: typeof CardAction$1;
+    CardDescription: typeof CardDescription$1;
+    CardContent: typeof CardContent$1;
+    Table: typeof Table$1;
+    TableHeader: typeof TableHeader$1;
+    TableBody: typeof TableBody$1;
+    TableRow: typeof TableRow$1;
+    TableCell: typeof TableCell$1;
+    getStatusPresentation: typeof getStatusPresentation;
 }
+declare const MainFe: MainFeNamespace;
 
-export { Alert, type AlertProps, ArgonSidebar, type ArgonSidebarHeaderRender, type ArgonSidebarProps, AsyncCombobox, type AsyncComboboxProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button$1 as Button, type ButtonProps$1 as ButtonProps, Card$1 as Card, CardAction$1 as CardAction, CardContent$1 as CardContent, CardDescription$1 as CardDescription, CardFooter$1 as CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle, Combobox$1 as Combobox, type ComboboxOption$2 as ComboboxOption, type ComboboxProps$1 as ComboboxProps, FormControl as Control, DataTable$1 as DataTable, type DataTableAlign$1 as DataTableAlign, type DataTableColumn$1 as DataTableColumn, type DataTablePagination$1 as DataTablePagination, type DataTableProps$1 as DataTableProps, type DataTableRowSelection$1 as DataTableRowSelection, type DataTableSortDirection$1 as DataTableSortDirection, type DataTableSortState$1 as DataTableSortState, type DateRangePickerProps, type DateRangePickerValue, type DateTimePickerProps, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Input$1 as Input, type InputProps$1 as InputProps, FormItem as Item, FormLabel as Label, LineClampTooltip, type LineClampTooltipProps, Loading, type LoadingProps, index as MainFe, type ButtonProps as MainFeButtonProps, type ComboboxAsyncConfig as MainFeComboboxAsyncConfig, type ComboboxOption as MainFeComboboxOption, type ComboboxProps as MainFeComboboxProps, type DataTableAlign as MainFeDataTableAlign, type DataTableColumn as MainFeDataTableColumn, type DataTablePagination as MainFeDataTablePagination, type DataTableProps as MainFeDataTableProps, type DataTableRowSelection as MainFeDataTableRowSelection, type DataTableSortDirection as MainFeDataTableSortDirection, type DataTableSortState as MainFeDataTableSortState, type InputProps as MainFeInputProps, type MainFePageTitleProps, type QuickOption as MainFeQuickOption, type MainFeSectionTitleProps, type SwitchProps as MainFeSwitchProps, FormMessage as Message, MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiTabItem, type MultiTabsProps, NumericInput, type NumericInputProps, type Option, OverflowTooltip, type OverflowTooltipProps, PageTitle$1 as PageTitle, type PageTitleProps, Pagination, type PaginationInfo, type PaginationProps, type PermissionChecker, type RemoteLoadingProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionTitle$1 as SectionTitle, type SectionTitleProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarItem, type SidebarProps, Stat, type StatCardProps, type StatProps, type StatTone, type TabItem, Table$1 as Table, TableBody$1 as TableBody, TableCell$1 as TableCell, TableHeader$1 as TableHeader, TableRow$1 as TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, type Trend, TruncatedText, type TruncatedTextProps, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant };
+export { Alert, type AlertProps, ArgonSidebar, type ArgonSidebarHeaderRender, type ArgonSidebarProps, AsyncCombobox, type AsyncComboboxProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Combobox, type ComboboxOption$1 as ComboboxOption, type ComboboxProps, FormControl as Control, DataTable, type DataTableAlign, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableRowSelection, type DataTableSortDirection, type DataTableSortState, type DateRangePickerProps, type DateRangePickerValue, type DateTimePickerProps, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Input, type InputProps, FormItem as Item, FormLabel as Label, LineClampTooltip, type LineClampTooltipProps, Loading, type LoadingProps, MainFe, type ButtonProps$1 as MainFeButtonProps, type ComboboxAsyncConfig as MainFeComboboxAsyncConfig, type ComboboxOption$2 as MainFeComboboxOption, type ComboboxProps$1 as MainFeComboboxProps, type DataTableAlign$1 as MainFeDataTableAlign, type DataTableColumn$1 as MainFeDataTableColumn, type DataTablePagination$1 as MainFeDataTablePagination, type DataTableProps$1 as MainFeDataTableProps, type DataTableRowSelection$1 as MainFeDataTableRowSelection, type DataTableSortDirection$1 as MainFeDataTableSortDirection, type DataTableSortState$1 as MainFeDataTableSortState, type InputProps$1 as MainFeInputProps, type MainFeNamespace, type MainFePageTitleProps, type QuickOption as MainFeQuickOption, type MainFeSectionTitleProps, type SwitchProps as MainFeSwitchProps, FormMessage as Message, MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiTabItem, type MultiTabsProps, NumericInput, type NumericInputProps, type Option, OverflowTooltip, type OverflowTooltipProps, PageTitle, type PageTitleProps, Pagination, type PaginationInfo, type PaginationProps, type PermissionChecker, type RemoteLoadingProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionTitle, type SectionTitleProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarItem, type SidebarProps, Stat, type StatCardProps, type StatProps, type StatTone, type TabItem, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, type Trend, TruncatedText, type TruncatedTextProps, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant };