@konstructio/ui 0.1.2-alpha.2 → 0.1.2-alpha.21

package/dist/components/Dropdown/Dropdown.js

@@ -1,30 +1,42 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { DropdownProvider as n } from "./contexts/dropdown.provider.js";
-import { Wrapper as c } from "./components/Wrapper.js";
-const v = p(({ onChange: r, onBlur: l, value: a, error: s, helperText: e, name: o, ...i }, d) => /* @__PURE__ */ t(
-  n,
-  {
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { DropdownProvider as c } from "./contexts/dropdown.provider.js";
+import { Wrapper as x } from "./components/Wrapper.js";
+const N = n(
+  ({
     onChange: r,
     onBlur: l,
     value: a,
+    error: s,
+    helperText: e,
     name: o,
-    children: /* @__PURE__ */ m("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ t(
-        c,
-        {
-          name: o,
-          error: s,
-          ref: d,
-          onBlur: l,
-          ...i
-        }
-      ),
-      s ? /* @__PURE__ */ t("span", { className: "text-xs text-red-700", children: s }) : null,
-      !s && e ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: e }) : null
-    ] })
-  }
-));
+    highlightSearch: i,
+    ...d
+  }, m) => /* @__PURE__ */ t(
+    c,
+    {
+      highlightSearch: i,
+      name: o,
+      value: a,
+      onBlur: l,
+      onChange: r,
+      children: /* @__PURE__ */ p("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ t(
+          x,
+          {
+            name: o,
+            error: s,
+            ref: m,
+            onBlur: l,
+            ...d
+          }
+        ),
+        s ? /* @__PURE__ */ t("span", { className: "text-xs text-red-700", children: s }) : null,
+        !s && e ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: e }) : null
+      ] })
+    }
+  )
+);
 export {
-  v as Dropdown
+  N as Dropdown
 };

package/dist/components/Dropdown/Dropdown.variants.js

@@ -1,6 +1,7 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const a = e(
   [
+    "group",
     "border",
     "cursor-pointer",
     "ease-in-out",
@@ -20,7 +21,9 @@ const a = r(
     "aria-expanded:border-aurora-500",
     "aria-expanded:text-aurora-500",
     "kubefirst:aria-expanded:border-kubefirst-primary",
-    "kubefirst:aria-expanded:text-kubefirst-secondary"
+    "kubefirst:aria-expanded:text-kubefirst-secondary",
+    "dark:border-slate-600",
+    "dark:focus-visible:bg-slate-800"
   ],
   {
     variants: {
@@ -32,20 +35,40 @@ const a = r(
           "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 = r([
+), t = e([
+  "flex-1",
+  "bg-transparent",
+  "border-none",
+  "outline-none",
+  "text-zinc-700",
+  "text-sm",
+  "capitalize",
+  "placeholder:text-sm",
+  "placeholder:normal-case",
+  "placeholder:select-none",
+  "dark:placeholder:text-slate-400",
+  "dark:text-slate-50"
+]), d = e([
   "mb-1",
   "cursor-pointer",
-  "text-[14px]",
-  "leading-[20px]",
-  "tracking-[0.1px]"
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
 ]);
 export {
   a as dropdownVariants,
-  t as labelVariants
+  t as inputVariants,
+  d as labelVariants
 };

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

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

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

@@ -1,26 +1,28 @@
 import { c as o } from "../../../../index-D29mdTf5.js";
-const a = o([
+const t = o([
   "absolute",
   "bg-white",
   "border",
-  "duration-100",
-  "ease-in-out",
   "flex-col",
   "mt-1",
   "overflow-hidden",
   "rounded-md",
   "shadow-2xs",
   "top-full",
-  "transition-all",
   "w-full",
   "z-10",
   "max-h-[185px]",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
-  "data-[state=open]:block",
-  "data-[state=closed]:hidden"
+  "animate-in",
+  "fade-in-50",
+  "zoom-in-95",
+  "duration-[200ms]",
+  "dark:bg-slate-800",
+  "dark:border-slate-700",
+  "dark:text-slate-50"
 ]);
 export {
-  a as listVariants
+  t as listVariants
 };

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

@@ -1,43 +1,89 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { useRef as u, useCallback as s } from "react";
-import { Typography as d } from "../../../Typography/Typography.js";
-import { cn as h } from "../../../../utils/index.js";
-import { listItemVariants as x } from "./ListItem.variants.js";
-import { useDropdownContext as y } from "../../contexts/dropdown.hook.js";
-const j = ({
-  isClickable: a,
-  className: i,
+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 { setValue: l, toggleOpen: n } = y(), c = u(null), o = s(
+  const { searchTerm: a, highlightSearchEnabled: c, setValue: m, toggleOpen: f } = I(), g = w(null), n = o(
     (e) => {
-      l(e.value), n(!1);
+      m(e.value, b), f(!1);
     },
-    [l, n]
-  ), m = s(
-    (e, f) => {
-      e.key === "Enter" && (e.stopPropagation(), o(f));
+    [m, f]
+  ), u = o(
+    (e, r) => {
+      e.key === "Enter" && (e.stopPropagation(), n(r));
     },
-    [o]
+    [n]
+  ), k = o(
+    (e, r) => {
+      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,
+        {
+          variant: "body2",
+          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
+          ]
+        }
+      );
+    },
+    [c, a]
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "li",
     {
-      ref: c,
+      ref: g,
       role: "option",
-      className: h(x({ className: i })),
+      "data-action": "false",
+      className: i(L({ className: h })),
       tabIndex: 0,
       onClick: (e) => {
-        a && (o(t), e.stopPropagation());
+        p && (n(t), e.stopPropagation());
       },
-      onKeyDown: (e) => m(e, t),
+      onKeyDown: (e) => u(e, t),
       children: [
-        t.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: t.leftIcon }) : null,
-        /* @__PURE__ */ r(d, { variant: "body2", className: "text-zinc-700", children: 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 {
-  j as ListItem
+  K as ListItem
 };

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

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const i = o([
+import { c as r } from "../../../../index-D29mdTf5.js";
+const t = r([
   "cursor-pointer",
   "py-2",
   "px-2",
@@ -10,11 +10,13 @@ const i = o([
   "flex",
   "items-center",
   "gap-3",
-  "hover:bg-slate-50",
-  "focus:bg-slate-50",
-  "civo:focus:bg-civo-primary/5",
-  "civo:hover:bg-civo-primary/5"
+  "transition-bg",
+  "duration-250",
+  "hover:bg-gray-50",
+  "focus:bg-gray-50",
+  "dark:hover:bg-slate-700",
+  "dark:focus:bg-slate-700"
 ]);
 export {
-  i as listItemVariants
+  t as listItemVariants
 };