@konstructio/ui 0.1.2-alpha.22 → 0.1.2-alpha.23

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -4,12 +4,12 @@ import { cn as c } from "../../utils/index.js";
 import { TableProvider as K } from "./contexts/table.provider.js";
 import { Filter as M } from "./components/Filter/Filter.js";
 import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
-import { Header as g } from "./components/Header/Header.js";
-import { Body as k } from "./components/Body/Body.js";
-import { Pagination as q } from "./components/Pagination/Pagination.js";
-import { TruncateText as C } from "./components/TruncateText/TruncateText.js";
-import { Actions as F } from "./components/Actions/Actions.js";
-const G = ({
+import { Header as k } from "./components/Header/Header.js";
+import { Body as q } from "./components/Body/Body.js";
+import { Pagination as C } from "./components/Pagination/Pagination.js";
+import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
+import { Actions as G } from "./components/Actions/Actions.js";
+const J = ({
   id: n,
   ariaLabel: f,
   columns: p,
@@ -26,8 +26,8 @@ const G = ({
   queryOptions: z,
   // Pagination
   showPagination: B,
-  showTotalItems: a,
-  showDropdownPagination: t,
+  showTotalItems: t,
+  showDropdownPagination: a,
   showDotPagination: l,
   showFormPagination: m,
   pageSizes: V,
@@ -41,8 +41,8 @@ const G = ({
 }) => {
   const e = I(
     () => B || [
-      a,
       t,
+      a,
       l,
       m
     ].some(Boolean),
@@ -82,37 +82,38 @@ const G = ({
                 "aria-label": f,
                 children: [
                   /* @__PURE__ */ r(
-                    g,
+                    k,
                     {
                       className: N,
                       classNameArrows: x,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(k, { isLoading: o })
+                  /* @__PURE__ */ r(q, { isLoading: o, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          q,
+          C,
           {
-            showTotalItems: a,
-            showDropdownPagination: t,
+            showTotalItems: t,
+            showDropdownPagination: a,
             showDotPagination: l,
             showFormPagination: m,
-            pageSizes: V
+            pageSizes: V,
+            isLoading: o
           }
         )
       ] })
     }
   );
-}, i = G;
+}, i = J;
 i.displayName = "KonstructVirtualizedTable";
-i.TruncateText = C;
-i.Actions = F;
+i.TruncateText = F;
+i.Actions = G;
 export {
-  C as TruncateText,
+  F as TruncateText,
   i as VirtualizedTable
 };

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,40 +1,48 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f } from "../../../../index-CSWGJT-v.js";
-import { Skeleton as p } from "../Skeleton/Skeleton.js";
-import { cn as m } from "../../../../utils/index.js";
-import { useTableContext as u } from "../../contexts/table.hook.js";
-const y = ({
-  isLoading: s
+import { jsx as t } from "react/jsx-runtime";
+import { f as x } from "../../../../index-CSWGJT-v.js";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import { cn as b } from "../../../../utils/index.js";
+import { useTableContext as N } from "../../contexts/table.hook.js";
+const j = ({
+  isLoading: d,
+  showPagination: a
 }) => {
-  const { table: r, pageSize: l, tableFetching: n } = u();
-  return s || n ? /* @__PURE__ */ e(p, { numberOfRows: l, table: r }) : /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, original: i, getVisibleCells: c }) => {
-    const { meta: o = {} } = i;
-    return /* @__PURE__ */ e(
+  const { table: o, pageSize: i, tableFetching: f } = N();
+  if (d || f)
+    return /* @__PURE__ */ t(y, { numberOfRows: i, table: o });
+  const e = o.getRowModel().rows ?? [];
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map(({ id: s, original: p, getVisibleCells: u }, l) => {
+    const { meta: n = {} } = p, m = u();
+    return /* @__PURE__ */ t(
       "tr",
       {
-        className: m(
-          "border-b border-b-gray-200 bg-white last:border-b-transparent",
-          o.className
+        className: b(
+          "border-b border-b-gray-200 last:border-b-transparent bg-transparent",
+          n.className
         ),
-        "data-row-id": a,
-        ...o.attributes ?? {},
-        children: c().map(({ id: b, column: t, getContext: d }) => /* @__PURE__ */ e(
+        "data-row-id": s,
+        ...n.attributes ?? {},
+        children: m.map(({ id: g, column: r, getContext: h }, c) => /* @__PURE__ */ t(
           "td",
           {
-            className: m(
-              "px-4 py-1 text-sm",
-              t.columnDef.meta?.className
+            className: b(
+              "px-4 py-1 text-sm bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": l === e.length - 1 && c === 0 || !a,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": l === e.length - 1 && c === m.length - 1 || !a
+              }
             ),
-            ...t.columnDef.meta?.attributes ?? {},
-            children: f(t.columnDef.cell, d())
+            ...r.columnDef.meta?.attributes ?? {},
+            children: x(r.columnDef.cell, h())
           },
-          b
+          g
         ))
       },
-      a
+      s
     );
   }) });
 };
 export {
-  y as Body
+  j as Body
 };

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -1,32 +1,33 @@
-import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { DotPaginate as p } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as f } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as x } from "../FormPaginate/FormPaginate.js";
-import { cn as u } from "../../../../utils/index.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
-import { DEFAULT_PAGE_SIZE as h } from "../../constants/pagination.js";
-const j = ({
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as f } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as x } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { cn as g } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as b } from "../../constants/pagination.js";
+const D = ({
   showTotalItems: a = !0,
   showDropdownPagination: i = !0,
   showDotPagination: n = !0,
   showFormPagination: s = !0,
   pageSizes: l,
-  classNamePagination: o
+  classNamePagination: o,
+  isLoading: m
 }) => {
   const {
     totalItems: r = -1 / 0,
-    tableFetching: m,
-    isFirstLoad: c
-  } = g();
-  return r <= h || m ? null : /* @__PURE__ */ t(d, { children: [
+    tableFetching: c,
+    isFirstLoad: d
+  } = h();
+  return r <= b || c || m ? null : /* @__PURE__ */ t(p, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: u(
+        className: g(
           "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
           o,
           {
-            "animate-in fade-in-10": !c
+            "animate-in fade-in-10": !d
           }
         ),
         children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
@@ -35,11 +36,11 @@ const j = ({
               r,
               " Results"
             ] }) : null,
-            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(f, { pageSizes: l }) })
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(x, { pageSizes: l }) })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(p, {}),
-            s && /* @__PURE__ */ e(x, {})
+            n && /* @__PURE__ */ e(f, {}),
+            s && /* @__PURE__ */ e(u, {})
           ] })
         ] })
       }
@@ -48,5 +49,5 @@ const j = ({
   ] });
 };
 export {
-  j as Pagination
+  D as Pagination
 };

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -1,52 +1,67 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as o } from "../../../Button/Button.js";
-import { cn as t } from "../../../../utils/index.js";
-import { useTableContext as m } from "../../contexts/table.hook.js";
-import { E as d } from "../../../../ellipsis-vertical-BVPtjl5f.js";
-const x = ({ numberOfRows: r, table: s }) => {
-  const { tableFetching: l, tableLoading: i } = m();
-  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: Array.from({ length: r }).map((c, n) => /* @__PURE__ */ e(
-    "tr",
-    {
-      className: "border-b border-b-gray-200 bg-white last:border-b-transparent",
-      children: s.getAllColumns().map(
-        (a) => a.id !== "actions" ? /* @__PURE__ */ e(
+import { jsx as t } from "react/jsx-runtime";
+import { Button as c } from "../../../Button/Button.js";
+import { cn as i } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { E as g } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const _ = ({ numberOfRows: n, table: o }) => {
+  const { tableFetching: d, tableLoading: m } = h(), e = Array.from({ length: n });
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map((p, a) => {
+    const s = o.getAllColumns();
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        className: "border-b border-b-gray-200 bg-transparent last:border-b-transparent",
+        children: s.map((r, l) => r.id !== "actions" ? /* @__PURE__ */ t(
           "td",
           {
-            className: t("px-4 py-1", a.columnDef.meta?.className),
-            children: /* @__PURE__ */ e("div", { className: "animate-in fade-in-0", children: /* @__PURE__ */ e("div", { className: "bg-gray-200 animate-pulse rounded h-5 w-full" }) })
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t("div", { className: "animate-in fade-in-0", children: /* @__PURE__ */ t("div", { className: "bg-gray-200 animate-pulse rounded h-5 w-full" }) })
           },
-          `skeleton-${a.id}`
-        ) : /* @__PURE__ */ e(
+          `skeleton-${r.id}`
+        ) : /* @__PURE__ */ t(
           "td",
           {
-            className: t("px-4 py-1", a.columnDef.meta?.className),
-            children: /* @__PURE__ */ e(
-              o,
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t(
+              c,
               {
                 variant: "text",
                 shape: "circle",
                 size: "large",
                 disabled: !0,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e(
-                  d,
+                children: /* @__PURE__ */ t(
+                  g,
                   {
-                    className: t("w-5 h-5 text-slate-400", {
-                      "text-gray-300 animate-pulse": l || i
+                    className: i("w-5 h-5 text-slate-400", {
+                      "text-gray-300 animate-pulse": d || m
                     })
                   }
                 )
               }
             )
           },
-          `skeleton-${a.id}`
-        )
-      )
-    },
-    `skeleton-row-${n}`
-  )) });
+          `skeleton-${r.id}`
+        ))
+      },
+      `skeleton-row-${a}`
+    );
+  }) });
 };
 export {
-  x as Skeleton
+  _ as Skeleton
 };

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.21",
+  "version": "0.1.2-alpha.22",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,13 +72,13 @@
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.553.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.11.1",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
     "react-remove-scroll": "^2.7.1",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.90",
@@ -115,9 +115,9 @@
   "devDependencies": {
     "@faker-js/faker": "^10.1.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.0.5",
-    "@storybook/addon-links": "^10.0.5",
-    "@storybook/react-vite": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/addon-links": "^10.0.6",
+    "@storybook/react-vite": "^10.0.6",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.90.7",
     "@testing-library/jest-dom": "^6.9.1",
@@ -128,8 +128,8 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.3",
-    "@typescript-eslint/parser": "^8.46.3",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
@@ -147,11 +147,11 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.1.0",
-    "storybook": "^10.0.5",
+    "storybook": "^10.0.6",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.1",
+    "vite": "^7.2.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.5.0",