@konstructio/ui 0.1.2-alpha.3 → 0.1.2-alpha.4

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: {
@@ -38,14 +41,29 @@ const a = r(
       hasError: !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"
+]), n = e([
   "mb-1",
   "cursor-pointer",
-  "text-[14px]",
+  "text-sm",
   "leading-[20px]",
-  "tracking-[0.1px]"
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
 ]);
 export {
   a as dropdownVariants,
-  t as labelVariants
+  t as inputVariants,
+  n as labelVariants
 };

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

@@ -1,64 +1,76 @@
-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 x, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as k, useRef as C, useImperativeHandle as y } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import { useNavigationUlList as R } from "../../hooks/useNavigationList.js";
+import { ListItem as a } from "../ListItem/ListItem.js";
+import { listVariants as j } from "./List.variants.js";
+import { S as I } from "../../../../index-DQH6odE9.js";
+import { useDropdownContext as O } from "../../contexts/dropdown.hook.js";
+const z = k(
   ({
-    className: i,
-    isLoading: n,
-    itemClassName: o,
-    name: c,
-    options: r,
-    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(
+    additionalOptions: m,
+    className: f,
+    inputRef: p,
+    isLoading: u,
+    itemClassName: s,
+    name: d,
+    options: n,
+    searchable: i = !1,
+    wrapperInputRef: g,
+    wrapperRef: b
+  }, h) => {
+    const t = C(null), { isOpen: v, searchTerm: L } = O();
+    y(h, () => t.current, [t]), R({
+      ulRef: t,
+      wrapperRef: b,
+      wrapperInputRef: g,
+      inputRef: p,
+      searchable: i
+    });
+    const c = i ? n.filter((e) => {
+      const r = L.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(r);
+    }) : n, w = c.length === 0;
+    return /* @__PURE__ */ l(
       "ul",
       {
-        ref: l,
-        title: c,
+        ref: t,
+        title: d,
         role: "listbox",
-        className: h(C({ className: i })),
-        "data-state": b ? "open" : "closed",
-        children: n ? /* @__PURE__ */ t(
-          s,
+        className: o(j({ className: f })),
+        "data-state": v ? "open" : "closed",
+        children: u ? /* @__PURE__ */ l(
+          a,
           {
-            className: o,
+            className: o("select-none", s),
             isClickable: !1,
             value: "Loading...",
             label: "Loading..."
           }
-        ) : L ? /* @__PURE__ */ t(
-          s,
+        ) : w ? /* @__PURE__ */ l(
+          a,
           {
-            className: o,
+            className: o("select-none", s),
             isClickable: !1,
             value: "No options",
             label: "No options"
           }
-        ) : a.map((e) => /* @__PURE__ */ t(
-          s,
-          {
-            className: o,
-            isClickable: !0,
-            ...e
-          },
-          e.value
-        ))
+        ) : /* @__PURE__ */ x(N, { children: [
+          c.map((e) => /* @__PURE__ */ l(
+            a,
+            {
+              className: o("select-none", s),
+              isClickable: !0,
+              ...e
+            },
+            e.value
+          )),
+          m?.map((e, r) => /* @__PURE__ */ l("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ l(I, { 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 }) }, r))
+        ] })
       }
     );
   }
 );
 export {
-  T as List
+  z 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,66 @@
-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 o, jsxs as x } from "react/jsx-runtime";
+import { useRef as u, useCallback as l } from "react";
+import { Typography as b } from "../../../Typography/Typography.js";
+import { cn as w } from "../../../../utils/index.js";
+import { listItemVariants as y } from "./ListItem.variants.js";
+import { useDropdownContext as k } from "../../contexts/dropdown.hook.js";
+const D = ({
+  isClickable: f,
+  className: p,
   ...t
 }) => {
-  const { setValue: l, toggleOpen: n } = y(), c = u(null), o = s(
+  const { searchTerm: r, highlightSearchEnabled: i, setValue: c, toggleOpen: m } = k(), d = u(null), a = l(
     (e) => {
-      l(e.value), n(!1);
+      c(e.value), m(!1);
     },
-    [l, n]
-  ), m = s(
-    (e, f) => {
-      e.key === "Enter" && (e.stopPropagation(), o(f));
+    [c, m]
+  ), h = l(
+    (e, s) => {
+      e.key === "Enter" && (e.stopPropagation(), a(s));
     },
-    [o]
+    [a]
+  ), g = l(
+    (e) => {
+      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(
+        "mark",
+        {
+          className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+          children: n
+        },
+        n
+      ) : n) : [e];
+      return /* @__PURE__ */ o(
+        b,
+        {
+          variant: "body2",
+          className: "text-zinc-700 dark:text-slate-50",
+          children: s
+        }
+      );
+    },
+    [i, r]
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ x(
     "li",
     {
-      ref: c,
+      ref: d,
       role: "option",
-      className: h(x({ className: i })),
+      "data-action": "false",
+      className: w(y({ className: p })),
       tabIndex: 0,
       onClick: (e) => {
-        a && (o(t), e.stopPropagation());
+        f && (a(t), e.stopPropagation());
       },
-      onKeyDown: (e) => m(e, t),
+      onKeyDown: (e) => h(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__ */ o("span", { className: "w-4 h-4 flex justify-center items-center", children: t.leftIcon }) : null,
+        g(t.label)
       ]
     }
   );
 };
 export {
-  j as ListItem
+  D 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
 };