unifyedx-storybook-new 0.1.12 → 0.1.13

package/dist/unifyedx-storybook-new.css

@@ -1431,7 +1431,7 @@
 }
 
 .pagination-select {
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  padding: 0.375rem 2rem 0.375rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 0.875rem;
@@ -1551,6 +1551,35 @@
   }
 }
 
+.page-input-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.page-input {
+  width: 2rem; /* 56px */
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Hides the default number input spinners on some browsers */
+
+.page-input::-webkit-outer-spin-button,
+.page-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.page-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 .radiogroup-wrapper {
   width: 100%;
   font-family: sans-serif;
@@ -5495,7 +5524,7 @@
 }
 
 .pagination-select {
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  padding: 0.375rem 2rem 0.375rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 0.875rem;
@@ -5613,6 +5642,33 @@
     justify-content: center;
   }
 }
+
+.page-input-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.page-input {
+  width: 2rem; /* 56px */
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Hides the default number input spinners on some browsers */
+.page-input::-webkit-outer-spin-button,
+.page-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.page-input[type="number"] {
+  -moz-appearance: textfield;
+}
 .radiogroup-wrapper {
   width: 100%;
   font-family: sans-serif;

package/dist/unifyedx-storybook-new.es.js

@@ -634,8 +634,11 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
+const __iconNode$i = [
+  ["path", { d: "m17 18-6-6 6-6", key: "1yerx2" }],
+  ["path", { d: "M7 6v12", key: "1p53r6" }]
+];
+const ChevronFirst = createLucideIcon("chevron-first", __iconNode$i);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -645,8 +648,11 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
+const __iconNode$h = [
+  ["path", { d: "m7 18 6-6-6-6", key: "lwmzdw" }],
+  ["path", { d: "M17 6v12", key: "1o0aio" }]
+];
+const ChevronLast = createLucideIcon("chevron-last", __iconNode$h);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -656,11 +662,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
  */
 
 
-const __iconNode$g = [
-  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
-  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
-];
-const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$g);
+const __iconNode$g = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$g);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -670,11 +673,8 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$g);
  */
 
 
-const __iconNode$f = [
-  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
-  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
-];
-const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$f);
+const __iconNode$f = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$f);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -39670,7 +39670,9 @@ const GenericFilter = ({
             isActive = Array.isArray(filterValue.values) && filterValue.values.length > 0;
             break;
           case "date":
-            isActive = filterValue.range && filterValue.range !== "";
+            if (filterValue.range && filterValue.range !== "" || Array.isArray(filterValue.values) && filterValue.values.length > 0) {
+              isActive = true;
+            }
             break;
         }
       }
@@ -40152,98 +40154,100 @@ const Pagination = ({
   itemsPerPageOptions = [10, 15, 20]
 }) => {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
-  const getPageNumbers = () => {
-    const pages = [];
-    pages.push(1);
-    const startPage = Math.max(2, currentPage - 1);
-    const endPage = Math.min(totalPages - 1, currentPage + 1);
-    if (startPage > 2) pages.push("...");
-    for (let i = startPage; i <= endPage; i++) {
-      pages.push(i);
-    }
-    if (endPage < totalPages - 1) pages.push("...");
-    if (totalPages > 1) pages.push(totalPages);
-    return pages;
-  };
-  const pageNumbers = getPageNumbers();
+  const [pageInput, setPageInput] = useState(currentPage);
+  useEffect(() => {
+    setPageInput(currentPage);
+  }, [currentPage]);
   const startIndex = Math.min((currentPage - 1) * itemsPerPage + 1, totalItems);
   const endIndex = Math.min(currentPage * itemsPerPage, totalItems);
+  const handlePageInput = (e) => {
+    e.preventDefault();
+    let newPage = parseInt(pageInput, 10);
+    if (isNaN(newPage) || newPage < 1) {
+      newPage = 1;
+    } else if (newPage > totalPages) {
+      newPage = totalPages;
+    }
+    setPageInput(newPage);
+    if (newPage !== currentPage) {
+      onPageChange(newPage);
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-container", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-left", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-select-container", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "items-per-page", className: "pagination-select-label", children: "Rows per page:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "select",
-          {
-            id: "items-per-page",
-            className: "pagination-select",
-            value: itemsPerPage,
-            onChange: (e) => onItemsPerPageChange(Number(e.target.value)),
-            "aria-label": "Items per page",
-            children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "items-per-page", className: "pagination-select-label", children: "Items per page:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "select",
+        {
+          id: "items-per-page",
+          className: "pagination-select",
+          value: itemsPerPage,
+          onChange: (e) => onItemsPerPageChange(Number(e.target.value)),
+          children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "pagination-info", children: [
         startIndex,
         "-",
         endIndex,
         " of ",
-        totalItems
+        totalItems,
+        " items"
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-right", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          className: "pagination-button pagination-nav-button",
+          className: "pagination-button",
           onClick: () => onPageChange(1),
           disabled: currentPage === 1,
-          "aria-label": "First page",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsLeft, { size: 16 })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronFirst, { size: 16 })
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          className: "pagination-button pagination-nav-button",
+          className: "pagination-button",
           onClick: () => onPageChange(currentPage - 1),
           disabled: currentPage === 1,
-          "aria-label": "Previous page",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pagination-numbers", children: pageNumbers.map(
-        (page, index) => page === "..." ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pagination-ellipsis", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handlePageInput, className: "page-input-form", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "page-input-label", children: "Page" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
           {
-            className: `pagination-number-button ${currentPage === page ? "active" : ""}`,
-            onClick: () => onPageChange(page),
-            "aria-current": currentPage === page ? "page" : void 0,
-            "aria-label": `Page ${page}`,
-            children: page
-          },
-          page
-        )
-      ) }),
+            type: "number",
+            className: "page-input",
+            value: pageInput,
+            onChange: (e) => setPageInput(e.target.value),
+            onBlur: handlePageInput,
+            "aria-label": `Current page, Page ${currentPage}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "page-input-total", children: [
+          "of ",
+          totalPages
+        ] })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          className: "pagination-button pagination-nav-button",
+          className: "pagination-button",
           onClick: () => onPageChange(currentPage + 1),
           disabled: currentPage === totalPages,
-          "aria-label": "Next page",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 16 })
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          className: "pagination-button pagination-nav-button",
+          className: "pagination-button",
           onClick: () => onPageChange(totalPages),
           disabled: currentPage === totalPages,
-          "aria-label": "Last page",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsRight, { size: 16 })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLast, { size: 16 })
         }
       )
     ] })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unifyedx-storybook-new",
   "private": false,
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",