import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import { useStyleConfig, vui } from '../core';
import Input from '../input';
import T from '../t';
import { cs } from '../utils';
import { usePaginationContext } from './context';
/** Displays a number input, which allows quickly jumping between pages. */
export const PaginationGoToPage = vui((props, ref) => {
    const { className, ...rest } = props;
    const { onPageChange, pageCount } = usePaginationContext();
    const styles = useStyleConfig('Pagination', usePaginationContext());
    const onChange = (e) => {
        const value = +e.target.value;
        if (value >= 1 && value <= pageCount) {
            onPageChange(Math.floor(value));
        }
    };
    return (_jsxs(Box, { centerV: true, className: cs('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref, ...styles.goToPage, ...rest, children: [_jsx(T, { size: "sm", weight: "medium", children: "Go\u00A0to" }), _jsx(Input, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }), _jsx(T, { size: "sm", weight: "medium", children: "Page" })] }));
});
PaginationGoToPage.displayName = 'PaginationGoToPage';
export default PaginationGoToPage;
//# sourceMappingURL=paginationGoToPage.js.map