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

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,13 +1,13 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as I } from "react";
-import { cn as m } from "../../../../utils/index.js";
+import { cn as c } from "../../../../utils/index.js";
 import { timePickerVariants as L } from "../../TimePicker.variants.js";
 import { WrapperList as j } from "../WrapperList/WrapperList.js";
 import { C as P } from "../../../../chevron-down-DgT-uSF9.js";
 import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
 const V = ({
   name: d,
-  label: i,
+  label: l,
   required: p,
   scrollBehavior: f,
   className: u,
@@ -15,12 +15,12 @@ const V = ({
   listItemClassName: h,
   listItemButtonClassName: w
 }) => {
-  const b = N(), [n, r] = y(!1), l = E(null), { format: g, formattedTime: c } = R(), s = d ?? `time-${b}`, k = O(() => r((e) => !e), []);
+  const b = N(), [n, r] = y(!1), i = E(null), { format: k, formattedTime: m } = R(), s = d ?? `time-${b}`, g = O(() => r((e) => !e), []);
   return I(() => {
     const e = new AbortController(), v = (o) => {
       o.key === "Escape" && r(!1);
     }, C = (o) => {
-      l.current?.contains(o.target) || r(!1);
+      i.current?.contains(o.target) || r(!1);
     };
     return document.addEventListener("mousedown", C, {
       signal: e.signal
@@ -32,17 +32,24 @@ const V = ({
   }, []), /* @__PURE__ */ t(
     "div",
     {
-      ref: l,
-      className: m(
+      ref: i,
+      className: c(
         "w-max text-slate-800 text-sm flex flex-col gap-2",
-        g === "12" ? "w-52" : "w-[140px]"
+        k === "12" ? "w-52" : "w-[140px]"
       ),
       children: [
-        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
-          i,
-          " ",
-          p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
-        ] }) : null,
+        l ? /* @__PURE__ */ t(
+          "label",
+          {
+            htmlFor: s,
+            className: "text-slate-500 dark:text-metal-50 font-medium",
+            children: [
+              l,
+              " ",
+              p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ t("div", { className: "relative", children: [
           /* @__PURE__ */ t(
             "button",
@@ -51,11 +58,11 @@ const V = ({
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: m(L({ className: u })),
+              className: c(L({ className: u })),
               "data-open": n,
-              onClick: k,
+              onClick: g,
               children: [
-                c,
+                m,
                 /* @__PURE__ */ a(
                   P,
                   {
@@ -82,7 +89,7 @@ const V = ({
           {
             type: "hidden",
             name: s,
-            value: c,
+            value: m,
             className: "hidden"
           }
         )

package/dist/components/TimePicker/components/WrapperList/WrapperList.js

@@ -1,51 +1,59 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { useMemo as n } from "react";
-import { cn as s } from "../../../../utils/index.js";
-import { getHours as d, getMinutes as M } from "../../utils/index.js";
-import { HoursList as x } from "../HoursList/HoursList.js";
-import { MeridianList as L } from "../MeridianList/MeridianList.js";
-import { MinutesList as g } from "../MinutesList/MinutesList.js";
-import { wrapperVariants as H } from "./WrapperList.variants.js";
-import { useTimePickerContext as j } from "../../contexts/time-picker.hook.js";
-const v = ({
-  isOpen: m,
-  scrollBehavior: p,
+import { cn as c } from "../../../../utils/index.js";
+import { getHours as s, getMinutes as x } from "../../utils/index.js";
+import { HoursList as g } from "../HoursList/HoursList.js";
+import { MeridianList as b } from "../MeridianList/MeridianList.js";
+import { MinutesList as M } from "../MinutesList/MinutesList.js";
+import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
+const T = ({
+  isOpen: d,
+  scrollBehavior: m,
   listClassName: o,
-  listItemClassName: i,
-  listItemButtonClassName: t
+  listItemClassName: e,
+  listItemButtonClassName: i
 }) => {
-  const { time: r } = j(), u = n(() => d(r), [r]), f = n(() => M(r), [r]);
-  return m ? /* @__PURE__ */ c("div", { role: "group", className: s(H()), children: [
-    /* @__PURE__ */ e(
-      x,
-      {
-        hours: u,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      g,
-      {
-        minutes: f,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      L,
-      {
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    )
-  ] }) : null;
+  const { time: r } = h(), p = n(() => s(r), [r]), u = n(() => x(r), [r]);
+  return d ? /* @__PURE__ */ f(
+    "div",
+    {
+      role: "group",
+      className: c(
+        "flex gap-1.5 p-2 rounded-md shadow w-full max-h-[216px] absolute mt-1 bg-white z-10 animate-in fade-in-0 zoom-in-95 dark:bg-metal-800 dark:border dark:border-metal-700"
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          g,
+          {
+            hours: p,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          M,
+          {
+            minutes: u,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          b,
+          {
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        )
+      ]
+    }
+  ) : null;
 };
 export {
-  v as WrapperList
+  T as WrapperList
 };

package/dist/components/Toast/Toast.js

@@ -1,19 +1,19 @@
 import { jsx as i, jsxs as A, Fragment as ae } from "react/jsx-runtime";
-import { S as B } from "../../index-BtQfgaSF.js";
+import { S as B } from "../../index-BvoZGpli.js";
 import * as n from "react";
 import { useRef as xe, useEffect as be, useMemo as re, isValidElement as ne, useCallback as ge } from "react";
 import * as Se from "react-dom";
-import { P as D, c as Ne, a as Ie, b as x, d as Ae, u as De } from "../../index-CIAmiWcw.js";
+import { P as D, c as Ne, a as Ie, b as x, d as Ae, u as De } from "../../index-DKfEnhKr.js";
 import { u as ie } from "../../index-DLcqcWxM.js";
-import { c as _e } from "../../index-CigKKiZS.js";
-import { B as Fe, R as Le } from "../../index-Dbt2vBmS.js";
-import { P as Me } from "../../index-CSFe9uC5.js";
-import { P as Oe } from "../../index-mPY_8Y5v.js";
+import { c as _e } from "../../index-BG8O18ZY.js";
+import { B as Fe, R as Le } from "../../index-BlSRBdPy.js";
+import { P as Me } from "../../index-DMb4KD0b.js";
+import { P as Oe } from "../../index-AV6ZtGhy.js";
 import { u as X } from "../../index-0ioNhtNM.js";
-import { R as ke } from "../../index-DrWQH0QF.js";
+import { R as ke } from "../../index-BKjcReYh.js";
 import { cn as j } from "../../utils/index.js";
 import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
-import { X as We } from "../../x-DPU9OdYH.js";
+import { X as We } from "../../x-Eoa9FJjA.js";
 var Ue = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",

package/dist/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { S as u } from "../../index-BtQfgaSF.js";
+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";

package/dist/components/Typography/Typography.js

@@ -2,27 +2,29 @@ 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");
+const d = f(
+  ({ className: t, theme: r, children: p, variant: o, component: e, ...m }, a) => {
+    const s = e ?? (o?.includes("h") ? o : "p");
     return /* @__PURE__ */ y(
       s,
       {
         ref: a,
-        "data-theme": p,
+        "data-theme": r,
         className: n(
+          "text-slate-800",
+          "dark:text-metal-50",
           c({
-            className: r,
+            className: t,
             variant: o
           })
         ),
-        ...e,
-        children: m
+        ...m,
+        children: p
       }
     );
   }
 );
-h.displayName = "Typography";
+d.displayName = "Typography";
 export {
-  h as Typography
+  d as Typography
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

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

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

@@ -1,64 +1,96 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } 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 = ({
+import { cn as e } from "../../../../utils/index.js";
+import { E as m } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const b = ({
   actions: a,
   wrapperClassName: l,
   triggerButtonClassName: s,
   iconTriggerButtonClassName: n,
-  wrapperActionsClassName: c,
-  wrapperContentActionsClassName: d,
+  wrapperActionsClassName: d,
+  wrapperContentActionsClassName: c,
   ...h
-}) => a ? /* @__PURE__ */ i("div", { className: r("relative group", l), children: [
+}) => a ? /* @__PURE__ */ i("div", { className: e("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",
+      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",
         s
       ),
       role: "presentation",
       children: [
-        /* @__PURE__ */ e(
-          u,
+        /* @__PURE__ */ r(
+          m,
           {
             "aria-hidden": "true",
-            className: r("w-7 h-7", n)
+            className: e("w-7 h-7", n)
           }
         ),
-        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
+        /* @__PURE__ */ r("span", { className: "sr-only", children: "Show Actions" })
       ]
     }
   ),
-  /* @__PURE__ */ e(
+  /* @__PURE__ */ r(
     "div",
     {
-      className: r(
-        "absolute top-full right-0 w-[215px] hidden group-hover:block z-10",
-        c
+      className: e(
+        "absolute",
+        "top-full",
+        "right-0",
+        "w-[215px]",
+        "hidden",
+        "group-hover:block",
+        "z-10",
+        d
       ),
-      children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ r(
         "div",
         {
-          className: r(
-            "bg-white mt-0.5 py-2 rounded-lg shadow-lg border border-zinc-100 animate-in fade-in-0",
-            d
+          className: e(
+            "bg-white",
+            "mt-0.5",
+            "py-2",
+            "rounded-lg",
+            "shadow-lg",
+            "border",
+            "border-zinc-100",
+            "animate-in",
+            "fade-in-0",
+            c
           ),
-          children: a.map(({ label: o, className: p, onClick: m }) => /* @__PURE__ */ e(
+          children: a.map(({ label: o, className: p, onClick: u }) => /* @__PURE__ */ r(
             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",
+              className: e(
+                "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 })
+              children: /* @__PURE__ */ r(t, { onClick: () => u(h.row.original), children: o })
             },
             o
           ))
@@ -68,5 +100,5 @@ const w = ({
   )
 ] }) : null;
 export {
-  w as Actions
+  b as Actions
 };