@konstructio/ui 0.1.2-alpha.13 → 0.1.2-alpha.15

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/Dropdown.variants.js

@@ -35,10 +35,15 @@ const a = e(
           "kubefirst:text-red-600"
         ],
         false: ""
+      },
+      disabled: {
+        true: ["cursor-default", "bg-gray-100", "dark:bg-slate-700/80"],
+        false: []
       }
     },
     defaultVariants: {
-      hasError: !1
+      hasError: !1,
+      disabled: !1
     }
   }
 ), t = e([
@@ -54,16 +59,16 @@ const a = e(
   "placeholder:select-none",
   "dark:placeholder:text-slate-400",
   "dark:text-slate-50"
-]), n = e([
+]), d = e([
   "mb-1",
   "cursor-pointer",
   "text-sm",
-  "leading-[20px]",
+  "leading-5",
   "tracking-[0.1px]",
   "dark:text-slate-50"
 ]);
 export {
   a as dropdownVariants,
   t as inputVariants,
-  n as labelVariants
+  d as labelVariants
 };

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
 };