@konstructio/ui 0.1.2-alpha.14 → 0.1.2-alpha.16

package/dist/{chevron-down-Cx07rtLP.js → chevron-down-J5nS1Tu0.js}

@@ -1,6 +1,6 @@
-import { c as o } from "./createLucideIcon-DnY-81vT.js";
+import { c as o } from "./createLucideIcon-DGhJ8Z4k.js";
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/{chevron-right-DCDOrc04.js → chevron-right-DeMVrnIg.js}

@@ -1,13 +1,13 @@
-import { c as o } from "./createLucideIcon-DnY-81vT.js";
+import { c as o } from "./createLucideIcon-DGhJ8Z4k.js";
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
 const e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], n = o("chevron-left", e);
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/components/Badge/Badge.js

@@ -3,9 +3,9 @@ import { useRef as h, useState as g, useCallback as v, useEffect as w } from "re
 import { cn as m } from "../../utils/index.js";
 import { buttonDismissVariants as x, badgeVariants as y } from "./Badge.variants.js";
 import { S as M } from "../../index-DQH6odE9.js";
-import { c as N } from "../../createLucideIcon-DnY-81vT.js";
+import { c as N } from "../../createLucideIcon-DGhJ8Z4k.js";
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/components/Button/Button.variants.js

@@ -66,7 +66,7 @@ const t = r(
           "py-1",
           "h-auto",
           "text-[0.8125rem]",
-          "leading-[1.375rem]",
+          "leading-5.5",
           "h-[30px]"
         ]
       }

package/dist/components/Datepicker/DatePicker.js

@@ -2,7 +2,7 @@ import { jsx as Ee } from "react/jsx-runtime";
 import d, { createContext as sn, useContext as an, useCallback as j, useRef as ke, useLayoutEffect as cn, useState as De, useEffect as un, useMemo as Pe } from "react";
 import { cn as ue } from "../../utils/index.js";
 import { datePickerVariants as fn } from "./DatePicker.variants.js";
-import { C as ln, a as dn } from "../../chevron-right-DCDOrc04.js";
+import { C as ln, a as dn } from "../../chevron-right-DeMVrnIg.js";
 import '../../DatePicker.css';function hn(e, t, n = "long") {
   return new Intl.DateTimeFormat("en-US", {
     // Enforces engine to render the time. Without the option JavaScriptCore omits it.

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

@@ -1,79 +1,83 @@
-import { jsx as l, jsxs as x, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as k, useRef as C, useImperativeHandle as y } from "react";
+import { jsx as l, jsxs as w, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as y, useRef as j, useImperativeHandle as C } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { useNavigationUlList as j } from "../../hooks/useNavigationList.js";
-import { ListItem as n } from "../ListItem/ListItem.js";
-import { listVariants as I } from "./List.variants.js";
-import { S as O } from "../../../../index-DQH6odE9.js";
-import { useDropdownContext as S } from "../../contexts/dropdown.hook.js";
-const A = k(
+import { useNavigationUlList as O } from "../../hooks/useNavigationList.js";
+import { ListItem as i } from "../ListItem/ListItem.js";
+import { listVariants as D } from "./List.variants.js";
+import { S as E } from "../../../../index-DQH6odE9.js";
+import { useDropdownContext as F } from "../../contexts/dropdown.hook.js";
+const I = y(
   ({
-    additionalOptions: f,
-    className: p,
-    inputRef: o,
-    isLoading: u,
-    itemClassName: r,
-    name: d,
-    options: i,
-    searchable: c = !1,
-    wrapperInputRef: g,
-    wrapperRef: b
-  }, h) => {
-    const s = C(null), { isOpen: v, searchTerm: L } = S();
-    y(h, () => s.current, [s]), j({
-      ulRef: s,
-      wrapperRef: b,
-      wrapperInputRef: g,
-      inputRef: o,
-      searchable: c
+    additionalOptions: p,
+    className: u,
+    inputRef: r,
+    isLoading: d,
+    itemClassName: s,
+    name: g,
+    options: c,
+    searchable: m = !1,
+    listItemSecondRowClassName: a,
+    wrapperInputRef: b,
+    wrapperRef: h
+  }, v) => {
+    const o = j(null), { isOpen: L, searchTerm: x } = F();
+    C(v, () => o.current, [o]), O({
+      ulRef: o,
+      wrapperRef: h,
+      wrapperInputRef: b,
+      inputRef: r,
+      searchable: m
     });
-    const m = c ? i.filter((e) => {
-      const a = L.toLowerCase();
-      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(a);
-    }) : i, w = m.length === 0;
+    const f = m ? c.filter((e) => {
+      const n = x.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(n);
+    }) : c, k = f.length === 0;
     return /* @__PURE__ */ l(
       "ul",
       {
-        ref: s,
-        title: d,
+        ref: o,
+        title: g,
         role: "listbox",
-        className: t(I({ className: p })),
-        "data-state": v ? "open" : "closed",
-        children: u ? /* @__PURE__ */ l(
-          n,
+        className: t(D({ className: u })),
+        "data-state": L ? "open" : "closed",
+        children: d ? /* @__PURE__ */ l(
+          i,
           {
-            className: t("select-none", r),
+            className: t("select-none", s),
             isClickable: !1,
-            inputRef: o,
+            inputRef: r,
             value: "Loading...",
-            label: "Loading..."
+            label: "Loading...",
+            listItemSecondRowClassName: a
           }
-        ) : w ? /* @__PURE__ */ l(
-          n,
+        ) : k ? /* @__PURE__ */ l(
+          i,
           {
-            className: t("select-none", r),
+            className: t("select-none", s),
             isClickable: !1,
-            inputRef: o,
+            inputRef: r,
             value: "No options",
-            label: "No options"
+            label: "No options",
+            listItemSecondRowClassName: a
           }
-        ) : /* @__PURE__ */ x(N, { children: [
-          m.map((e) => /* @__PURE__ */ l(
-            n,
+        ) : /* @__PURE__ */ w(N, { children: [
+          f.map((e) => /* @__PURE__ */ l(
+            i,
             {
-              className: t("select-none", r),
+              className: t("select-none", s),
               isClickable: !0,
-              inputRef: o,
+              inputRef: r,
+              listItemSecondRowClassName: a,
               ...e
             },
             e.value
           )),
-          f?.map((e, a) => /* @__PURE__ */ l("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ l(O, { 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 }) }, a))
+          p?.map((e, n) => /* @__PURE__ */ l("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ l(E, { 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 }) }, n))
         ] })
       }
     );
   }
 );
 export {
-  A as List
+  I as List
 };

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

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

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

@@ -1,30 +1,30 @@
 import { jsxs as x, jsx as a } from "react/jsx-runtime";
-import { forwardRef as Q, useId as S, useRef as T, useImperativeHandle as X, useMemo as Y, useEffect as z } from "react";
-import { Loading as Z } from "../../Loading/Loading.js";
-import { Typography as B } from "../../Typography/Typography.js";
+import { forwardRef as S, useId as X, useRef as T, useImperativeHandle as Y, useMemo as Z, useEffect as z } from "react";
+import { Loading as B } from "../../Loading/Loading.js";
+import { Typography as ee } from "../../Typography/Typography.js";
 import { cn as c } from "../../../utils/index.js";
-import { labelVariants as ee, inputVariants as te, dropdownVariants as ae } from "../Dropdown.variants.js";
-import { useDropdown as re } from "../hooks/useDropdown.js";
-import { List as ne } from "./List/List.js";
-import { c as V } from "../../../createLucideIcon-DnY-81vT.js";
-import { useDropdownContext as oe } from "../contexts/dropdown.hook.js";
+import { labelVariants as te, inputVariants as ae, dropdownVariants as re } from "../Dropdown.variants.js";
+import { useDropdown as ne } from "../hooks/useDropdown.js";
+import { List as oe } from "./List/List.js";
+import { c as V } from "../../../createLucideIcon-DGhJ8Z4k.js";
+import { useDropdownContext as le } from "../contexts/dropdown.hook.js";
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const le = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], se = V("chevron-up", le);
+const se = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], ce = V("chevron-up", se);
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const ce = [
+const ie = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ie = V("search", ce), ke = Q(
+], ue = V("search", ie), Ce = S(
   ({
     additionalOptions: _,
     className: $,
@@ -39,23 +39,24 @@ const ce = [
     labelClassName: M,
     listClassName: A,
     listItemClassName: H,
+    listItemSecondRowClassName: P,
     name: i,
     options: o,
     placeholder: N,
     searchable: k = !1,
     showSearchIcon: C,
-    theme: P,
-    wrapperClassName: U,
+    theme: U,
+    wrapperClassName: W,
     onBlur: I,
     ...b
-  }, W) => {
-    const E = S(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = re({
+  }, q) => {
+    const E = X(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = ne({
       ulRef: O,
       inputRef: t,
       disabled: r
-    }), { isOpen: p, searchTerm: q, value: l, toggleOpen: G, setValue: y, setSearchTerm: L } = oe(), f = i ? `${E}-${i}` : E;
-    X(W, () => t.current, [t]);
-    const n = Y(() => o.find(({ value: e }) => e === l), [o, l]);
+    }), { isOpen: p, searchTerm: G, value: l, toggleOpen: J, setValue: y, setSearchTerm: L } = le(), f = i ? `${E}-${i}` : E;
+    Y(q, () => t.current, [t]);
+    const n = Z(() => o.find(({ value: e }) => e === l), [o, l]);
     z(() => {
       t.current && (t.current.value = l ? n?.value : "");
     }, [n, l]), z(() => {
@@ -71,12 +72,12 @@ const ce = [
       }), () => {
         e.abort();
       };
-    }, [G, u, L, I, l]);
-    const J = (e) => {
+    }, [J, u, L, I, l]);
+    const K = (e) => {
       const s = e.target.value;
       L(s);
       const d = o.find(
-        (K) => K.value.toLocaleLowerCase() === s.toLocaleLowerCase()
+        (Q) => Q.value.toLocaleLowerCase() === s.toLocaleLowerCase()
       );
       d && y(d.value);
     };
@@ -84,14 +85,14 @@ const ce = [
       "div",
       {
         ref: u,
-        className: c("flex flex-col w-full relative", U),
-        "data-theme": P,
+        className: c("flex flex-col w-full relative", W),
+        "data-theme": U,
         children: [
           w ? /* @__PURE__ */ x(
             "label",
             {
               id: f,
-              className: c(ee({ className: M })),
+              className: c(te({ className: M })),
               htmlFor: f,
               onClick: () => !r && g(),
               children: [
@@ -106,7 +107,7 @@ const ce = [
               ref: R,
               id: f,
               className: c(
-                ae({ className: $, hasError: !!m, disabled: r })
+                re({ className: $, hasError: !!m, disabled: r })
               ),
               role: "combobox",
               onClick: () => !r && g(),
@@ -116,17 +117,17 @@ const ce = [
               children: [
                 /* @__PURE__ */ x("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   n?.leftIcon && !C && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: n.leftIcon }),
-                  C && /* @__PURE__ */ a(ie, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                  C && /* @__PURE__ */ a(ue, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
                   k ? /* @__PURE__ */ a(
                     "input",
                     {
                       ref: t,
                       type: "text",
-                      value: p ? q : n?.label || "",
+                      value: p ? G : n?.label || "",
                       name: i,
-                      onChange: J,
+                      onChange: K,
                       placeholder: N,
-                      className: c(te({ className: F }), {
+                      className: c(ae({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!m
                       }),
                       onClick: (e) => {
@@ -141,7 +142,7 @@ const ce = [
                       ...b
                     }
                   ) : /* @__PURE__ */ a(
-                    B,
+                    ee,
                     {
                       variant: "body2",
                       className: c(
@@ -157,8 +158,8 @@ const ce = [
                     }
                   )
                 ] }),
-                j ? /* @__PURE__ */ a(Z, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
-                  se,
+                j ? /* @__PURE__ */ a(B, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
+                  ce,
                   {
                     "data-state": p ? "open" : "closed",
                     className: c(
@@ -188,7 +189,7 @@ const ce = [
             }
           ),
           p && /* @__PURE__ */ a(
-            ne,
+            oe,
             {
               ref: O,
               additionalOptions: _,
@@ -200,7 +201,8 @@ const ce = [
               inputRef: t,
               options: o,
               isLoading: !!j,
-              searchable: k
+              searchable: k,
+              listItemSecondRowClassName: P
             }
           )
         ]
@@ -209,5 +211,5 @@ const ce = [
   }
 );
 export {
-  ke as Wrapper
+  Ce as Wrapper
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -5,7 +5,7 @@ import { Checkbox as C } from "../../../Checkbox/Checkbox.js";
 import { cn as n } from "../../../../utils/index.js";
 import { filterButtonIconVariants as y, filterButtonVariants as N } from "../../Filter.variants.js";
 import { useBadgeMultiSelect as B } from "./BadgeMultiSelect.hook.js";
-import { C as O } from "../../../../chevron-down-Cx07rtLP.js";
+import { C as O } from "../../../../chevron-down-J5nS1Tu0.js";
 const $ = ({
   options: i,
   label: p,

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -5,7 +5,7 @@ import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
 import { cn as o } from "../../../../utils/index.js";
 import { filterButtonIconVariants as x, filterButtonVariants as y } from "../../Filter.variants.js";
 import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-Cx07rtLP.js";
+import { C as N } from "../../../../chevron-down-J5nS1Tu0.js";
 const R = ({
   label: s,
   position: l = "left",

package/dist/components/Loading/Loading.js

@@ -1,9 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../utils/index.js";
 import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-DnY-81vT.js";
+import { c as t } from "../../createLucideIcon-DGhJ8Z4k.js";
 /**
-* @license lucide-react v0.546.0 - ISC
+* @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.