@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.50

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-BvoZGpli.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.js

@@ -1,28 +1,26 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cn as n } from "../../utils/index.js";
-import { typographyVariants as c } from "./Typography.variants.js";
-const h = f(
-  ({ className: r, theme: p, children: m, variant: o, component: t, ...e }, a) => {
-    const s = t ?? (o?.includes("h") ? o : "p");
-    return /* @__PURE__ */ y(
-      s,
-      {
-        ref: a,
-        "data-theme": p,
-        className: n(
-          c({
-            className: r,
-            variant: o
-          })
-        ),
-        ...e,
-        children: m
-      }
-    );
-  }
-);
-h.displayName = "Typography";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cn as c } from "../../utils/index.js";
+import { typographyVariants as f } from "./Typography.variants.js";
+const h = y(({ className: r, theme: p, children: t, variant: o, component: m, ...e }, s) => {
+  const a = m ?? (o?.includes("h") ? o : "p");
+  return /* @__PURE__ */ n(
+    a,
+    {
+      ref: s,
+      "data-theme": p,
+      className: c(
+        f({
+          className: r,
+          variant: o
+        })
+      ),
+      ...e,
+      children: t
+    }
+  );
+});
+h.displayName = "KonstructTypography";
 export {
   h as Typography
 };

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

@@ -1,57 +1,60 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
-      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]"
-      ],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-[20px]",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-[20px]",
-        "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]"]
+const a = t(
+  ["text-slate-800", "dark:text-metal-50"],
+  {
+    variants: {
+      variant: {
+        h1: ["text-[57px]", "leading-16"],
+        h2: ["text-[45px]", "leading-13"],
+        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-5",
+          "tracking-[0.1px]"
+        ],
+        labelLarge: [
+          "text-sm",
+          "font-medium",
+          "text-slate-500",
+          "dark:text-metal-50"
+        ],
+        labelMedium: [
+          "text-[12px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        labelSmall: [
+          "text-[11px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        buttonSmall: [
+          "text-[14px]",
+          "font-semibold",
+          "leading-5",
+          "tracking-[0.25px]"
+        ],
+        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-5.5"]
+      }
+    },
+    defaultVariants: {
+      variant: "body1"
     }
-  },
-  defaultVariants: {
-    variant: "body1"
   }
-});
+);
 export {
-  e as typographyVariants
+  a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

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

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

@@ -1,46 +1,108 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Button as r } from "../../../Button/Button.js";
-import { c } from "../../../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const s = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-], n = c("ellipsis-vertical", s), u = ({
-  actions: t,
-  ...o
-}) => t ? /* @__PURE__ */ l("div", { className: "relative group w-fit", children: [
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { Button as a } from "../../../Button/Button.js";
+import { cn as e } from "../../../../utils/index.js";
+import { E as u } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const b = ({
+  actions: o,
+  wrapperClassName: i,
+  triggerButtonClassName: n,
+  iconTriggerButtonClassName: s,
+  wrapperActionsClassName: d,
+  wrapperContentActionsClassName: h,
+  ...c
+}) => o ? /* @__PURE__ */ l("div", { className: e("relative group", i), children: [
   /* @__PURE__ */ l(
-    r,
+    a,
     {
-      variant: "text",
+      variant: "link",
       shape: "circle",
       size: "large",
-      className: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+      className: e(
+        "text-slate-400",
+        "group-hover:text-slate-800",
+        "group-hover:bg-aurora-50",
+        "dark:text-metal-400",
+        "dark:group-hover:text-aurora-500",
+        "dark:group-hover:bg-aurora-900",
+        n
+      ),
       role: "presentation",
       children: [
-        /* @__PURE__ */ e(n, { "aria-hidden": "true", className: "w-7 h-7" }),
-        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
+        /* @__PURE__ */ r(
+          u,
+          {
+            "aria-hidden": "true",
+            className: e("w-7 h-7", s)
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "sr-only", children: "Show Actions" })
       ]
     }
   ),
-  /* @__PURE__ */ e("div", { className: "absolute top-full right-0 w-[215px] hidden group-hover:block z-10", children: /* @__PURE__ */ e("div", { className: "bg-white mt-0.5 py-2 rounded-lg shadow-lg border border-zinc-100 animate-in fade-in-0", children: t.map(({ label: i, onClick: a }) => /* @__PURE__ */ e(
-    r,
+  /* @__PURE__ */ r(
+    "div",
     {
-      className: "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",
-      variant: "text",
-      asChild: !0,
-      role: "presentation",
-      children: /* @__PURE__ */ e(r, { onClick: () => a(o.row.original), children: i })
-    },
-    i
-  )) }) })
+      className: e(
+        "absolute",
+        "top-full",
+        "right-0",
+        "w-53.75",
+        "hidden",
+        "group-hover:block",
+        "z-10",
+        d
+      ),
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: e(
+            "bg-white",
+            "mt-0.5",
+            "py-2",
+            "rounded-lg",
+            "shadow-lg",
+            "border",
+            "border-zinc-100",
+            "animate-in",
+            "fade-in-0",
+            "dark:bg-metal-800",
+            "dark:border-metal-700",
+            h
+          ),
+          children: o.map(({ label: t, className: m, onClick: p }) => /* @__PURE__ */ r(
+            a,
+            {
+              className: e(
+                "w-full",
+                "text-slate-800",
+                "cursor-pointer",
+                "p-0",
+                "h-9",
+                "flex",
+                "gap-2",
+                "text-sm",
+                "font-normal",
+                "justify-start",
+                "rounded-none",
+                "px-6",
+                "hover:bg-gray-50",
+                "hover:text-slate-800",
+                "hover:no-underline",
+                "dark:hover:bg-metal-700",
+                m
+              ),
+              variant: "link",
+              asChild: !0,
+              role: "presentation",
+              children: /* @__PURE__ */ r(a, { onClick: () => p(c.row.original), children: t })
+            },
+            t
+          ))
+        }
+      )
+    }
+  )
 ] }) : null;
 export {
-  u as Actions
+  b as Actions
 };