@konstructio/ui 0.1.2-alpha.24 → 0.1.2-alpha.26

package/dist/components/Dropdown/components/List/List.js

@@ -1,145 +1,137 @@
-import { jsxs as z, jsx as r } from "react/jsx-runtime";
-import { S as A } from "../../../../index-BtQfgaSF.js";
-import { d as H } from "../../../../debounce-BFejQm9P.js";
-import { forwardRef as V, useRef as y, useState as Z, useImperativeHandle as B, useCallback as G, useEffect as J } from "react";
-import { Loading as K } from "../../../Loading/Loading.js";
-import { cn as i } from "../../../../utils/index.js";
-import { useNavigationUlList as Q } from "../../hooks/useNavigationList.js";
-import { ListItem as L } from "../ListItem/ListItem.js";
-import { listVariants as R } from "./List.variants.js";
-import { DEFAULT_LIST_SIZE as W } from "../../constants/pagination.js";
-import { useDropdownContext as X } from "../../contexts/dropdown.hook.js";
-const ie = V(
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { S as V } from "../../../../index-BtQfgaSF.js";
+import { d as Z } from "../../../../debounce-BFejQm9P.js";
+import { forwardRef as B, useRef as w, useState as G, useImperativeHandle as J, useMemo as K, useEffect as M } from "react";
+import { Loading as Q } from "../../../Loading/Loading.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useNavigationUlList as R } from "../../hooks/useNavigationList.js";
+import { ListItem as v } from "../ListItem/ListItem.js";
+import { listVariants as W } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as X } from "../../constants/pagination.js";
+import { useDropdownContext as Y } from "../../contexts/dropdown.hook.js";
+const ue = B(
   ({
     additionalOptions: k,
     className: C,
-    inputRef: c,
-    isLoading: N,
-    itemClassName: f,
-    name: F,
-    searchable: x = !1,
-    listItemSecondRowClassName: u,
+    inputRef: i,
+    isLoading: F,
+    itemClassName: l,
+    name: N,
+    searchable: b = !1,
+    listItemSecondRowClassName: c,
     wrapperInputRef: I,
-    isInfiniteScrollEnabled: m,
-    onFetchMoreOptions: n
-  }, j) => {
-    const a = y(null), p = y(null), [g, w] = Z(!1), {
-      isOpen: E,
-      searchTerm: l,
-      canFilter: O,
-      canContinueFetching: o,
-      page: d,
-      options: h,
+    isInfiniteScrollEnabled: u,
+    onFetchMoreOptions: f
+  }, O) => {
+    const s = w(null), m = w(null), [p, L] = G(!1), {
+      isOpen: T,
+      searchTerm: g,
+      canFilter: j,
+      canContinueFetching: n,
+      page: E,
+      options: x,
+      isTyping: y,
       setOptions: P,
       setPage: S,
-      setCanContinueFetching: T
-    } = X();
-    B(j, () => a.current, [a]);
-    const b = x && O ? h.filter((e) => {
-      const t = l.toLowerCase();
+      setCanContinueFetching: D
+    } = Y();
+    J(O, () => s.current, [s]);
+    const d = b && j ? x.filter((e) => {
+      const t = g.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : h;
-    Q({
-      ulRef: a,
+    }) : x;
+    R({
+      ulRef: s,
       wrapperInputRef: I,
-      searchable: x,
-      filteredOptions: b
+      searchable: b,
+      filteredOptions: d
     });
-    const D = b.filter(
-      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
-    ), U = b.length === 0, _ = G(
-      H(async (e) => {
+    const U = d.filter(
+      (e, t, r) => t === r.findIndex((h) => h.value === e.value)
+    ), _ = d.length === 0, q = K(
+      () => Z(async (e) => {
         const [t] = e;
-        if (t.isIntersecting)
+        if (t.isIntersecting && !p && f && n)
           try {
-            if (n && !g && o) {
-              w(!0);
-              const s = d + 1, { data: v, hasMore: q } = await n({
-                page: s,
-                pageSize: W,
-                termOfSearch: l
-              });
-              S(s), T(q), P([...h, ...v]);
-            }
+            L(!0);
+            const r = E + 1, { data: h, hasMore: z } = await f({
+              page: r,
+              pageSize: X,
+              termOfSearch: g
+            });
+            S(r), D(z), P((A) => [...A, ...h]);
           } catch {
             console.error("Error fetching more options");
           } finally {
-            w(!1);
+            L(!1);
           }
       }, 100),
-      [d, n, l, o, g]
+      [p, f, g]
     );
-    return J(() => {
-      if (m && o && p.current) {
-        const e = new IntersectionObserver(_, {
+    return M(() => {
+      if (u && n && m.current && !y) {
+        const e = new IntersectionObserver(q, {
           threshold: 0.1
         });
-        return e.observe(p.current), () => e.disconnect();
+        return e.observe(m.current), () => e.disconnect();
       }
-    }, [
-      d,
-      l,
-      m,
-      n,
-      o,
-      g
-    ]), /* @__PURE__ */ z(
+    }, [u, n, p, y]), /* @__PURE__ */ H(
       "ul",
       {
-        ref: a,
-        title: F,
+        ref: s,
+        title: N,
         role: "listbox",
-        className: i(R({ className: C })),
-        "data-state": E ? "open" : "closed",
+        className: a(W({ className: C })),
+        "data-state": T ? "open" : "closed",
         children: [
-          N ? /* @__PURE__ */ r(
-            L,
+          F ? /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !1,
-              inputRef: c,
+              inputRef: i,
               value: "Loading...",
               label: "Loading...",
-              listItemSecondRowClassName: u
+              listItemSecondRowClassName: c
             }
-          ) : U ? /* @__PURE__ */ r(
-            L,
+          ) : _ ? /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !1,
-              inputRef: c,
+              inputRef: i,
               value: "No options",
               label: "No options",
-              listItemSecondRowClassName: u
+              listItemSecondRowClassName: c
             }
-          ) : D.map((e) => /* @__PURE__ */ r(
-            L,
+          ) : U.map((e) => /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !0,
-              inputRef: c,
-              listItemSecondRowClassName: u,
+              inputRef: i,
+              listItemSecondRowClassName: c,
               ...e
             },
             e.value
           )),
-          m && o && /* @__PURE__ */ r(
+          u && n && /* @__PURE__ */ o(
             "li",
             {
-              ref: p,
+              ref: m,
               role: "option",
               "data-action": "true",
               className: "flex items-center justify-center py-3",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ r(K, { className: "w-4 h-4 text-aurora-500 select-none" })
+              children: /* @__PURE__ */ o(Q, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          k?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(A, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+          k?.map((e, t) => /* @__PURE__ */ o("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ o(V, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
         ]
       }
     );
   }
 );
 export {
-  ie as List
+  ue as List
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,89 +1,93 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { useRef as w, useCallback as o } from "react";
-import { Typography as C } from "../../../Typography/Typography.js";
-import { cn as i } from "../../../../utils/index.js";
-import { listItemVariants as L } from "./ListItem.variants.js";
-import { useDropdownContext as I } from "../../contexts/dropdown.hook.js";
-const K = ({
-  isClickable: p,
-  className: h,
-  inputRef: b,
-  listItemSecondRowClassName: x,
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { useRef as y, useCallback as m } from "react";
+import { Typography as w } from "../../../Typography/Typography.js";
+import { cn as f } from "../../../../utils/index.js";
+import { listItemVariants as C } from "./ListItem.variants.js";
+import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
+function I(r, n) {
+  const o = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = new RegExp(`(${o})`, "gi");
+  return r.split(c).map((t, a) => t.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ l(
+    "mark",
+    {
+      className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+      children: t
+    },
+    a
+  ) : /* @__PURE__ */ l("span", { children: t }, a));
+}
+const $ = ({
+  isClickable: r,
+  className: n,
+  inputRef: o,
+  listItemSecondRowClassName: c,
   ...t
 }) => {
-  const { searchTerm: a, highlightSearchEnabled: c, setValue: m, toggleOpen: f } = I(), g = w(null), n = o(
+  const { searchTerm: a, highlightSearchEnabled: d, setValue: h, toggleOpen: u } = L(), p = y(null), i = m(
     (e) => {
-      m(e.value, b), f(!1);
+      h(e.value, o), u(!1);
     },
-    [m, f]
-  ), u = o(
-    (e, r) => {
-      e.key === "Enter" && (e.stopPropagation(), n(r));
+    [h, u]
+  ), x = m(
+    (e, s) => {
+      e.key === "Enter" && (e.stopPropagation(), i(s));
     },
-    [n]
-  ), k = o(
-    (e, r) => {
+    [i]
+  ), b = m(
+    (e, s) => {
       if (typeof e != "string")
         return e;
-      const y = c && a.length > 0 ? e.split(new RegExp(`(${a})`, "gi")).map((s) => s.toLowerCase() === a.toLowerCase() ? /* @__PURE__ */ l(
-        "mark",
-        {
-          className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
-          children: s
-        },
-        s
-      ) : s) : [e];
-      return /* @__PURE__ */ d(
-        C,
+      const k = d && a.length > 0 ? I(e, a) : [e];
+      return /* @__PURE__ */ g(
+        w,
         {
           variant: "body2",
           className: "text-zinc-700 dark:text-slate-50 font-medium",
           children: [
-            y,
-            r ? /* @__PURE__ */ l(
+            k,
+            s ? /* @__PURE__ */ l(
               "span",
               {
-                className: i(
+                className: f(
                   "block font-normal text-sm text-slate-800 dark:text-slate-50",
-                  x
+                  c
                 ),
-                children: r
+                children: s
               }
             ) : null
           ]
         }
       );
     },
-    [c, a]
+    [d, a]
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ g(
     "li",
     {
-      ref: g,
+      ref: p,
       role: "option",
       "data-action": "false",
-      className: i(L({ className: h })),
+      className: f(C({ className: n })),
       tabIndex: 0,
       onClick: (e) => {
-        p && (n(t), e.stopPropagation());
+        r && (i(t), e.stopPropagation());
       },
-      onKeyDown: (e) => u(e, t),
+      onKeyDown: (e) => x(e, t),
       children: [
         t.leftIcon ? /* @__PURE__ */ l(
           "span",
           {
-            className: i("w-4 h-4 flex justify-center", {
+            className: f("w-4 h-4 flex justify-center", {
               "items-center": !t.subLabel,
               "items-baseline -translate-y-2": !!t.subLabel
             }),
             children: t.leftIcon
           }
         ) : null,
-        k(t.label, t.subLabel)
+        b(t.label, t.subLabel)
       ]
     }
   );
 };
 export {
-  K as ListItem
+  $ as ListItem
 };

package/dist/components/Dropdown/components/Wrapper.js

@@ -44,7 +44,6 @@ const fe = [
       isOpen: f,
       searchTerm: G,
       value: o,
-      // canFilter,
       options: n,
       setValue: c,
       setSearchTerm: J,
@@ -64,7 +63,7 @@ const fe = [
     }, [x, n, c, o]);
     const S = (r) => {
       const p = r.target.value;
-      K(!0), q?.(p), c(""), J(p || "");
+      K(!0), c(""), J(p ?? ""), q?.(p);
       const b = n.find(
         (X) => X.value.toLocaleLowerCase() === p.toLocaleLowerCase()
       );

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -8,6 +8,7 @@ const t = e({
   canContinueFetching: !0,
   page: 1,
   options: [],
+  isTyping: !1,
   setOptions() {
     throw new Error("setOptions function must be overridden");
   },

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,53 +1,58 @@
-import { jsx as w } from "react/jsx-runtime";
-import { useState as e, useRef as A, useCallback as u, useEffect as I } from "react";
-import { DropdownContext as O } from "./dropdown.context.js";
-import { useToggle as _ } from "../../../hooks/useToggle.js";
-const s = 1, N = ({
-  children: p,
-  value: m,
-  name: c,
-  highlightSearch: f = !1,
-  options: r,
+import { jsx as G } from "react/jsx-runtime";
+import { useState as e, useRef as f, useCallback as p, useEffect as T } from "react";
+import { DropdownContext as L } from "./dropdown.context.js";
+import { useToggle as N } from "../../../hooks/useToggle.js";
+const c = 1, O = 300, U = ({
+  children: d,
+  value: C,
+  name: i,
+  highlightSearch: E = !1,
+  options: n,
   onChange: a,
-  onBlur: g
+  onBlur: u
 }) => {
-  const [d, i] = e(r), C = A(f), [T, l] = _(!1), [E, F] = e(""), [v, P] = e(!0), [S, n] = e(!0), [b, o] = e(s), x = u(
-    (t, h) => {
-      h?.current && (h.current.value = t), n(!0), o(s), a?.({ target: { value: t, name: c ?? "" } }), g?.();
+  const [v, l] = e(n), F = f(E), [P, g] = N(!1), [D, I] = e(""), [S, b] = e(!0), [x, o] = e(!0), [A, s] = e(c), [_, h] = e(!1), t = f(void 0), w = p(
+    (r, m) => {
+      m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: { value: r, name: i ?? "" } }), u?.(), t.current = setTimeout(() => {
+        h(!1);
+      }, O);
     },
-    [a, c, g]
-  ), D = u(
-    (t) => {
-      l(t), n(!0), o(s);
+    [a, i, u]
+  ), y = p(
+    (r) => {
+      g(r), o(!0), s(c);
     },
-    [l]
+    [g]
   );
-  return I(() => {
-    i(r);
-  }, [r.length]), /* @__PURE__ */ w(
-    O.Provider,
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ G(
+    L.Provider,
     {
       value: {
-        highlightSearchEnabled: C.current,
-        isOpen: T,
-        searchTerm: E,
-        value: m,
-        canFilter: v,
-        canContinueFetching: S,
-        page: b,
-        options: d,
-        setOptions: i,
-        setPage: o,
-        setCanContinueFetching: n,
-        setCanFilter: P,
-        setSearchTerm: F,
-        setValue: x,
-        toggleOpen: D
+        highlightSearchEnabled: F.current,
+        isOpen: P,
+        searchTerm: D,
+        value: C,
+        canFilter: S,
+        canContinueFetching: x,
+        page: A,
+        options: v,
+        isTyping: _,
+        setOptions: l,
+        setPage: s,
+        setCanContinueFetching: o,
+        setCanFilter: b,
+        setSearchTerm: I,
+        setValue: w,
+        toggleOpen: y
       },
-      children: p
+      children: d
     }
   );
 };
 export {
-  N as DropdownProvider
+  U as DropdownProvider
 };

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

@@ -1,40 +1,72 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Button as r } from "../../../Button/Button.js";
-import { cn as n } from "../../../../utils/index.js";
-import { E as c } from "../../../../ellipsis-vertical-BVPtjl5f.js";
-const u = ({
-  actions: t,
-  ...i
-}) => t ? /* @__PURE__ */ o("div", { className: "relative group", children: [
-  /* @__PURE__ */ o(
-    r,
+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: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+      className: r(
+        "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+        s
+      ),
       role: "presentation",
       children: [
-        /* @__PURE__ */ e(c, { "aria-hidden": "true", className: "w-7 h-7" }),
+        /* @__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: "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: a, onClick: l, className: s }) => /* @__PURE__ */ e(
-    r,
+  /* @__PURE__ */ e(
+    "div",
     {
-      className: n(
-        "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",
-        s
+      className: r(
+        "absolute top-full right-0 w-[215px] hidden group-hover:block z-10",
+        c
       ),
-      variant: "text",
-      asChild: !0,
-      role: "presentation",
-      children: /* @__PURE__ */ e(r, { onClick: () => l(i.row.original), children: a })
-    },
-    a
-  )) }) })
+      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 {
-  u as Actions
+  w as Actions
 };

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

@@ -1,48 +1,51 @@
-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 { 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 N } from "../../contexts/table.hook.js";
-const j = ({
+import { useTableContext as D } from "../../contexts/table.hook.js";
+const _ = ({
   isLoading: d,
   showPagination: a
 }) => {
-  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(
+  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": s,
+        "data-row-id": o,
         ...n.attributes ?? {},
-        children: m.map(({ id: g, column: r, getContext: h }, c) => /* @__PURE__ */ t(
-          "td",
-          {
-            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
-              }
-            ),
-            ...r.columnDef.meta?.attributes ?? {},
-            children: x(r.columnDef.cell, h())
-          },
-          g
-        ))
+        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
+          );
+        })
       },
-      s
+      o
     );
   }) });
 };
 export {
-  j as Body
+  _ as Body
 };

package/dist/index.d.ts

@@ -645,6 +645,11 @@ declare type Props_4<TData extends RowData_2> = VariantProps<typeof virtualizeTa
 
 declare type Props_5<TData extends RowData> = CellContext<TData, unknown> & {
     actions: Action<TData>[];
+    iconTriggerButtonClassName?: string;
+    triggerButtonClassName?: string;
+    wrapperActionsClassName?: string;
+    wrapperClassName?: string;
+    wrapperContentActionsClassName?: string;
 };
 
 export declare const Radio: FC<RadioProps>;
@@ -980,7 +985,7 @@ export { }
 
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
-        className?: string;
+        className?: string | ((row: TData) => string);
         attributes?: Record<string, string | number | boolean>;
         headerClassName?: string;
     }

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.23",
+  "version": "0.1.2-alpha.25",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/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.24",
+  "version": "0.1.2-alpha.26",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",