@puzzle-ui/ui 0.3.0 → 0.5.0

package/dist/components/navigation/pagination/index.js

@@ -0,0 +1,146 @@
+"use client";
+import { Link } from "../link/index.js";
+import { getPaginationItems, normalizePage } from "./pagination.utils.js";
+import "./pagination.css";
+import { cn } from "@puzzle-ui/core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/navigation/pagination/index.tsx
+const defaultLabels = {
+	navigation: "Pagination",
+	first: "Go to first page",
+	previous: "Go to previous page",
+	next: "Go to next page",
+	last: "Go to last page",
+	ellipsis: "More pages",
+	page: (page) => `Go to page ${page}`
+};
+const Pagination = ({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = true, disabled = false, size = "md", labels, getPageHref, getPageAriaLabel, className, ...navProps }) => {
+	const [internalPage, setInternalPage] = useState(() => normalizePage(defaultPage, totalPages));
+	const isControlled = page !== void 0;
+	const currentPage = normalizePage(isControlled ? page : internalPage, totalPages);
+	const resolvedLabels = {
+		...defaultLabels,
+		...labels
+	};
+	const items = getPaginationItems(totalPages, currentPage, boundaryCount, siblingCount);
+	const changePage = (nextPage) => {
+		if (disabled) return;
+		const normalizedPage = normalizePage(nextPage, totalPages);
+		if (normalizedPage === 0 || normalizedPage === currentPage) return;
+		if (!isControlled) setInternalPage(normalizedPage);
+		onPageChange?.(normalizedPage);
+	};
+	const renderControl = (type, targetPage, content, ariaLabel) => {
+		const isDisabled = disabled || totalPages === 0 || targetPage < 1 || targetPage > totalPages || targetPage === currentPage;
+		const controlClass = cn("puzzle-pagination__control", "puzzle-pagination__navigation", isDisabled && "puzzle-pagination__control--disabled");
+		if (getPageHref && !isDisabled) return /* @__PURE__ */ jsx(Link, {
+			href: getPageHref(targetPage),
+			className: controlClass,
+			"aria-label": ariaLabel,
+			onClick: () => changePage(targetPage),
+			"data-pagination-action": type,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: controlClass,
+			disabled: isDisabled,
+			"aria-label": ariaLabel,
+			onClick: () => changePage(targetPage),
+			"data-pagination-action": type,
+			children: content
+		});
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		...navProps,
+		"aria-label": navProps["aria-label"] ?? resolvedLabels.navigation,
+		className: cn("puzzle-pagination", `puzzle-pagination--${size}`, className),
+		"data-disabled": disabled || void 0,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "puzzle-pagination__list",
+			children: [
+				showFirstLast && /* @__PURE__ */ jsx("li", {
+					className: "puzzle-pagination__item",
+					children: renderControl("first", 1, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "«"
+					}), resolvedLabels.first)
+				}),
+				/* @__PURE__ */ jsx("li", {
+					className: "puzzle-pagination__item",
+					children: renderControl("previous", currentPage - 1, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "‹"
+					}), resolvedLabels.previous)
+				}),
+				items.map((item) => {
+					if (item.type === "ellipsis") return /* @__PURE__ */ jsx("li", {
+						className: "puzzle-pagination__item",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "puzzle-pagination__ellipsis",
+							"aria-label": resolvedLabels.ellipsis,
+							children: "…"
+						})
+					}, `ellipsis-${item.position}`);
+					const isCurrent = item.page === currentPage;
+					const ariaLabel = getPageAriaLabel?.(item.page) ?? resolvedLabels.page(item.page);
+					const pageClass = cn("puzzle-pagination__control", "puzzle-pagination__page", isCurrent && "puzzle-pagination__page--active");
+					return /* @__PURE__ */ jsx("li", {
+						className: "puzzle-pagination__item",
+						children: getPageHref ? isCurrent ? /* @__PURE__ */ jsx("span", {
+							className: pageClass,
+							"aria-label": ariaLabel,
+							"aria-current": "page",
+							"aria-disabled": disabled || void 0,
+							children: item.page
+						}) : disabled ? /* @__PURE__ */ jsx("span", {
+							className: cn(pageClass, "puzzle-pagination__control--disabled"),
+							"aria-label": ariaLabel,
+							"aria-disabled": "true",
+							children: item.page
+						}) : /* @__PURE__ */ jsx(Link, {
+							href: getPageHref(item.page),
+							className: pageClass,
+							"aria-label": ariaLabel,
+							"aria-current": void 0,
+							onClick: () => changePage(item.page),
+							children: item.page
+						}) : isCurrent ? /* @__PURE__ */ jsx("span", {
+							className: pageClass,
+							"aria-label": ariaLabel,
+							"aria-current": "page",
+							"aria-disabled": disabled || void 0,
+							children: item.page
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: pageClass,
+							"aria-label": ariaLabel,
+							"aria-current": isCurrent ? "page" : void 0,
+							disabled: disabled || isCurrent,
+							onClick: () => changePage(item.page),
+							children: item.page
+						})
+					}, item.page);
+				}),
+				/* @__PURE__ */ jsx("li", {
+					className: "puzzle-pagination__item",
+					children: renderControl("next", currentPage + 1, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "›"
+					}), resolvedLabels.next)
+				}),
+				showFirstLast && /* @__PURE__ */ jsx("li", {
+					className: "puzzle-pagination__item",
+					children: renderControl("last", totalPages, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "»"
+					}), resolvedLabels.last)
+				})
+			]
+		})
+	});
+};
+export { Pagination };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/navigation/pagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../link\";\n\nimport type {\n  PaginationItemType,\n  PaginationLabels,\n  PaginationProps,\n} from \"./pagination.types\";\n\nimport { getPaginationItems, normalizePage } from \"./pagination.utils\";\n\nimport \"./pagination.css\";\n\nconst defaultLabels: PaginationLabels = {\n  navigation: \"Pagination\",\n  first: \"Go to first page\",\n  previous: \"Go to previous page\",\n  next: \"Go to next page\",\n  last: \"Go to last page\",\n  ellipsis: \"More pages\",\n  page: (page) => `Go to page ${page}`,\n};\n\nconst Pagination = ({\n  totalPages,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showFirstLast = true,\n  disabled = false,\n  size = \"md\",\n  labels,\n  getPageHref,\n  getPageAriaLabel,\n  className,\n  ...navProps\n}: PaginationProps) => {\n  const [internalPage, setInternalPage] = useState(() =>\n    normalizePage(defaultPage, totalPages),\n  );\n\n  const isControlled = page !== undefined;\n  const currentPage = normalizePage(\n    isControlled ? page : internalPage,\n    totalPages,\n  );\n\n  const resolvedLabels = {\n    ...defaultLabels,\n    ...labels,\n  };\n\n  const items = getPaginationItems(\n    totalPages,\n    currentPage,\n    boundaryCount,\n    siblingCount,\n  );\n\n  const changePage = (nextPage: number) => {\n    if (disabled) return;\n\n    const normalizedPage = normalizePage(nextPage, totalPages);\n\n    if (normalizedPage === 0 || normalizedPage === currentPage) return;\n\n    if (!isControlled) {\n      setInternalPage(normalizedPage);\n    }\n\n    onPageChange?.(normalizedPage);\n  };\n\n  const renderControl = (\n    type: PaginationItemType,\n    targetPage: number,\n    content: React.ReactNode,\n    ariaLabel: string,\n  ) => {\n    const isDisabled =\n      disabled ||\n      totalPages === 0 ||\n      targetPage < 1 ||\n      targetPage > totalPages ||\n      targetPage === currentPage;\n\n    const controlClass = cn(\n      \"puzzle-pagination__control\",\n      \"puzzle-pagination__navigation\",\n      isDisabled && \"puzzle-pagination__control--disabled\",\n    );\n\n    if (getPageHref && !isDisabled) {\n      return (\n        <Link\n          href={getPageHref(targetPage)}\n          className={controlClass}\n          aria-label={ariaLabel}\n          onClick={() => changePage(targetPage)}\n          data-pagination-action={type}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        className={controlClass}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        onClick={() => changePage(targetPage)}\n        data-pagination-action={type}\n      >\n        {content}\n      </button>\n    );\n  };\n\n  return (\n    <nav\n      {...navProps}\n      aria-label={navProps[\"aria-label\"] ?? resolvedLabels.navigation}\n      className={cn(\n        \"puzzle-pagination\",\n        `puzzle-pagination--${size}`,\n        className,\n      )}\n      data-disabled={disabled || undefined}\n    >\n      <ul className=\"puzzle-pagination__list\">\n        {showFirstLast && (\n          <li className=\"puzzle-pagination__item\">\n            {renderControl(\n              \"first\",\n              1,\n              <span aria-hidden=\"true\">«</span>,\n              resolvedLabels.first,\n            )}\n          </li>\n        )}\n\n        <li className=\"puzzle-pagination__item\">\n          {renderControl(\n            \"previous\",\n            currentPage - 1,\n            <span aria-hidden=\"true\">‹</span>,\n            resolvedLabels.previous,\n          )}\n        </li>\n\n        {items.map((item) => {\n          if (item.type === \"ellipsis\") {\n            return (\n              <li\n                key={`ellipsis-${item.position}`}\n                className=\"puzzle-pagination__item\"\n              >\n                <span\n                  className=\"puzzle-pagination__ellipsis\"\n                  aria-label={resolvedLabels.ellipsis}\n                >\n                  …\n                </span>\n              </li>\n            );\n          }\n\n          const isCurrent = item.page === currentPage;\n          const ariaLabel =\n            getPageAriaLabel?.(item.page) ?? resolvedLabels.page(item.page);\n\n          const pageClass = cn(\n            \"puzzle-pagination__control\",\n            \"puzzle-pagination__page\",\n            isCurrent && \"puzzle-pagination__page--active\",\n          );\n\n          return (\n            <li key={item.page} className=\"puzzle-pagination__item\">\n              {getPageHref ? (\n                isCurrent ? (\n                  <span\n                    className={pageClass}\n                    aria-label={ariaLabel}\n                    aria-current=\"page\"\n                    aria-disabled={disabled || undefined}\n                  >\n                    {item.page}\n                  </span>\n                ) : disabled ? (\n                  <span\n                    className={cn(\n                      pageClass,\n                      \"puzzle-pagination__control--disabled\",\n                    )}\n                    aria-label={ariaLabel}\n                    aria-disabled=\"true\"\n                  >\n                    {item.page}\n                  </span>\n                ) : (\n                  <Link\n                    href={getPageHref(item.page)}\n                    className={pageClass}\n                    aria-label={ariaLabel}\n                    aria-current={undefined}\n                    onClick={() => changePage(item.page)}\n                  >\n                    {item.page}\n                  </Link>\n                )\n              ) : isCurrent ? (\n                <span\n                  className={pageClass}\n                  aria-label={ariaLabel}\n                  aria-current=\"page\"\n                  aria-disabled={disabled || undefined}\n                >\n                  {item.page}\n                </span>\n              ) : (\n                <button\n                  type=\"button\"\n                  className={pageClass}\n                  aria-label={ariaLabel}\n                  aria-current={isCurrent ? \"page\" : undefined}\n                  disabled={disabled || isCurrent}\n                  onClick={() => changePage(item.page)}\n                >\n                  {item.page}\n                </button>\n              )}\n            </li>\n          );\n        })}\n\n        <li className=\"puzzle-pagination__item\">\n          {renderControl(\n            \"next\",\n            currentPage + 1,\n            <span aria-hidden=\"true\">›</span>,\n            resolvedLabels.next,\n          )}\n        </li>\n\n        {showFirstLast && (\n          <li className=\"puzzle-pagination__item\">\n            {renderControl(\n              \"last\",\n              totalPages,\n              <span aria-hidden=\"true\">»</span>,\n              resolvedLabels.last,\n            )}\n          </li>\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nexport { Pagination, type PaginationProps };\n"],"mappings":"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"}

package/dist/components/navigation/pagination/pagination.css

@@ -0,0 +1,134 @@
+.puzzle-pagination {
+  --puzzle-pagination-size: 2.25rem;
+  --puzzle-pagination-gap: var(--puzzle-space-1, .25rem);
+  --puzzle-pagination-radius: var(--puzzle-radius-md, .375rem);
+  --puzzle-pagination-color: var(--puzzle-color-text, #171717);
+  --puzzle-pagination-muted: var(--puzzle-color-text-muted, #737373);
+  --puzzle-pagination-border: var(--puzzle-color-border, #e5e0d6);
+  --puzzle-pagination-active-bg: var(--puzzle-color-primary);
+  --puzzle-pagination-active-color: var(--puzzle-color-on-primary, #fff);
+  --puzzle-pagination-focus: var(--puzzle-color-ring, currentColor);
+  width: fit-content;
+  max-width: 100%;
+  color: var(--puzzle-pagination-color);
+  display: flex;
+}
+
+.puzzle-pagination--sm {
+  --puzzle-pagination-size: 1.875rem;
+}
+
+.puzzle-pagination--md {
+  --puzzle-pagination-size: 2.25rem;
+}
+
+.puzzle-pagination__list {
+  justify-content: center;
+  align-items: center;
+  gap: var(--puzzle-pagination-gap);
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-pagination__item {
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.puzzle-pagination__control {
+  width: var(--puzzle-pagination-size);
+  height: var(--puzzle-pagination-size);
+  border-radius: var(--puzzle-pagination-radius);
+  color: var(--puzzle-pagination-color);
+  font-family: inherit;
+  font-size: var(--puzzle-font-size-body2, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        color var(--puzzle-duration-fast, .15s) ease,
+        border-color var(--puzzle-duration-fast, .15s) ease;
+  background: none;
+  border: 1px solid #0000;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 1;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.puzzle-pagination__control:hover:not(:disabled):not(.puzzle-pagination__control--disabled):not(.puzzle-pagination__page--active) {
+  background: var(--puzzle-color-action-hover, #8080801a);
+}
+
+.puzzle-pagination__control:focus-visible {
+  outline: 2px solid var(--puzzle-pagination-focus);
+  outline-offset: 2px;
+}
+
+.puzzle-pagination__page--active {
+  border-color: var(--puzzle-pagination-active-bg);
+  background: var(--puzzle-pagination-active-bg);
+  color: var(--puzzle-pagination-active-color);
+  cursor: default;
+}
+
+.puzzle-pagination__navigation {
+  border-color: var(--puzzle-pagination-border);
+  font-size: 1.25rem;
+}
+
+.puzzle-pagination__control:disabled, .puzzle-pagination__control--disabled {
+  color: var(--puzzle-pagination-muted);
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.puzzle-pagination__ellipsis {
+  width: var(--puzzle-pagination-size);
+  height: var(--puzzle-pagination-size);
+  color: var(--puzzle-pagination-muted);
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  display: inline-flex;
+}
+
+.puzzle-pagination[data-disabled] {
+  opacity: .65;
+}
+
+@media (forced-colors: active) {
+  .puzzle-pagination__control {
+    border-color: buttontext;
+  }
+
+  .puzzle-pagination__page--active {
+    color: highlighttext;
+    background: highlight;
+    border: 2px solid highlight;
+  }
+
+  .puzzle-pagination__control:focus-visible {
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-pagination__control:disabled, .puzzle-pagination__control--disabled {
+    color: graytext;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-pagination__control {
+    transition: none;
+  }
+}

package/dist/components/navigation/pagination/pagination.types.d.cts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef } from "react";
+type PaginationSize = "sm" | "md";
+type PaginationLabels = {
+  navigation: string;
+  first: string;
+  previous: string;
+  next: string;
+  last: string;
+  ellipsis: string;
+  page: (page: number) => string;
+};
+type PaginationProps = Omit<ComponentPropsWithoutRef<"nav">, "children" | "onChange"> & {
+  /** Total number of available pages. */
+  totalPages: number;
+  /** Current page for controlled usage. Pages start at 1. */
+  page?: number;
+  /** Initial page for uncontrolled usage. Defaults to 1. */
+  defaultPage?: number;
+  /** Called when the selected page changes. */
+  onPageChange?: (page: number) => void;
+  /** Number of pages displayed around the current page. */
+  siblingCount?: number;
+  /** Number of pages always displayed at both boundaries. */
+  boundaryCount?: number;
+  /** Whether first and last page controls are displayed. */
+  showFirstLast?: boolean;
+  /** Whether all pagination controls are disabled. */
+  disabled?: boolean;
+  /** Visual size of the pagination controls. */
+  size?: PaginationSize;
+  /** Accessible labels for navigation controls. */
+  labels?: Partial<PaginationLabels>;
+  /** Generate a URL for a page instead of using a button. */
+  getPageHref?: (page: number) => string;
+  /** Accessible label for a specific page. */
+  getPageAriaLabel?: (page: number) => string;
+};
+export type { PaginationLabels, PaginationProps, PaginationSize };

package/dist/components/navigation/pagination/pagination.types.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef } from "react";
+type PaginationSize = "sm" | "md";
+type PaginationLabels = {
+  navigation: string;
+  first: string;
+  previous: string;
+  next: string;
+  last: string;
+  ellipsis: string;
+  page: (page: number) => string;
+};
+type PaginationProps = Omit<ComponentPropsWithoutRef<"nav">, "children" | "onChange"> & {
+  /** Total number of available pages. */
+  totalPages: number;
+  /** Current page for controlled usage. Pages start at 1. */
+  page?: number;
+  /** Initial page for uncontrolled usage. Defaults to 1. */
+  defaultPage?: number;
+  /** Called when the selected page changes. */
+  onPageChange?: (page: number) => void;
+  /** Number of pages displayed around the current page. */
+  siblingCount?: number;
+  /** Number of pages always displayed at both boundaries. */
+  boundaryCount?: number;
+  /** Whether first and last page controls are displayed. */
+  showFirstLast?: boolean;
+  /** Whether all pagination controls are disabled. */
+  disabled?: boolean;
+  /** Visual size of the pagination controls. */
+  size?: PaginationSize;
+  /** Accessible labels for navigation controls. */
+  labels?: Partial<PaginationLabels>;
+  /** Generate a URL for a page instead of using a button. */
+  getPageHref?: (page: number) => string;
+  /** Accessible label for a specific page. */
+  getPageAriaLabel?: (page: number) => string;
+};
+export type { PaginationLabels, PaginationProps, PaginationSize };

package/dist/components/navigation/pagination/pagination.utils.cjs

@@ -0,0 +1,54 @@
+// src/components/navigation/pagination/pagination.utils.ts
+const normalizeCount = (value) => Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+const getPaginationItems = (totalPages, currentPage, boundaryCount = 1, siblingCount = 1) => {
+	const total = normalizeCount(totalPages);
+	const boundaries = normalizeCount(boundaryCount);
+	const siblings = normalizeCount(siblingCount);
+	if (total === 0) return [];
+	const page = Math.min(Math.max(1, normalizeCount(currentPage)), total);
+	if (total <= boundaries * 2 + siblings * 2 + 3) return Array.from({ length: total }, (_, index) => ({
+		type: "page",
+		page: index + 1
+	}));
+	const visiblePages = /* @__PURE__ */ new Set();
+	for (let index = 1; index <= Math.min(boundaries, total); index += 1) visiblePages.add(index);
+	for (let index = Math.max(1, total - boundaries + 1); index <= total; index += 1) visiblePages.add(index);
+	for (let index = Math.max(1, page - siblings); index <= Math.min(total, page + siblings); index += 1) visiblePages.add(index);
+	if (page - siblings <= boundaries + 1) visiblePages.add(boundaries + siblings + 1);
+	if (page + siblings >= total - boundaries - 1) visiblePages.add(total - boundaries - siblings);
+	const pages = [...visiblePages].sort((a, b) => a - b);
+	const items = [];
+	pages.forEach((current, index) => {
+		if (index === 0) {
+			items.push({
+				type: "page",
+				page: current
+			});
+			return;
+		}
+		const previous = pages[index - 1];
+		const difference = current - previous;
+		if (difference === 2) items.push({
+			type: "page",
+			page: previous + 1
+		});
+		else if (difference > 2) items.push({
+			type: "ellipsis",
+			position: index === 1 ? "start" : "end"
+		});
+		items.push({
+			type: "page",
+			page: current
+		});
+	});
+	return items;
+};
+const normalizePage = (page, totalPages) => {
+	const total = normalizeCount(totalPages);
+	if (total === 0) return 0;
+	return Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), total);
+};
+exports.getPaginationItems = getPaginationItems;
+exports.normalizePage = normalizePage;
+
+//# sourceMappingURL=pagination.utils.cjs.map

package/dist/components/navigation/pagination/pagination.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.utils.cjs","names":[],"sources":["../../../../src/components/navigation/pagination/pagination.utils.ts"],"sourcesContent":["import type { PaginationItem } from \"./pagination.types\";\n\nconst normalizeCount = (value: number) =>\n  Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;\n\nconst getPaginationItems = (\n  totalPages: number,\n  currentPage: number,\n  boundaryCount = 1,\n  siblingCount = 1,\n): PaginationItem[] => {\n  const total = normalizeCount(totalPages);\n  const boundaries = normalizeCount(boundaryCount);\n  const siblings = normalizeCount(siblingCount);\n\n  if (total === 0) return [];\n\n  const page = Math.min(Math.max(1, normalizeCount(currentPage)), total);\n\n  if (total <= boundaries * 2 + siblings * 2 + 3) {\n    return Array.from({ length: total }, (_, index) => ({\n      type: \"page\",\n      page: index + 1,\n    }));\n  }\n\n  const visiblePages = new Set<number>();\n\n  for (let index = 1; index <= Math.min(boundaries, total); index += 1) {\n    visiblePages.add(index);\n  }\n\n  for (\n    let index = Math.max(1, total - boundaries + 1);\n    index <= total;\n    index += 1\n  ) {\n    visiblePages.add(index);\n  }\n\n  for (\n    let index = Math.max(1, page - siblings);\n    index <= Math.min(total, page + siblings);\n    index += 1\n  ) {\n    visiblePages.add(index);\n  }\n\n  if (page - siblings <= boundaries + 1) {\n    visiblePages.add(boundaries + siblings + 1);\n  }\n\n  if (page + siblings >= total - boundaries - 1) {\n    visiblePages.add(total - boundaries - siblings);\n  }\n\n  const pages = [...visiblePages].sort((a, b) => a - b);\n  const items: PaginationItem[] = [];\n\n  pages.forEach((current, index) => {\n    if (index === 0) {\n      items.push({ type: \"page\", page: current });\n      return;\n    }\n\n    const previous = pages[index - 1]!;\n    const difference = current - previous;\n\n    if (difference === 2) {\n      items.push({\n        type: \"page\",\n        page: previous + 1,\n      });\n    } else if (difference > 2) {\n      items.push({\n        type: \"ellipsis\",\n        position: index === 1 ? \"start\" : \"end\",\n      });\n    }\n\n    items.push({\n      type: \"page\",\n      page: current,\n    });\n  });\n\n  return items;\n};\n\nconst normalizePage = (page: number, totalPages: number) => {\n  const total = normalizeCount(totalPages);\n\n  if (total === 0) return 0;\n\n  const normalized = Number.isFinite(page) ? Math.floor(page) : 1;\n\n  return Math.min(Math.max(1, normalized), total);\n};\n\nexport { getPaginationItems, normalizePage };\n"],"mappings":";AAEA,MAAM,kBAAkB,UACtB,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,IAAI;AAE5D,MAAM,sBACJ,YACA,aACA,gBAAgB,GAChB,eAAe,MACM;CACrB,MAAM,QAAQ,eAAe,UAAU;CACvC,MAAM,aAAa,eAAe,aAAa;CAC/C,MAAM,WAAW,eAAe,YAAY;CAE5C,IAAI,UAAU,GAAG,OAAO,CAAC;CAEzB,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,eAAe,WAAW,CAAC,GAAG,KAAK;CAErE,IAAI,SAAS,aAAa,IAAI,WAAW,IAAI,GAC3C,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,WAAW;EAClD,MAAM;EACN,MAAM,QAAQ;CAChB,EAAE;CAGJ,MAAM,+BAAe,IAAI,IAAY;CAErC,KAAK,IAAI,QAAQ,GAAG,SAAS,KAAK,IAAI,YAAY,KAAK,GAAG,SAAS,GACjE,aAAa,IAAI,KAAK;CAGxB,KACE,IAAI,QAAQ,KAAK,IAAI,GAAG,QAAQ,aAAa,CAAC,GAC9C,SAAS,OACT,SAAS,GAET,aAAa,IAAI,KAAK;CAGxB,KACE,IAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,QAAQ,GACvC,SAAS,KAAK,IAAI,OAAO,OAAO,QAAQ,GACxC,SAAS,GAET,aAAa,IAAI,KAAK;CAGxB,IAAI,OAAO,YAAY,aAAa,GAClC,aAAa,IAAI,aAAa,WAAW,CAAC;CAG5C,IAAI,OAAO,YAAY,QAAQ,aAAa,GAC1C,aAAa,IAAI,QAAQ,aAAa,QAAQ;CAGhD,MAAM,QAAQ,CAAC,GAAG,YAAY,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CACpD,MAAM,QAA0B,CAAC;CAEjC,MAAM,SAAS,SAAS,UAAU;EAChC,IAAI,UAAU,GAAG;GACf,MAAM,KAAK;IAAE,MAAM;IAAQ,MAAM;GAAQ,CAAC;GAC1C;EACF;EAEA,MAAM,WAAW,MAAM,QAAQ;EAC/B,MAAM,aAAa,UAAU;EAE7B,IAAI,eAAe,GACjB,MAAM,KAAK;GACT,MAAM;GACN,MAAM,WAAW;EACnB,CAAC;OACI,IAAI,aAAa,GACtB,MAAM,KAAK;GACT,MAAM;GACN,UAAU,UAAU,IAAI,UAAU;EACpC,CAAC;EAGH,MAAM,KAAK;GACT,MAAM;GACN,MAAM;EACR,CAAC;CACH,CAAC;CAED,OAAO;AACT;AAEA,MAAM,iBAAiB,MAAc,eAAuB;CAC1D,MAAM,QAAQ,eAAe,UAAU;CAEvC,IAAI,UAAU,GAAG,OAAO;CAIxB,OAAO,KAAK,IAAI,KAAK,IAAI,GAFN,OAAO,SAAS,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAExB,GAAG,KAAK;AAChD"}

package/dist/components/navigation/pagination/pagination.utils.js

@@ -0,0 +1,53 @@
+// src/components/navigation/pagination/pagination.utils.ts
+const normalizeCount = (value) => Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+const getPaginationItems = (totalPages, currentPage, boundaryCount = 1, siblingCount = 1) => {
+	const total = normalizeCount(totalPages);
+	const boundaries = normalizeCount(boundaryCount);
+	const siblings = normalizeCount(siblingCount);
+	if (total === 0) return [];
+	const page = Math.min(Math.max(1, normalizeCount(currentPage)), total);
+	if (total <= boundaries * 2 + siblings * 2 + 3) return Array.from({ length: total }, (_, index) => ({
+		type: "page",
+		page: index + 1
+	}));
+	const visiblePages = /* @__PURE__ */ new Set();
+	for (let index = 1; index <= Math.min(boundaries, total); index += 1) visiblePages.add(index);
+	for (let index = Math.max(1, total - boundaries + 1); index <= total; index += 1) visiblePages.add(index);
+	for (let index = Math.max(1, page - siblings); index <= Math.min(total, page + siblings); index += 1) visiblePages.add(index);
+	if (page - siblings <= boundaries + 1) visiblePages.add(boundaries + siblings + 1);
+	if (page + siblings >= total - boundaries - 1) visiblePages.add(total - boundaries - siblings);
+	const pages = [...visiblePages].sort((a, b) => a - b);
+	const items = [];
+	pages.forEach((current, index) => {
+		if (index === 0) {
+			items.push({
+				type: "page",
+				page: current
+			});
+			return;
+		}
+		const previous = pages[index - 1];
+		const difference = current - previous;
+		if (difference === 2) items.push({
+			type: "page",
+			page: previous + 1
+		});
+		else if (difference > 2) items.push({
+			type: "ellipsis",
+			position: index === 1 ? "start" : "end"
+		});
+		items.push({
+			type: "page",
+			page: current
+		});
+	});
+	return items;
+};
+const normalizePage = (page, totalPages) => {
+	const total = normalizeCount(totalPages);
+	if (total === 0) return 0;
+	return Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), total);
+};
+export { getPaginationItems, normalizePage };
+
+//# sourceMappingURL=pagination.utils.js.map

package/dist/components/navigation/pagination/pagination.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.utils.js","names":[],"sources":["../../../../src/components/navigation/pagination/pagination.utils.ts"],"sourcesContent":["import type { PaginationItem } from \"./pagination.types\";\n\nconst normalizeCount = (value: number) =>\n  Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;\n\nconst getPaginationItems = (\n  totalPages: number,\n  currentPage: number,\n  boundaryCount = 1,\n  siblingCount = 1,\n): PaginationItem[] => {\n  const total = normalizeCount(totalPages);\n  const boundaries = normalizeCount(boundaryCount);\n  const siblings = normalizeCount(siblingCount);\n\n  if (total === 0) return [];\n\n  const page = Math.min(Math.max(1, normalizeCount(currentPage)), total);\n\n  if (total <= boundaries * 2 + siblings * 2 + 3) {\n    return Array.from({ length: total }, (_, index) => ({\n      type: \"page\",\n      page: index + 1,\n    }));\n  }\n\n  const visiblePages = new Set<number>();\n\n  for (let index = 1; index <= Math.min(boundaries, total); index += 1) {\n    visiblePages.add(index);\n  }\n\n  for (\n    let index = Math.max(1, total - boundaries + 1);\n    index <= total;\n    index += 1\n  ) {\n    visiblePages.add(index);\n  }\n\n  for (\n    let index = Math.max(1, page - siblings);\n    index <= Math.min(total, page + siblings);\n    index += 1\n  ) {\n    visiblePages.add(index);\n  }\n\n  if (page - siblings <= boundaries + 1) {\n    visiblePages.add(boundaries + siblings + 1);\n  }\n\n  if (page + siblings >= total - boundaries - 1) {\n    visiblePages.add(total - boundaries - siblings);\n  }\n\n  const pages = [...visiblePages].sort((a, b) => a - b);\n  const items: PaginationItem[] = [];\n\n  pages.forEach((current, index) => {\n    if (index === 0) {\n      items.push({ type: \"page\", page: current });\n      return;\n    }\n\n    const previous = pages[index - 1]!;\n    const difference = current - previous;\n\n    if (difference === 2) {\n      items.push({\n        type: \"page\",\n        page: previous + 1,\n      });\n    } else if (difference > 2) {\n      items.push({\n        type: \"ellipsis\",\n        position: index === 1 ? \"start\" : \"end\",\n      });\n    }\n\n    items.push({\n      type: \"page\",\n      page: current,\n    });\n  });\n\n  return items;\n};\n\nconst normalizePage = (page: number, totalPages: number) => {\n  const total = normalizeCount(totalPages);\n\n  if (total === 0) return 0;\n\n  const normalized = Number.isFinite(page) ? Math.floor(page) : 1;\n\n  return Math.min(Math.max(1, normalized), total);\n};\n\nexport { getPaginationItems, normalizePage };\n"],"mappings":";AAEA,MAAM,kBAAkB,UACtB,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,IAAI;AAE5D,MAAM,sBACJ,YACA,aACA,gBAAgB,GAChB,eAAe,MACM;CACrB,MAAM,QAAQ,eAAe,UAAU;CACvC,MAAM,aAAa,eAAe,aAAa;CAC/C,MAAM,WAAW,eAAe,YAAY;CAE5C,IAAI,UAAU,GAAG,OAAO,CAAC;CAEzB,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,eAAe,WAAW,CAAC,GAAG,KAAK;CAErE,IAAI,SAAS,aAAa,IAAI,WAAW,IAAI,GAC3C,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,WAAW;EAClD,MAAM;EACN,MAAM,QAAQ;CAChB,EAAE;CAGJ,MAAM,+BAAe,IAAI,IAAY;CAErC,KAAK,IAAI,QAAQ,GAAG,SAAS,KAAK,IAAI,YAAY,KAAK,GAAG,SAAS,GACjE,aAAa,IAAI,KAAK;CAGxB,KACE,IAAI,QAAQ,KAAK,IAAI,GAAG,QAAQ,aAAa,CAAC,GAC9C,SAAS,OACT,SAAS,GAET,aAAa,IAAI,KAAK;CAGxB,KACE,IAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,QAAQ,GACvC,SAAS,KAAK,IAAI,OAAO,OAAO,QAAQ,GACxC,SAAS,GAET,aAAa,IAAI,KAAK;CAGxB,IAAI,OAAO,YAAY,aAAa,GAClC,aAAa,IAAI,aAAa,WAAW,CAAC;CAG5C,IAAI,OAAO,YAAY,QAAQ,aAAa,GAC1C,aAAa,IAAI,QAAQ,aAAa,QAAQ;CAGhD,MAAM,QAAQ,CAAC,GAAG,YAAY,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CACpD,MAAM,QAA0B,CAAC;CAEjC,MAAM,SAAS,SAAS,UAAU;EAChC,IAAI,UAAU,GAAG;GACf,MAAM,KAAK;IAAE,MAAM;IAAQ,MAAM;GAAQ,CAAC;GAC1C;EACF;EAEA,MAAM,WAAW,MAAM,QAAQ;EAC/B,MAAM,aAAa,UAAU;EAE7B,IAAI,eAAe,GACjB,MAAM,KAAK;GACT,MAAM;GACN,MAAM,WAAW;EACnB,CAAC;OACI,IAAI,aAAa,GACtB,MAAM,KAAK;GACT,MAAM;GACN,UAAU,UAAU,IAAI,UAAU;EACpC,CAAC;EAGH,MAAM,KAAK;GACT,MAAM;GACN,MAAM;EACR,CAAC;CACH,CAAC;CAED,OAAO;AACT;AAEA,MAAM,iBAAiB,MAAc,eAAuB;CAC1D,MAAM,QAAQ,eAAe,UAAU;CAEvC,IAAI,UAAU,GAAG,OAAO;CAIxB,OAAO,KAAK,IAAI,KAAK,IAAI,GAFN,OAAO,SAAS,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAExB,GAAG,KAAK;AAChD"}

package/dist/components/navigation/tabs/index.d.cts

@@ -24,7 +24,8 @@ type TabsProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange">
   children: ReactNode;
 };
 declare const TabsTab: ({ children }: TabsTabProps) => import("react").JSX.Element;
-declare const Tabs: (({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element) & {
-  Tab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+declare const TabsRoot: ({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element;
+declare const Tabs: typeof TabsRoot & {
+  Tab: typeof TabsTab;
 };
 export { Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps };

package/dist/components/navigation/tabs/index.d.ts

@@ -24,7 +24,8 @@ type TabsProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange">
   children: ReactNode;
 };
 declare const TabsTab: ({ children }: TabsTabProps) => import("react").JSX.Element;
-declare const Tabs: (({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element) & {
-  Tab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+declare const TabsRoot: ({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element;
+declare const Tabs: typeof TabsRoot & {
+  Tab: typeof TabsTab;
 };
 export { Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps };