@konstructio/ui 0.1.2-alpha.32 → 0.1.2-alpha.34

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

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

package/dist/components/Input/Input.variants.js

@@ -19,6 +19,7 @@ const a = r(
     "text-sm",
     "w-full",
     "transition-all",
+    "focus-visible:border-transparent",
     "data-[error=false]:dark:focus:ring-aurora-500",
     "data-[error=false]:focus:ring-aurora-500",
     "data-[error=false]:kubefirst:focus:ring-kubefirst-primary",
@@ -39,7 +40,7 @@ const a = r(
     variants: {
       variant: {
         default: "",
-        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 pr-8 focus-visible:ring-transparent"
+        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 pr-8 focus-visible:border-red-600 focus-visible:ring-transparent"
       }
     },
     defaultVariants: {

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-5xSxFoaD.js";
+import { M as d } from "../../Modal-CtAG97Ts.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "../../../../index-DrWQH0QF.js";
 import "react";
-import "../../../../Combination-VYaRRJBZ.js";
-import { W as f } from "../../../../Modal-5xSxFoaD.js";
+import "../../../../Combination-BtmnusWq.js";
+import { W as f } from "../../../../Modal-CtAG97Ts.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
 import "../../../../x-DPU9OdYH.js";

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-5xSxFoaD.js";
+import { W as a } from "../../../Modal-CtAG97Ts.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -1,6 +1,7 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const e = r(
+const t = r(
   [
+    "text-sm",
     "relative",
     "border",
     "border-gray-300",
@@ -32,7 +33,7 @@ const e = r(
       variant: "default"
     }
   }
-), t = r([
+), e = r([
   "cursor-pointer",
   "text-sm",
   "leading-5",
@@ -40,6 +41,6 @@ const e = r(
   "dark:text-slate-50"
 ]);
 export {
-  t as labelVariants,
-  e as phoneNumberInputVariants
+  e as labelVariants,
+  t as phoneNumberInputVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,15 +1,15 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as I } from "react";
+import { useMemo as K } 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 k } 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 = ({
+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,
@@ -37,9 +37,10 @@ const J = ({
   filterSearchPlaceholder: w = "",
   multiSelectFilter: P,
   filterActions: E,
-  showResetButton: H = !0
+  showResetButton: H = !0,
+  resetButtonClassName: I
 }) => {
-  const e = I(
+  const e = K(
     () => B || [
       t,
       a,
@@ -49,7 +50,7 @@ const J = ({
     []
   );
   return /* @__PURE__ */ r(
-    K,
+    M,
     {
       id: n,
       columns: p,
@@ -60,17 +61,18 @@ const J = ({
       isPaginationEnabled: e,
       children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
         j && /* @__PURE__ */ r(
-          M,
+          W,
           {
             actions: E,
             multiSelectFilter: P,
             placeholder: w,
             showFilterInput: v,
-            showResetButton: H
+            showResetButton: H,
+            resetButtonClassName: I
           }
         ),
         /* @__PURE__ */ r(
-          W,
+          k,
           {
             showPagination: e,
             classNameWrapperTable: y,
@@ -82,21 +84,21 @@ const J = ({
                 "aria-label": f,
                 children: [
                   /* @__PURE__ */ r(
-                    k,
+                    q,
                     {
                       className: N,
                       classNameArrows: x,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(q, { isLoading: o, showPagination: e })
+                  /* @__PURE__ */ r(C, { isLoading: o, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          C,
+          F,
           {
             showTotalItems: t,
             showDropdownPagination: a,
@@ -109,11 +111,11 @@ const J = ({
       ] })
     }
   );
-}, i = J;
+}, i = O;
 i.displayName = "KonstructVirtualizedTable";
-i.TruncateText = F;
-i.Actions = G;
+i.TruncateText = G;
+i.Actions = J;
 export {
-  F as TruncateText,
+  G as TruncateText,
   i as VirtualizedTable
 };

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import { memo as u } from "react";
 import { cn as p } from "../../../../utils/index.js";
-import { C as g, a as d } from "../../../../chevron-right-DYvXLeql.js";
+import { C as g, a as d } from "../../../../chevron-left-C4LEg1fH.js";
 import { useTableContext as f } from "../../contexts/table.hook.js";
 const r = u(
   ({

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,68 +1,70 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { d as v } from "../../../../debounce-BFejQm9P.js";
-import { useRef as O, useCallback as u, useMemo as p } from "react";
-import { Filter as n } from "../../../Filter/Filter.js";
-import { Input as R } from "../../../Input/Input.js";
+import { d as O } from "../../../../debounce-BFejQm9P.js";
+import { useRef as R, useCallback as u, useMemo as p } from "react";
 import { Button as y } from "../../../Button/Button.js";
-import { useTableContext as B } from "../../contexts/table.hook.js";
-const $ = ({
-  actions: d,
-  multiSelectFilter: f,
+import { Filter as s } from "../../../Filter/Filter.js";
+import { Input as B } from "../../../Input/Input.js";
+import { cn as N } from "../../../../utils/index.js";
+import { useTableContext as T } from "../../contexts/table.hook.js";
+const E = ({
+  actions: f,
+  multiSelectFilter: d,
   placeholder: h,
   showFilterInput: g = !0,
-  showResetButton: x = !0
+  showResetButton: x = !0,
+  resetButtonClassName: C
 }) => {
-  const s = O(null), {
+  const n = R(null), {
     termOfSearch: o,
     multiselectSelected: c,
     onChangeTermOfSearch: a,
     onSelectMultiselect: i
-  } = B(), C = u(
+  } = T(), S = u(
     (e, t) => i(
       e,
       t.map((r) => r.id)
     ),
     [i]
-  ), S = u(() => {
-    a(""), s.current && (s.current.value = "");
-  }, [a]), b = p(
-    () => v((e) => {
+  ), b = u(() => {
+    a(""), n.current && (n.current.value = "");
+  }, [a]), F = p(
+    () => O((e) => {
       a(e.target.value);
     }, 500),
     [a]
-  ), F = p(
+  ), M = p(
     () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
     [o, c]
   );
   return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
     g && /* @__PURE__ */ l(
-      R,
+      B,
       {
-        ref: s,
+        ref: n,
         placeholder: h,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: b
+        onChange: F
       }
     ),
-    /* @__PURE__ */ m(n, { children: [
-      f?.map(
-        ({ key: e, label: t, position: r = "right", options: M }) => /* @__PURE__ */ l(
-          n.BadgeMultiSelect,
+    /* @__PURE__ */ m(s, { children: [
+      d?.map(
+        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ l(
+          s.BadgeMultiSelect,
           {
             label: t,
             position: r,
-            options: M,
-            onApply: (j) => {
-              C(e, j);
+            options: j,
+            onApply: (v) => {
+              S(e, v);
             }
           },
           t
         )
       ),
-      d?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
+      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
         y,
         {
           variant: r,
@@ -73,16 +75,19 @@ const $ = ({
         e
       )),
       x && /* @__PURE__ */ l(
-        n.ResetButton,
+        s.ResetButton,
         {
-          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
-          disabled: !F,
-          onClick: S
+          className: N(
+            "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+            C
+          ),
+          disabled: !M,
+          onClick: b
         }
       )
     ] })
   ] });
 };
 export {
-  $ as Filter
+  E as Filter
 };

package/dist/components/index.js

@@ -13,7 +13,7 @@ import { DropdownButton as h } from "./DropdownButton/DropdownButton.js";
 import { Filter as P } from "./Filter/Filter.js";
 import { Input as w } from "./Input/Input.js";
 import { Loading as k } from "./Loading/Loading.js";
-import { M as G } from "../Modal-5xSxFoaD.js";
+import { M as G } from "../Modal-CtAG97Ts.js";
 import { NumberInput as L } from "./NumberInput/NumberInput.js";
 import { PhoneNumberInput as y } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as O } from "./PieChart/PieChart.js";

package/dist/{index-DDByhzds.js → index-C65LtGuU.js}

@@ -2,7 +2,7 @@ import { jsx as a, Fragment as O, jsxs as w } from "react/jsx-runtime";
 import * as l from "react";
 import { c as I, b as x } from "./index-CIAmiWcw.js";
 import { u } from "./index-DLcqcWxM.js";
-import { c as A, R as M, P as L, O as $, W as F, C as B, T as G, d as W, b as v, e as j } from "./index-kyuBfLcN.js";
+import { c as A, R as M, P as L, O as $, W as F, C as B, T as G, d as W, b as v, e as j } from "./index-Ds6U2x4Z.js";
 import { Button as Y } from "./components/Button/Button.js";
 import { cn as k } from "./utils/index.js";
 var q = Symbol("radix.slottable");

package/dist/{index-X4k_cU8k.js → index-CdwPV0FE.js}

@@ -1,4 +1,4 @@
-import { R as Ee, P as ke, O as Se, C as Ie } from "./index-kyuBfLcN.js";
+import { R as Ee, P as ke, O as Se, C as Ie } from "./index-Ds6U2x4Z.js";
 import * as n from "react";
 import { P as C } from "./index-CIAmiWcw.js";
 import { u as P } from "./index-BbQkJE5L.js";

package/dist/{index-kyuBfLcN.js → index-Ds6U2x4Z.js}

@@ -7,7 +7,7 @@ import { u as $ } from "./index-0ioNhtNM.js";
 import { jsx as u, jsxs as j, Fragment as B } from "react/jsx-runtime";
 import { P as be } from "./index-CSFe9uC5.js";
 import { P as U } from "./index-mPY_8Y5v.js";
-import { R as Re } from "./Combination-VYaRRJBZ.js";
+import { R as Re } from "./Combination-BtmnusWq.js";
 var x = "focusScope.autoFocusOnMount", W = "focusScope.autoFocusOnUnmount", q = { bubbles: !1, cancelable: !0 }, Ae = "FocusScope", Q = i.forwardRef((e, t) => {
   const {
     loop: n = !1,

package/dist/index.d.ts

@@ -475,6 +475,9 @@ declare type Option_3 = {
     label: string;
     subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
+    leftIconClassName?: string;
+    rightComponent?: ReactNode | string;
+    rightComponentClassName?: string;
     value: string;
 };
 
@@ -601,13 +604,11 @@ declare type Props_3 = {
      * @required
      */
     values: number[];
-} & 
-/**
+} /**
 * Union type that enforces either:
 * - No title and no subtitle
 * - Title with optional subtitle
-*/
-({
+*/ & ({
     title?: undefined;
     subtitle?: never;
 } | {
@@ -659,6 +660,7 @@ declare type Props_5<TData extends RowData_2> = VariantProps<typeof virtualizeTa
     showFilterInput?: boolean;
     filterActions?: FilterAction[];
     showResetButton?: boolean;
+    resetButtonClassName?: string;
 } | {
     filterSearchPlaceholder?: never;
     multiSelectFilter?: never;
@@ -666,6 +668,7 @@ declare type Props_5<TData extends RowData_2> = VariantProps<typeof virtualizeTa
     showFilterInput?: never;
     filterActions?: FilterAction[];
     showResetButton?: never;
+    resetButtonClassName?: never;
 });
 
 declare type Props_6<TData extends RowData> = CellContext<TData, unknown> & {

package/dist/index.js

@@ -16,7 +16,7 @@ import { BadgeMultiSelect as k } from "./components/Filter/components/BadgeDropd
 import { DateFilterDropdown as G } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
 import { Input as L } from "./components/Input/Input.js";
 import { Loading as y } from "./components/Loading/Loading.js";
-import { M as O } from "./Modal-5xSxFoaD.js";
+import { M as O } from "./Modal-CtAG97Ts.js";
 import { NumberInput as j } from "./components/NumberInput/NumberInput.js";
 import { PhoneNumberInput as E } from "./components/PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as J } from "./components/PieChart/PieChart.js";

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.31",
+  "version": "0.1.2-alpha.33",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,12 +77,12 @@
     "google-libphonenumber": "^3.2.43",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.554.0",
+    "lucide-react": "^0.555.0",
     "react-chartjs-2": "^5.3.1",
-    "react-day-picker": "^9.11.2",
+    "react-day-picker": "^9.11.3",
     "react-feather": "^2.0.10",
-    "react-focus-lock": "^2.13.6",
-    "react-remove-scroll": "^2.7.1",
+    "react-focus-lock": "^2.13.7",
+    "react-remove-scroll": "^2.7.2",
     "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
@@ -120,11 +120,11 @@
   "devDependencies": {
     "@faker-js/faker": "^10.1.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-links": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-links": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "^5.90.10",
+    "@tanstack/react-query": "^5.90.11",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -151,13 +151,13 @@
     "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.3",
     "rimraf": "^6.1.2",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.2",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
+    "vite": "^7.2.6",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.5.0",