@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.41

package/dist/components/Toast/Toast.variants.js

@@ -1,23 +1,36 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const t = a([
-  "rounded-md",
-  "shadow-md",
-  "p-4",
-  "flex",
-  "flex-col",
-  "relative",
-  "border",
-  "overflow-hidden",
-  "data-[state=open]:animate-slide-in",
-  "data-[state=closed]:animate-hide",
-  "data-[swipe=move]:translate-x-4",
-  "data-[swipe=cancel]:translate-x-0",
-  "data-[swipe=end]:animate-swipe-out",
-  "shadow-purple-200",
-  "border-purple-100",
-  "dark:border-none",
-  "dark:shadow-none"
-]), o = a([
+const e = a(
+  [
+    "rounded-md",
+    "p-4",
+    "flex",
+    "flex-row",
+    "relative",
+    "overflow-hidden",
+    "h-14",
+    "items-center",
+    "gap-8",
+    "data-[state=open]:animate-slide-in",
+    "data-[state=closed]:animate-hide",
+    "data-[swipe=move]:translate-x-4",
+    "data-[swipe=cancel]:translate-x-0",
+    "data-[swipe=end]:animate-swipe-out",
+    "text-white",
+    "shadow-[0px_2px_4px_0px_rgba(100,116,139,0.25)]"
+  ],
+  {
+    variants: {
+      variant: {
+        success: ["bg-green-800"],
+        error: ["bg-red-800"],
+        warning: ["bg-amber-800"]
+      }
+    },
+    defaultVariants: {
+      variant: "success"
+    }
+  }
+), i = a([
   "fixed",
   "bottom-0",
   "right-0",
@@ -30,15 +43,15 @@ const t = a([
   "m-0",
   "z-50",
   "outline-none"
-]), r = a([
+]), s = a([
   "top-2",
   "right-2",
   "w-4",
   "h-4",
-  "text-kubefirst-primary"
+  "text-white"
 ]);
 export {
-  r as closeToastVariants,
-  t as toastVariants,
-  o as viewportToastVariants
+  s as closeToastVariants,
+  e as toastVariants,
+  i as viewportToastVariants
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,28 +1,29 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { S as i } from "../../index-DQH6odE9.js";
-import { forwardRef as v, useRef as N, useImperativeHandle as w, useMemo as h, isValidElement as x } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { S as u } from "../../index-BtQfgaSF.js";
+import { forwardRef as v, useRef as N, useImperativeHandle as h, useMemo as w, isValidElement as x } from "react";
 import { cn as o } from "../../utils/index.js";
 import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
-import { useTooltip as b } from "./hooks/useTooltip.js";
+import { useTooltip as T } from "./hooks/useTooltip.js";
+import { Typography as b } from "../Typography/Typography.js";
 const I = v(
-  ({ children: r, content: l, className: m, theme: n, position: a, wrapperClassName: c }, p) => {
-    const f = N(null), { isVisible: d, componentRef: s } = b();
-    w(p, () => s.current, [s]);
-    const u = h(
+  ({ children: r, content: i, className: m, theme: l, position: a, wrapperClassName: n }, p) => {
+    const c = N(null), { isVisible: f, componentRef: t } = T();
+    h(p, () => t.current, [t]);
+    const d = w(
       () => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
       [r]
     );
-    return /* @__PURE__ */ e("div", { className: o("w-full", c), "data-theme": n, children: /* @__PURE__ */ t("div", { className: "relative w-max", children: [
-      /* @__PURE__ */ e(i, { ref: s, className: o("cursor-pointer ", m), children: u }),
-      /* @__PURE__ */ t(
+    return /* @__PURE__ */ e("div", { className: o("w-full", n), "data-theme": l, children: /* @__PURE__ */ s("div", { className: "relative w-max", children: [
+      /* @__PURE__ */ e(u, { ref: t, className: o("cursor-pointer ", m), children: d }),
+      /* @__PURE__ */ s(
         "div",
         {
-          ref: f,
+          ref: c,
           className: o(V({ position: a })),
-          "data-visible": d,
+          "data-visible": f,
           children: [
             /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
-            /* @__PURE__ */ e(i, { children: l })
+            /* @__PURE__ */ e(b, { variant: "tooltip", className: "text-white", children: i })
           ]
         }
       )

package/dist/components/Tooltip/Tooltip.variants.js

@@ -3,8 +3,9 @@ const a = r(
   [
     "absolute",
     "w-max",
-    "p-2.5",
-    "rounded-lg",
+    "py-2",
+    "px-[6px]",
+    "rounded-xs",
     "shadow-md",
     "transition-all",
     "ease-linear",
@@ -12,7 +13,7 @@ const a = r(
     "duration-250",
     "[&[data-visible='true']]:opacity-100",
     "delay-100",
-    "bg-kubefirst-primary"
+    "bg-slate-700"
   ],
   {
     variants: {
@@ -28,7 +29,7 @@ const a = r(
     }
   }
 ), o = r(
-  ["absolute", "w-0", "h-0", "border-kubefirst-primary"],
+  ["absolute", "w-0", "h-0", "border-slate-700"],
   {
     variants: {
       position: {

package/dist/components/Typography/Typography.variants.js

@@ -1,51 +1,46 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
+const a = t([], {
   variants: {
     variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
+      h1: ["text-[57px]", "leading-16"],
       h2: ["text-[45px]", "leading-[52px]"],
-      h3: ["text-[36px]", "leading-[44px]"],
-      h4: ["text-[32px]", "leading-[40px]"],
-      h5: ["text-[28px]", "leading-[36px]"],
-      h6: ["text-[24px]", "font-medium", "leading-[32px]", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-[28px]"],
-      subtitle2: [
-        "text-[16px]",
-        "font-medium",
-        "leading-[24px]",
-        "tracking-[0.15px]"
-      ],
+      h3: ["text-4xl", "leading-11"],
+      h4: ["text-[32px]", "leading-10"],
+      h5: ["text-[28px]", "leading-9"],
+      h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
+      subtitle1: ["text-[22px]", "leading-7"],
+      subtitle2: ["text-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
       subtitle3: [
         "text-[14px]",
         "font-medium",
-        "leading-[20px]",
+        "leading-5",
         "tracking-[0.1px]"
       ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
+      labelLarge: ["text-sm", "leading-5", "tracking-[0.1px]"],
       labelMedium: [
         "text-[12px]",
         "font-medium",
-        "leading-[16px]",
+        "leading-4",
         "tracking-[0.5px]",
         "uppercase"
       ],
       labelSmall: [
         "text-[11px]",
         "font-medium",
-        "leading-[16px]",
+        "leading-4",
         "tracking-[0.5px]",
         "uppercase"
       ],
       buttonSmall: [
         "text-[14px]",
         "font-semibold",
-        "leading-[20px]",
+        "leading-5",
         "tracking-[0.25px]"
       ],
-      body1: ["text-[16px]", "leading-[24px]", "tracking-[0.5px]"],
-      body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
-      body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
-      tooltip: ["text-[14px]", "leading-[22px]"]
+      body1: ["text-base", "leading-6", "tracking-[0.5px]"],
+      body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
+      body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
+      tooltip: ["text-sm", "leading-[22px]"]
     }
   },
   defaultVariants: {
@@ -53,5 +48,5 @@ const e = t([], {
   }
 });
 export {
-  e as typographyVariants
+  a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -0,0 +1,121 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useMemo as K } from "react";
+import { cn as c } from "../../utils/index.js";
+import { TableProvider as M } from "./contexts/table.provider.js";
+import { Filter as W } from "./components/Filter/Filter.js";
+import { WrapperBody as k } from "./components/WrapperBody/WrapperBody.js";
+import { Header as q } from "./components/Header/Header.js";
+import { Body as C } from "./components/Body/Body.js";
+import { Pagination as F } from "./components/Pagination/Pagination.js";
+import { TruncateText as G } from "./components/TruncateText/TruncateText.js";
+import { Actions as J } from "./components/Actions/Actions.js";
+const O = ({
+  id: n,
+  ariaLabel: f,
+  columns: p,
+  data: d,
+  totalItems: u = -1 / 0,
+  className: b,
+  classNameHeaderActiveArrows: T,
+  classNameHeaderArrows: x,
+  classNameHeaderTable: N,
+  classNameTable: A,
+  classNameWrapperTable: y,
+  isLoading: o,
+  fetchData: h,
+  queryOptions: z,
+  // Pagination
+  showPagination: B,
+  showTotalItems: t,
+  showDropdownPagination: a,
+  showDotPagination: l,
+  showFormPagination: m,
+  pageSizes: V,
+  // Filter
+  showFilter: j = !1,
+  showFilterInput: v,
+  filterSearchPlaceholder: w = "",
+  multiSelectFilter: P,
+  filterActions: E,
+  showResetButton: H = !0,
+  resetButtonClassName: I
+}) => {
+  const e = K(
+    () => B || [
+      t,
+      a,
+      l,
+      m
+    ].some(Boolean),
+    []
+  );
+  return /* @__PURE__ */ r(
+    M,
+    {
+      id: n,
+      columns: p,
+      data: d,
+      fetchData: h,
+      totalItems: u,
+      queryOptions: z,
+      isPaginationEnabled: e,
+      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
+        j && /* @__PURE__ */ r(
+          W,
+          {
+            actions: E,
+            multiSelectFilter: P,
+            placeholder: w,
+            showFilterInput: v,
+            showResetButton: H,
+            resetButtonClassName: I
+          }
+        ),
+        /* @__PURE__ */ r(
+          k,
+          {
+            showPagination: e,
+            classNameWrapperTable: y,
+            isLoading: o,
+            children: /* @__PURE__ */ s(
+              "table",
+              {
+                className: c("w-full border-collapse table-fixed", A),
+                "aria-label": f,
+                children: [
+                  /* @__PURE__ */ r(
+                    q,
+                    {
+                      className: N,
+                      classNameArrows: x,
+                      classNameActiveArrows: T
+                    }
+                  ),
+                  /* @__PURE__ */ r(C, { isLoading: o, showPagination: e })
+                ]
+              }
+            )
+          }
+        ),
+        e && /* @__PURE__ */ r(
+          F,
+          {
+            showTotalItems: t,
+            showDropdownPagination: a,
+            showDotPagination: l,
+            showFormPagination: m,
+            pageSizes: V,
+            isLoading: o
+          }
+        )
+      ] })
+    }
+  );
+}, i = O;
+i.displayName = "KonstructVirtualizedTable";
+i.TruncateText = G;
+i.Actions = J;
+export {
+  G as TruncateText,
+  i as VirtualizedTable
+};

package/dist/components/VirtualizedTable/VirtualizedTable.variants.js

@@ -0,0 +1,5 @@
+import { c as a } from "../../index-D29mdTf5.js";
+const t = a([]);
+export {
+  t as virtualizeTableVariants
+};

package/dist/components/VirtualizedTable/assets/chevron-down.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+const l = ({
+  className: t,
+  onClick: e
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "none",
+    className: t,
+    onClick: e,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  l as default
+};

package/dist/components/VirtualizedTable/assets/chevron-up.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+const l = ({
+  className: r,
+  onClick: t
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "currentColor",
+    className: r,
+    onClick: t,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  l as default
+};

package/dist/components/VirtualizedTable/assets/index.js

@@ -0,0 +1,6 @@
+import { default as r } from "./chevron-up.js";
+import { default as f } from "./chevron-down.js";
+export {
+  f as ChevronDown,
+  r as ChevronUp
+};

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -0,0 +1,72 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Button as t } from "../../../Button/Button.js";
+import { cn as r } from "../../../../utils/index.js";
+import { E as u } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const w = ({
+  actions: a,
+  wrapperClassName: l,
+  triggerButtonClassName: s,
+  iconTriggerButtonClassName: n,
+  wrapperActionsClassName: c,
+  wrapperContentActionsClassName: d,
+  ...h
+}) => a ? /* @__PURE__ */ i("div", { className: r("relative group", l), children: [
+  /* @__PURE__ */ i(
+    t,
+    {
+      variant: "text",
+      shape: "circle",
+      size: "large",
+      className: r(
+        "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+        s
+      ),
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ e(
+          u,
+          {
+            "aria-hidden": "true",
+            className: r("w-7 h-7", n)
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: r(
+        "absolute top-full right-0 w-[215px] hidden group-hover:block z-10",
+        c
+      ),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: r(
+            "bg-white mt-0.5 py-2 rounded-lg shadow-lg border border-zinc-100 animate-in fade-in-0",
+            d
+          ),
+          children: a.map(({ label: o, className: p, onClick: m }) => /* @__PURE__ */ e(
+            t,
+            {
+              className: r(
+                "w-full text-slate-800 cursor-pointer p-0 h-9 flex gap-2 text-sm font-normal justify-start hover:bg-gray-50 hover:text-slate-800 rounded-none px-6",
+                p
+              ),
+              variant: "text",
+              asChild: !0,
+              role: "presentation",
+              children: /* @__PURE__ */ e(t, { onClick: () => m(h.row.original), children: o })
+            },
+            o
+          ))
+        }
+      )
+    }
+  )
+] }) : null;
+export {
+  w as Actions
+};

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

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