@agentero/design-system 0.7.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.7.5",
+	"version": "0.8.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -45,6 +45,10 @@
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
 		},
+		"./pagination": {
+			"types": "./src/pagination/index.d.ts",
+			"import": "./src/pagination/index.js"
+		},
 		"./status-ball": {
 			"types": "./src/status-ball/index.d.ts",
 			"import": "./src/status-ball/index.js"

package/src/pagination/get-pages.d.ts

@@ -0,0 +1,15 @@
+type Page = {
+    number: number;
+    type: PageType;
+};
+type UsePaginationProps = {
+    totalCount: number;
+    pageSize: number;
+    currentPage: number;
+};
+export declare enum PageType {
+    Normal = 0,
+    Dots = 1
+}
+export declare const getPages: ({ totalCount, pageSize, currentPage }: UsePaginationProps) => Page[];
+export {};

package/src/pagination/get-pages.js

@@ -0,0 +1,55 @@
+//#region src/pagination/get-pages.ts
+var e = /* @__PURE__ */ function(e) {
+	return e[e.Normal = 0] = "Normal", e[e.Dots = 1] = "Dots", e;
+}({}), t = (t, n) => {
+	let r = n - t + 1;
+	return Array.from({ length: r }, (n, r) => ({
+		number: r + t,
+		type: e.Normal
+	}));
+}, n = 1, r = 1, i = {
+	number: 0,
+	type: e.Dots
+}, a = ({ totalCount: a, pageSize: o, currentPage: s }) => {
+	let c = Math.ceil(a / o);
+	if (r + 5 >= c) return t(1, c);
+	let l = Math.max(s - r, 1), u = Math.min(s + r, c), d = l > 2, f = u < c - 2;
+	if (!d && f) return [
+		...t(1, 3 + 2 * r),
+		i,
+		{
+			number: c,
+			type: e.Normal
+		}
+	];
+	if (d && !f) {
+		let a = t(c - (3 + 2 * r) + 1, c);
+		return [
+			{
+				number: n,
+				type: e.Normal
+			},
+			i,
+			...a
+		];
+	}
+	if (d && f) {
+		let r = t(l, u);
+		return [
+			{
+				number: n,
+				type: e.Normal
+			},
+			i,
+			...r,
+			i,
+			{
+				number: c,
+				type: e.Normal
+			}
+		];
+	}
+	return [];
+};
+//#endregion
+export { e as PageType, a as getPages };

package/src/pagination/icons.d.ts

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react';
+/**
+ * Three-dot ellipsis glyph rendered inside the page list to indicate a
+ * collapsed range between page numbers. The fill follows the surrounding
+ * text color so it inherits the pagination button color tokens.
+ *
+ * @summary 24px horizontal-dots icon used as the page-range ellipsis
+ */
+export declare const IconHorizontalDots: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Left-chevron glyph rendered inside the previous-page icon button. The fill
+ * follows the surrounding text color so it inherits the pagination button
+ * color tokens.
+ *
+ * @summary 24px chevron-left icon used by the previous-page button
+ */
+export declare const IconKeyboardArrowLeft: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Right-chevron glyph rendered inside the next-page icon button. The fill
+ * follows the surrounding text color so it inherits the pagination button
+ * color tokens.
+ *
+ * @summary 24px chevron-right icon used by the next-page button
+ */
+export declare const IconKeyboardArrowRight: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/pagination/icons.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/pagination/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M10.4539 12L14.5269 16.0731C14.6654 16.2115 14.7362 16.3856 14.7394 16.5952C14.7427 16.8048 14.6718 16.982 14.5269 17.1269C14.3821 17.2718 14.2064 17.3442 14 17.3442C13.7936 17.3442 13.618 17.2718 13.4731 17.1269L8.97892 12.6327C8.88532 12.5391 8.81929 12.4404 8.78084 12.3365C8.74238 12.2327 8.72314 12.1205 8.72314 12C8.72314 11.8795 8.74238 11.7673 8.78084 11.6635C8.81929 11.5596 8.88532 11.4609 8.97892 11.3673L13.4731 6.8731C13.6116 6.73463 13.7856 6.6638 13.9952 6.6606C14.2048 6.65738 14.3821 6.72821 14.5269 6.8731C14.6718 7.01796 14.7443 7.1936 14.7443 7.4C14.7443 7.6064 14.6718 7.78203 14.5269 7.9269L10.4539 12Z" })
+}), r = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12.9462 12L8.87309 7.92689C8.73462 7.78844 8.66379 7.6144 8.66059 7.40479C8.65737 7.19519 8.7282 7.01795 8.87309 6.87309C9.01795 6.7282 9.19359 6.65576 9.39999 6.65576C9.60639 6.65576 9.78202 6.7282 9.92689 6.87309L14.4211 11.3673C14.5147 11.4609 14.5807 11.5596 14.6192 11.6635C14.6577 11.7673 14.6769 11.8795 14.6769 12C14.6769 12.1205 14.6577 12.2327 14.6192 12.3365C14.5807 12.4404 14.5147 12.5391 14.4211 12.6327L9.92689 17.1269C9.78844 17.2654 9.6144 17.3362 9.40479 17.3394C9.19519 17.3426 9.01795 17.2718 8.87309 17.1269C8.7282 16.982 8.65576 16.8064 8.65576 16.6C8.65576 16.3936 8.7282 16.218 8.87309 16.0731L12.9462 12Z" })
+});
+//#endregion
+export { t as IconHorizontalDots, n as IconKeyboardArrowLeft, r as IconKeyboardArrowRight };

package/src/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';

package/src/pagination/index.js

@@ -0,0 +1,2 @@
+import { Pagination as e } from "./pagination.js";
+export { e as Pagination };

package/src/pagination/pagination.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Style recipe for Pagination using tailwind-variants. Multi-slot recipe that
+ * owns every element the component renders: the `root` `<nav>`, the entries
+ * `summary`, the `list` and per-page `item` wrappers, the page/prev/next
+ * `button`, and the ellipsis `dots` span. The `active` variant paints the
+ * current page button.
+ *
+ * Exported for advanced composition (e.g., styling a custom element to match
+ * a Pagination slot). Prefer rendering the `Pagination` component.
+ *
+ * @summary tailwind-variants recipe backing the Pagination component styles
+ */
+export declare const paginationRecipe: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    root: string;
+    summary: string;
+    list: string;
+    item: string;
+    button: string[];
+    dots: string;
+}, undefined, {
+    active: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    root: string;
+    summary: string;
+    list: string;
+    item: string;
+    button: string[];
+    dots: string;
+}, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    root: string;
+    summary: string;
+    list: string;
+    item: string;
+    button: string[];
+    dots: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the Pagination component.
+ *
+ * @property {(page: number) => void} onPageChange - Called with the next 1-indexed page number when the user clicks a page, prev, or next button.
+ * @property {number} totalCount - Total number of items across all pages. Combined with `pageSize` to derive the total page count.
+ * @property {number} currentPage - The 1-indexed page currently in view. Pass `0` to short-circuit and render nothing (legacy "off" sentinel).
+ * @property {number} pageSize - Number of items per page. Drives both the page count and the entries-of-total summary.
+ * @property {string} [className] - Additional CSS classes applied to the root `<nav>` element.
+ */
+export type PaginationProps = {
+    onPageChange: (page: number) => void;
+    totalCount: number;
+    currentPage: number;
+    pageSize: number;
+    className?: string;
+};
+/**
+ * Pagination is a 1-indexed paged navigation control with previous/next icon
+ * buttons, numeric page buttons, and a leading "X - Y of Z" entries summary.
+ * The page list collapses long ranges with `…` ellipses, keeping at most a
+ * handful of buttons in view regardless of total page count. Use it whenever
+ * a list, table, or grid is split across pages and the user needs direct
+ * access to specific pages (not just prev/next).
+ *
+ * The control short-circuits to `null` when `currentPage === 0` (legacy "off"
+ * sentinel) or when there are no pages to show, so it's safe to mount
+ * unconditionally above a list that may be empty.
+ *
+ * Do **not** use Pagination for infinite-scroll feeds, sub-page-1 indexing
+ * (the `0` value is reserved as the off-switch), or as a tab/segmented
+ * control — it's strictly a page-of-pages affordance.
+ *
+ * @summary 1-indexed paged navigation control with prev/next, numeric pages, and entries summary
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Pagination } from '@agentero/design-system/pagination';
+ *
+ * const [page, setPage] = useState(1);
+ *
+ * <Pagination
+ *   currentPage={page}
+ *   pageSize={10}
+ *   totalCount={1000}
+ *   onPageChange={setPage}
+ * />
+ * ```
+ */
+export declare const Pagination: ({ onPageChange, totalCount, currentPage, pageSize, className }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/pagination/pagination.js

@@ -0,0 +1,96 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { PageType as t, getPages as n } from "./get-pages.js";
+import { IconHorizontalDots as r, IconKeyboardArrowLeft as i, IconKeyboardArrowRight as a } from "./icons.js";
+import { tv as o } from "tailwind-variants";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/pagination/pagination.tsx
+var l = o({
+	slots: {
+		root: "flex h-8 items-center justify-between gap-4",
+		summary: "text-base text-text-default-base-tertiary",
+		list: "flex items-center gap-2",
+		item: "flex min-w-8 h-8",
+		button: [
+			"relative inline-flex items-center justify-center",
+			"text-sm font-semibold rounded-md cursor-pointer no-underline whitespace-nowrap",
+			"min-w-8 h-8 px-1",
+			"border border-solid border-transparent",
+			"bg-bg-button-ghost-enable text-text-button-ghost-enable",
+			"transition-[background-color,border-color,color] duration-200",
+			"disabled:pointer-events-none disabled:opacity-30",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-[0.0625rem] focus-visible:outline-focus-ring-button-primary",
+			"hover:not-aria-[current=page]:border-border-button-secondary-enable hover:not-aria-[current=page]:shadow-1",
+			"[&_svg]:size-8 [&_svg]:-mx-2 [&_svg]:fill-current"
+		],
+		dots: "inline-flex size-8 items-center justify-center text-text-button-ghost-enable [&_svg]:size-4 [&_svg]:fill-current"
+	},
+	variants: { active: { true: { button: "bg-bg-button-ghost-hover border-bg-button-ghost-hover" } } }
+}), u = ({ onPageChange: o, totalCount: u, currentPage: d, pageSize: f, className: p }) => {
+	let m = n({
+		currentPage: d,
+		totalCount: u,
+		pageSize: f
+	});
+	if (d === 0 || m.length === 0) return null;
+	let h = () => o(d + 1), g = () => o(d - 1), _ = m.length >= 2, v = m[m.length - 1].number, y = d * f - f + 1, b = d * f > u ? u : d * f, x = l();
+	return /* @__PURE__ */ c("nav", {
+		"aria-label": "Pagination",
+		className: e(x.root(), p),
+		children: [/* @__PURE__ */ c("span", {
+			className: x.summary(),
+			children: [
+				y,
+				" - ",
+				b,
+				" of ",
+				Intl.NumberFormat("en-US").format(u)
+			]
+		}), _ && /* @__PURE__ */ c("ul", {
+			className: x.list(),
+			children: [
+				/* @__PURE__ */ s("li", {
+					className: x.item(),
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: g,
+						disabled: d === 1,
+						"aria-label": "Go to previous page",
+						className: x.button(),
+						children: /* @__PURE__ */ s(i, {})
+					})
+				}),
+				m.map(({ number: e, type: n }, i) => n === t.Dots ? /* @__PURE__ */ s("li", {
+					className: x.item(),
+					children: /* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: x.dots(),
+						children: /* @__PURE__ */ s(r, {})
+					})
+				}, i) : /* @__PURE__ */ s("li", {
+					className: x.item(),
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => o(e),
+						"aria-current": d === e ? "page" : void 0,
+						className: x.button({ active: d === e }),
+						children: Intl.NumberFormat("en-US").format(e)
+					})
+				}, i)),
+				/* @__PURE__ */ s("li", {
+					className: x.item(),
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: h,
+						disabled: d === v,
+						"aria-label": "Go to next page",
+						className: x.button(),
+						children: /* @__PURE__ */ s(a, {})
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { u as Pagination };