@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -1,48 +1,45 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useRef as l, useCallback as p } from "react";
-import { Input as c } from "../../../Input/Input.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
-const h = () => {
-  const r = l(null), { totalPages: e, handlePage: o } = f(), m = p(
-    (n) => {
-      n.preventDefault();
-      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
-      o(u - 1), r.current?.reset();
-    },
-    [o, e]
-  );
-  return /* @__PURE__ */ i(
-    "form",
-    {
-      "aria-label": "footer-pagination",
-      ref: r,
-      onSubmit: m,
-      className: "flex items-center gap-2",
-      children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            type: "number",
-            className: "w-[72px] text-xs no-spinner",
-            name: "jump-to",
-            min: 1,
-            max: e,
-            required: !0
-          }
-        ),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            type: "submit",
-            className: "text-xs text-blue-600 p-2 cursor-pointer",
-            children: "Go"
-          }
-        )
-      ]
-    }
-  );
+import { t as i } from "../../../../Input-GBMxM3Z7.js";
+import { Button as p } from "../../../Button/Button.js";
+import { Typography as u } from "../../../Typography/Typography.js";
+import { useTableContext as l } from "../../contexts/table.hook.js";
+import { useCallback as c, useRef as f } from "react";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+var y = () => {
+  const r = f(null), { totalPages: t, handlePage: o } = l(), n = c((a) => {
+    a.preventDefault();
+    const s = new FormData(a.currentTarget), m = Number(s.get("jump-to"));
+    o(((m < t ? m : t) || 1) - 1), r.current?.reset();
+  }, [o, t]);
+  return /* @__PURE__ */ x("form", {
+    "aria-label": "footer-pagination",
+    ref: r,
+    onSubmit: n,
+    className: "flex items-center gap-2",
+    noValidate: !0,
+    children: [
+      /* @__PURE__ */ e(u, {
+        component: "span",
+        className: "text-sm min-w-fit tracking-normal",
+        children: "Jump to"
+      }),
+      /* @__PURE__ */ e(i, {
+        type: "number",
+        className: "w-18 text-sm no-spinner",
+        name: "jump-to",
+        min: 1,
+        max: t,
+        required: !0,
+        autoComplete: "off"
+      }),
+      /* @__PURE__ */ e(p, {
+        variant: "link",
+        type: "submit",
+        className: "text-xs p-2 cursor-pointer",
+        children: "Go"
+      })
+    ]
+  });
 };
 export {
-  h as FormPaginate
+  y as FormPaginate
 };

package/dist/components/VirtualizedTable/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from '../../VirtualizedTable.types';
+import { Props } from './Header.types';
+export declare const Header: <TData extends RowData>({ className, classNameArrows, classNameActiveArrows, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,81 +1,39 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { f as u } from "../../../../index-Dx2grAuN.js";
-import { useCallback as i } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import b from "../../assets/chevron-up.js";
-import g from "../../assets/chevron-down.js";
-import { useTableContext as S } from "../../contexts/table.hook.js";
-const y = ({
-  className: p,
-  classNameArrows: n,
-  classNameActiveArrows: l
-}) => {
-  const { table: c, onSorting: r } = S(), d = i(
-    (t) => r([{ id: t.id, desc: !1 }]),
-    [r]
-  ), x = i(
-    (t) => r([{ id: t.id, desc: !0 }]),
-    [r]
-  );
-  return /* @__PURE__ */ s(
-    "thead",
-    {
-      className: o(
-        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 w-full relative block overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
-        p
-      ),
-      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
-        "th",
-        {
-          scope: "col",
-          className: "px-4 py-3 text-left text-xs",
-          style: { width: e.columnDef.size },
-          children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 w-full", children: [
-            u(e.columnDef.header, h()),
-            e.getCanSort() && /* @__PURE__ */ a(
-              "div",
-              {
-                className: o(
-                  "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  n
-                ),
-                role: "presentation",
-                children: [
-                  /* @__PURE__ */ s(
-                    b,
-                    {
-                      className: o(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600": e.getIsSorted() === "asc"
-                        },
-                        l
-                      ),
-                      onClick: () => d(e)
-                    }
-                  ),
-                  /* @__PURE__ */ s(
-                    g,
-                    {
-                      className: o(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600": e.getIsSorted() === "desc"
-                        },
-                        l
-                      ),
-                      onClick: () => x(e)
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        },
-        m
-      )) }, t))
-    }
-  );
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { n as b } from "../../../../table.provider-4OQNqxH3.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import u from "../../assets/chevron-up.js";
+import k from "../../assets/chevron-down.js";
+import { useCallback as d } from "react";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var y = ({ className: n, classNameArrows: i, classNameActiveArrows: o }) => {
+  const { table: c, onSorting: s } = g(), m = d((t) => s([{
+    id: t.id,
+    desc: !1
+  }]), [s]), p = d((t) => s([{
+    id: t.id,
+    desc: !0
+  }]), [s]);
+  return /* @__PURE__ */ a("thead", {
+    className: r("font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", n),
+    children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ a("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ a("th", {
+      scope: "col",
+      className: r("px-4", "py-3", "text-left", "text-xs", "first:rounded-tl-lg", "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
+      children: /* @__PURE__ */ l("span", {
+        className: "flex items-center gap-2 w-full",
+        children: [b(e.columnDef.header, h()), e.getCanSort() && /* @__PURE__ */ l("div", {
+          className: r("flex flex-col text-slate-400 justify-center items-center gap-1", i),
+          role: "presentation",
+          children: [/* @__PURE__ */ a(u, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, o),
+            onClick: () => m(e)
+          }), /* @__PURE__ */ a(k, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, o),
+            onClick: () => p(e)
+          })]
+        })]
+      })
+    }, x)) }, t))
+  });
 };
 export {
   y as Header

package/dist/components/VirtualizedTable/components/Header/Header.types.d.ts

@@ -0,0 +1,5 @@
+export type Props = {
+    className?: string;
+    classNameArrows?: string;
+    classNameActiveArrows?: string;
+};

package/dist/components/VirtualizedTable/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Pagination.types';
+export declare const Pagination: FC<Props>;

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

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

package/dist/components/VirtualizedTable/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,9 @@
+export type Props = {
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+    classNamePagination?: string;
+    isLoading?: boolean;
+};

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton.types';
+export declare const Skeleton: <T>({ numberOfRows, table }: SkeletonProps<T>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,5 @@
+import { Table } from '@tanstack/react-table';
+export type SkeletonProps<T> = {
+    numberOfRows: number;
+    table: Table<T>;
+};

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './TruncateText.types';
+export declare const TruncateText: <TData>({ getValue, value, textClassName, side, sideOffset, bgClassName, arrowClassName, className, delayDuration, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;