@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
85 lines (84 loc) • 3.66 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "../../lib/utilities.js";
import button_module from "./button.module.js";
import pagination_module from "./pagination.module.js";
import * as __rspack_external_react from "react";
const buttonSizeStyles = {
default: button_module.sizeDefault,
icon: button_module.sizeIcon,
lg: button_module.sizeLg,
sm: button_module.sizeSm
};
const Pagination = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("nav", {
ref: ref,
role: "navigation",
"aria-label": "pagination",
className: cn(pagination_module.root, className),
...props
}));
const PaginationContent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("ul", {
ref: ref,
className: cn(pagination_module.content, className),
...props
}));
const PaginationItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("li", {
ref: ref,
className: cn(pagination_module.item, className),
...props
}));
const PaginationLink = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, isActive = false, size = "icon", ...props }, ref)=>/*#__PURE__*/ jsx("a", {
ref: ref,
"aria-current": isActive ? "page" : void 0,
className: cn(button_module.button, isActive ? button_module.outline : button_module.ghost, buttonSizeStyles[size], pagination_module.link, className),
...props
}));
const PaginationPrevious = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs(PaginationLink, {
ref: ref,
"aria-label": "Go to previous page",
size: "default",
className: cn(pagination_module.previous, className),
...props,
children: [
/*#__PURE__*/ jsx(ChevronLeft, {}),
/*#__PURE__*/ jsx("span", {
children: "Previous"
})
]
}));
const PaginationNext = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs(PaginationLink, {
ref: ref,
"aria-label": "Go to next page",
size: "default",
className: cn(pagination_module.next, className),
...props,
children: [
/*#__PURE__*/ jsx("span", {
children: "Next"
}),
/*#__PURE__*/ jsx(ChevronRight, {})
]
}));
const PaginationEllipsis = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs("span", {
ref: ref,
"aria-hidden": "true",
className: cn(pagination_module.ellipsis, className),
...props,
children: [
/*#__PURE__*/ jsx(MoreHorizontal, {}),
/*#__PURE__*/ jsx("span", {
className: pagination_module.srOnly,
children: "More pages"
})
]
}));
Pagination.displayName = "Pagination";
PaginationContent.displayName = "PaginationContent";
PaginationItem.displayName = "PaginationItem";
PaginationLink.displayName = "PaginationLink";
PaginationPrevious.displayName = "PaginationPrevious";
PaginationNext.displayName = "PaginationNext";
PaginationEllipsis.displayName = "PaginationEllipsis";
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
//# sourceMappingURL=pagination.js.map