@ktnpm_devops/react-component 0.5.0 → 0.6.0

package/dist/index28.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { clsx } from "./index47.js";
+import { clsx } from "./index48.js";
 import { useEscapeKey } from "./index5.js";
-import styles from "./index71.js";
+import styles from "./index69.js";
 const Modal = ({
   open,
   title,

package/dist/index29.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index47.cjs");
+const clsx = require("./index48.cjs");
 const useClickOutside = require("./index4.cjs");
 const constants = require("./index51.cjs");
-const MultiSelectDropdown_module = require("./index79.cjs");
+const MultiSelectDropdown_module = require("./index85.cjs");
 const arraysMatch = (a, b) => {
   if (a.length !== b.length) return false;
   const set = new Set(b);

package/dist/index29.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { clsx } from "./index47.js";
+import { clsx } from "./index48.js";
 import { useClickOutside } from "./index4.js";
 import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index51.js";
-import styles from "./index79.js";
+import styles from "./index85.js";
 const arraysMatch = (a, b) => {
   if (a.length !== b.length) return false;
   const set = new Set(b);

package/dist/index30.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index47.cjs");
-const NavItem_module = require("./index70.cjs");
+const clsx = require("./index48.cjs");
+const NavItem_module = require("./index57.cjs");
 const NavItem = react.forwardRef(
   ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/index30.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { clsx } from "./index47.js";
-import styles from "./index70.js";
+import { clsx } from "./index48.js";
+import styles from "./index57.js";
 const NavItem = forwardRef(
   ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/index31.cjs

@@ -2,81 +2,113 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const clsx = require("./index48.cjs");
 const constants = require("./index51.cjs");
-const ResizableSplitPanel_module = require("./index59.cjs");
-const FULL_PERCENT = 100;
-const ResizableSplitPanel = ({
-  leftPanel,
-  rightPanel,
-  defaultLeftWidth = 50,
-  minLeftWidth = 30,
-  minRightWidth = 30
-}) => {
-  const [leftWidth, setLeftWidth] = react.useState(defaultLeftWidth);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const clampWidth = react.useCallback(
-    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
-    [minLeftWidth, minRightWidth]
+const Pagination_module = require("./index74.cjs");
+function range(start, end) {
+  const out = [];
+  for (let page = start; page <= end; page += 1) out.push(page);
+  return out;
+}
+function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
+  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const startPages = range(1, boundaryCount);
+  const endPages = range(totalPages - boundaryCount + 1, totalPages);
+  const siblingsStart = Math.max(
+    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
   );
-  const handleMouseDown = react.useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-  const handleMouseMove = react.useCallback(
-    (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
-      setLeftWidth(clampWidth(pct));
-    },
-    [isDragging, clampWidth]
+  const siblingsEnd = Math.min(
+    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages[0] - 2
   );
-  const handleMouseUp = react.useCallback(() => setIsDragging(false), []);
-  react.useEffect(() => {
-    if (!isDragging) return;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w + constants.KEYBOARD_STEP));
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w - constants.KEYBOARD_STEP));
+  const items = [...startPages];
+  items.push(siblingsStart > boundaryCount + 2 ? "ellipsis" : boundaryCount + 1);
+  items.push(...range(siblingsStart, siblingsEnd));
+  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? "ellipsis" : totalPages - boundaryCount);
+  items.push(...endPages);
+  return items;
+}
+function Chevron({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: constants.ICON_SIZE.MD,
+      height: constants.ICON_SIZE.MD,
+      viewBox: constants.SVG_VIEWBOX,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: constants.SVG_STROKE_WIDTH,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: direction === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResizableSplitPanel_module.default.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: ResizableSplitPanel_module.default.divider,
-        onMouseDown: handleMouseDown,
-        onKeyDown: handleKeyDown,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-valuenow": Math.round(leftWidth),
-        "aria-label": "Resize panels",
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.dividerHandle, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
-        ] }) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
-  ] });
-};
-exports.ResizableSplitPanel = ResizableSplitPanel;
+  );
+}
+const Pagination = react.forwardRef(
+  ({
+    currentPage,
+    totalItems,
+    pageSize,
+    onPageChange,
+    siblingCount = constants.PAGINATION.SIBLING_COUNT,
+    boundaryCount = constants.PAGINATION.BOUNDARY_COUNT,
+    showPrevNext = true,
+    className,
+    "aria-label": ariaLabel = "Pagination",
+    ...props
+  }, ref) => {
+    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
+    const page = Math.min(Math.max(currentPage, 1), totalPages);
+    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);
+    const goTo = (target) => {
+      const next = Math.min(Math.max(target, 1), totalPages);
+      if (next !== page) onPageChange(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": ariaLabel, className: clsx.clsx(Pagination_module.default.root, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: Pagination_module.default.list, children: [
+      showPrevNext && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: Pagination_module.default.arrow,
+          onClick: () => goTo(page - 1),
+          disabled: page <= 1,
+          "aria-label": "Go to previous page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "left" })
+        }
+      ) }),
+      items.map(
+        (item, index) => item === "ellipsis" ? (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.ellipsis, "aria-hidden": "true", children: "…" }, `ellipsis-${index}`)
+        ) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: clsx.clsx(Pagination_module.default.page, item === page && Pagination_module.default.isActive),
+            onClick: () => goTo(item),
+            "aria-current": item === page ? "page" : void 0,
+            "aria-label": `Go to page ${item}`,
+            children: item
+          }
+        ) }, item)
+      ),
+      showPrevNext && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: Pagination_module.default.arrow,
+          onClick: () => goTo(page + 1),
+          disabled: page >= totalPages,
+          "aria-label": "Go to next page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "right" })
+        }
+      ) })
+    ] }) });
+  }
+);
+Pagination.displayName = "Pagination";
+exports.Pagination = Pagination;
 //# sourceMappingURL=index31.cjs.map

package/dist/index31.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index31.cjs","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","KEYBOARD_STEP","styles","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"index31.cjs","sources":["../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { ICON_SIZE, PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX } from '../../constants';\nimport type { PaginationItem, PaginationProps } from './Pagination.types';\nimport styles from './Pagination.module.css';\n\nfunction range(start: number, end: number): number[] {\n  const out: number[] = [];\n  for (let page = start; page <= end; page += 1) out.push(page);\n  return out;\n}\n\n/**\n * Builds the sequence of page numbers and ellipsis gaps to render, keeping the\n * first/last boundaries and a window of siblings around the current page.\n */\nfunction getPaginationItems(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PaginationItem[] {\n  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (totalPages <= totalNumbers) return range(1, totalPages);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(totalPages - boundaryCount + 1, totalPages);\n\n  const siblingsStart = Math.max(\n    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages[0] - 2,\n  );\n\n  const items: PaginationItem[] = [...startPages];\n  items.push(siblingsStart > boundaryCount + 2 ? 'ellipsis' : boundaryCount + 1);\n  items.push(...range(siblingsStart, siblingsEnd));\n  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : totalPages - boundaryCount);\n  items.push(...endPages);\n\n  return items;\n}\n\nfunction Chevron({ direction }: { direction: 'left' | 'right' }) {\n  return (\n    <svg\n      width={ICON_SIZE.MD}\n      height={ICON_SIZE.MD}\n      viewBox={SVG_VIEWBOX}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={SVG_STROKE_WIDTH}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />\n    </svg>\n  );\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      currentPage,\n      totalItems,\n      pageSize,\n      onPageChange,\n      siblingCount = PAGINATION.SIBLING_COUNT,\n      boundaryCount = PAGINATION.BOUNDARY_COUNT,\n      showPrevNext = true,\n      className,\n      'aria-label': ariaLabel = 'Pagination',\n      ...props\n    },\n    ref,\n  ) => {\n    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));\n    const page = Math.min(Math.max(currentPage, 1), totalPages);\n    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);\n\n    const goTo = (target: number) => {\n      const next = Math.min(Math.max(target, 1), totalPages);\n      if (next !== page) onPageChange(next);\n    };\n\n    return (\n      <nav ref={ref} aria-label={ariaLabel} className={clsx(styles.root, className)} {...props}>\n        <ul className={styles.list}>\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page - 1)}\n                disabled={page <= 1}\n                aria-label=\"Go to previous page\"\n              >\n                <Chevron direction=\"left\" />\n              </button>\n            </li>\n          )}\n\n          {items.map((item, index) =>\n            item === 'ellipsis' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n                &hellip;\n              </li>\n            ) : (\n              <li key={item}>\n                <button\n                  type=\"button\"\n                  className={clsx(styles.page, item === page && styles.isActive)}\n                  onClick={() => goTo(item)}\n                  aria-current={item === page ? 'page' : undefined}\n                  aria-label={`Go to page ${item}`}\n                >\n                  {item}\n                </button>\n              </li>\n            ),\n          )}\n\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page + 1)}\n                disabled={page >= totalPages}\n                aria-label=\"Go to next page\"\n              >\n                <Chevron direction=\"right\" />\n              </button>\n            </li>\n          )}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["jsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH","forwardRef","PAGINATION","clsx","styles"],"mappings":"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"}

package/dist/index31.js

@@ -1,82 +1,114 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { KEYBOARD_STEP } from "./index51.js";
-import styles from "./index59.js";
-const FULL_PERCENT = 100;
-const ResizableSplitPanel = ({
-  leftPanel,
-  rightPanel,
-  defaultLeftWidth = 50,
-  minLeftWidth = 30,
-  minRightWidth = 30
-}) => {
-  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef(null);
-  const clampWidth = useCallback(
-    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
-    [minLeftWidth, minRightWidth]
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index48.js";
+import { PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index51.js";
+import styles from "./index74.js";
+function range(start, end) {
+  const out = [];
+  for (let page = start; page <= end; page += 1) out.push(page);
+  return out;
+}
+function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
+  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const startPages = range(1, boundaryCount);
+  const endPages = range(totalPages - boundaryCount + 1, totalPages);
+  const siblingsStart = Math.max(
+    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
   );
-  const handleMouseDown = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
-      setLeftWidth(clampWidth(pct));
-    },
-    [isDragging, clampWidth]
+  const siblingsEnd = Math.min(
+    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages[0] - 2
   );
-  const handleMouseUp = useCallback(() => setIsDragging(false), []);
-  useEffect(() => {
-    if (!isDragging) return;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));
+  const items = [...startPages];
+  items.push(siblingsStart > boundaryCount + 2 ? "ellipsis" : boundaryCount + 1);
+  items.push(...range(siblingsStart, siblingsEnd));
+  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? "ellipsis" : totalPages - boundaryCount);
+  items.push(...endPages);
+  return items;
+}
+function Chevron({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: ICON_SIZE.MD,
+      height: ICON_SIZE.MD,
+      viewBox: SVG_VIEWBOX,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: SVG_STROKE_WIDTH,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: direction === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
     }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles.divider,
-        onMouseDown: handleMouseDown,
-        onKeyDown: handleKeyDown,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-valuenow": Math.round(leftWidth),
-        "aria-label": "Resize panels",
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsx("div", { className: styles.dividerHandle, children: /* @__PURE__ */ jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
-        ] }) })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: styles.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
-  ] });
-};
+  );
+}
+const Pagination = forwardRef(
+  ({
+    currentPage,
+    totalItems,
+    pageSize,
+    onPageChange,
+    siblingCount = PAGINATION.SIBLING_COUNT,
+    boundaryCount = PAGINATION.BOUNDARY_COUNT,
+    showPrevNext = true,
+    className,
+    "aria-label": ariaLabel = "Pagination",
+    ...props
+  }, ref) => {
+    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
+    const page = Math.min(Math.max(currentPage, 1), totalPages);
+    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);
+    const goTo = (target) => {
+      const next = Math.min(Math.max(target, 1), totalPages);
+      if (next !== page) onPageChange(next);
+    };
+    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, className: clsx(styles.root, className), ...props, children: /* @__PURE__ */ jsxs("ul", { className: styles.list, children: [
+      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.arrow,
+          onClick: () => goTo(page - 1),
+          disabled: page <= 1,
+          "aria-label": "Go to previous page",
+          children: /* @__PURE__ */ jsx(Chevron, { direction: "left" })
+        }
+      ) }),
+      items.map(
+        (item, index) => item === "ellipsis" ? (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsx("li", { className: styles.ellipsis, "aria-hidden": "true", children: "…" }, `ellipsis-${index}`)
+        ) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: clsx(styles.page, item === page && styles.isActive),
+            onClick: () => goTo(item),
+            "aria-current": item === page ? "page" : void 0,
+            "aria-label": `Go to page ${item}`,
+            children: item
+          }
+        ) }, item)
+      ),
+      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.arrow,
+          onClick: () => goTo(page + 1),
+          disabled: page >= totalPages,
+          "aria-label": "Go to next page",
+          children: /* @__PURE__ */ jsx(Chevron, { direction: "right" })
+        }
+      ) })
+    ] }) });
+  }
+);
+Pagination.displayName = "Pagination";
 export {
-  ResizableSplitPanel
+  Pagination
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index31.js","sources":["../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { ICON_SIZE, PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX } from '../../constants';\nimport type { PaginationItem, PaginationProps } from './Pagination.types';\nimport styles from './Pagination.module.css';\n\nfunction range(start: number, end: number): number[] {\n  const out: number[] = [];\n  for (let page = start; page <= end; page += 1) out.push(page);\n  return out;\n}\n\n/**\n * Builds the sequence of page numbers and ellipsis gaps to render, keeping the\n * first/last boundaries and a window of siblings around the current page.\n */\nfunction getPaginationItems(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PaginationItem[] {\n  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (totalPages <= totalNumbers) return range(1, totalPages);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(totalPages - boundaryCount + 1, totalPages);\n\n  const siblingsStart = Math.max(\n    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages[0] - 2,\n  );\n\n  const items: PaginationItem[] = [...startPages];\n  items.push(siblingsStart > boundaryCount + 2 ? 'ellipsis' : boundaryCount + 1);\n  items.push(...range(siblingsStart, siblingsEnd));\n  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : totalPages - boundaryCount);\n  items.push(...endPages);\n\n  return items;\n}\n\nfunction Chevron({ direction }: { direction: 'left' | 'right' }) {\n  return (\n    <svg\n      width={ICON_SIZE.MD}\n      height={ICON_SIZE.MD}\n      viewBox={SVG_VIEWBOX}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={SVG_STROKE_WIDTH}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />\n    </svg>\n  );\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      currentPage,\n      totalItems,\n      pageSize,\n      onPageChange,\n      siblingCount = PAGINATION.SIBLING_COUNT,\n      boundaryCount = PAGINATION.BOUNDARY_COUNT,\n      showPrevNext = true,\n      className,\n      'aria-label': ariaLabel = 'Pagination',\n      ...props\n    },\n    ref,\n  ) => {\n    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));\n    const page = Math.min(Math.max(currentPage, 1), totalPages);\n    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);\n\n    const goTo = (target: number) => {\n      const next = Math.min(Math.max(target, 1), totalPages);\n      if (next !== page) onPageChange(next);\n    };\n\n    return (\n      <nav ref={ref} aria-label={ariaLabel} className={clsx(styles.root, className)} {...props}>\n        <ul className={styles.list}>\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page - 1)}\n                disabled={page <= 1}\n                aria-label=\"Go to previous page\"\n              >\n                <Chevron direction=\"left\" />\n              </button>\n            </li>\n          )}\n\n          {items.map((item, index) =>\n            item === 'ellipsis' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n                &hellip;\n              </li>\n            ) : (\n              <li key={item}>\n                <button\n                  type=\"button\"\n                  className={clsx(styles.page, item === page && styles.isActive)}\n                  onClick={() => goTo(item)}\n                  aria-current={item === page ? 'page' : undefined}\n                  aria-label={`Go to page ${item}`}\n                >\n                  {item}\n                </button>\n              </li>\n            ),\n          )}\n\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page + 1)}\n                disabled={page >= totalPages}\n                aria-label=\"Go to next page\"\n              >\n                <Chevron direction=\"right\" />\n              </button>\n            </li>\n          )}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"names":[],"mappings":";;;;;AAMA,SAAS,MAAM,OAAe,KAAuB;AACnD,QAAM,MAAgB,CAAA;AACtB,WAAS,OAAO,OAAO,QAAQ,KAAK,QAAQ,EAAG,KAAI,KAAK,IAAI;AAC5D,SAAO;AACT;AAMA,SAAS,mBACP,aACA,YACA,cACA,eACkB;AAClB,QAAM,eAAe,gBAAgB,IAAI,eAAe,IAAI;AAC5D,MAAI,cAAc,aAAc,QAAO,MAAM,GAAG,UAAU;AAE1D,QAAM,aAAa,MAAM,GAAG,aAAa;AACzC,QAAM,WAAW,MAAM,aAAa,gBAAgB,GAAG,UAAU;AAEjE,QAAM,gBAAgB,KAAK;AAAA,IACzB,KAAK,IAAI,cAAc,cAAc,aAAa,gBAAgB,eAAe,IAAI,CAAC;AAAA,IACtF,gBAAgB;AAAA,EAAA;AAElB,QAAM,cAAc,KAAK;AAAA,IACvB,KAAK,IAAI,cAAc,cAAc,gBAAgB,eAAe,IAAI,CAAC;AAAA,IACzE,SAAS,CAAC,IAAI;AAAA,EAAA;AAGhB,QAAM,QAA0B,CAAC,GAAG,UAAU;AAC9C,QAAM,KAAK,gBAAgB,gBAAgB,IAAI,aAAa,gBAAgB,CAAC;AAC7E,QAAM,KAAK,GAAG,MAAM,eAAe,WAAW,CAAC;AAC/C,QAAM,KAAK,cAAc,aAAa,gBAAgB,IAAI,aAAa,aAAa,aAAa;AACjG,QAAM,KAAK,GAAG,QAAQ;AAEtB,SAAO;AACT;AAEA,SAAS,QAAQ,EAAE,aAA8C;AAC/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,UAAU;AAAA,MACjB,QAAQ,UAAU;AAAA,MAClB,SAAS;AAAA,MACT,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,8BAAC,YAAA,EAAS,QAAQ,cAAc,SAAS,oBAAoB,iBAAA,CAAkB;AAAA,IAAA;AAAA,EAAA;AAGrF;AAEO,MAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,gBAAgB,WAAW;AAAA,IAC3B,eAAe;AAAA,IACf;AAAA,IACA,cAAc,YAAY;AAAA,IAC1B,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC;AAC5E,UAAM,OAAO,KAAK,IAAI,KAAK,IAAI,aAAa,CAAC,GAAG,UAAU;AAC1D,UAAM,QAAQ,mBAAmB,MAAM,YAAY,cAAc,aAAa;AAE9E,UAAM,OAAO,CAAC,WAAmB;AAC/B,YAAM,OAAO,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,UAAU;AACrD,UAAI,SAAS,KAAM,cAAa,IAAI;AAAA,IACtC;AAEA,+BACG,OAAA,EAAI,KAAU,cAAY,WAAW,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,OACjF,+BAAC,MAAA,EAAG,WAAW,OAAO,MACnB,UAAA;AAAA,MAAA,oCACE,MAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS,MAAM,KAAK,OAAO,CAAC;AAAA,UAC5B,UAAU,QAAQ;AAAA,UAClB,cAAW;AAAA,UAEX,UAAA,oBAAC,SAAA,EAAQ,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA,GAE9B;AAAA,MAGD,MAAM;AAAA,QAAI,CAAC,MAAM,UAChB,SAAS;AAAA;AAAA,UAEP,oBAAC,MAAA,EAA6B,WAAW,OAAO,UAAU,eAAY,QAAO,UAAA,IAAA,GAApE,YAAY,KAAK,EAE1B;AAAA,gCAEC,MAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,KAAK,OAAO,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,YAC7D,SAAS,MAAM,KAAK,IAAI;AAAA,YACxB,gBAAc,SAAS,OAAO,SAAS;AAAA,YACvC,cAAY,cAAc,IAAI;AAAA,YAE7B,UAAA;AAAA,UAAA;AAAA,QAAA,KARI,IAUT;AAAA,MAAA;AAAA,MAIH,oCACE,MAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS,MAAM,KAAK,OAAO,CAAC;AAAA,UAC5B,UAAU,QAAQ;AAAA,UAClB,cAAW;AAAA,UAEX,UAAA,oBAAC,SAAA,EAAQ,WAAU,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,EAC7B,CACF;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;"}