@konstructio/ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components/Command/components/CommandSeparator.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as r } from "../../../index-Cz09twLl.js";
+import { _ as r } from "../../../index-Dkt8F6CZ.js";
 import { cn as t } from "../../../utils/index.js";
 const s = p(({ className: o, ...a }, m) => /* @__PURE__ */ e(
   r.Separator,

package/dist/components/Command/components/DialogContent.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { a as r, C as o, b as l } from "../../../index-1RDo-S_f.js";
+import { a as r, C as o, b as l } from "../../../index-DLYwlPRZ.js";
 import { cn as m } from "../../../utils/index.js";
 import { DialogOverlay as p } from "./DialogOverlay.js";
-import { X as c } from "../../../x-DU-Zw-L_.js";
+import { X as c } from "../../../x-BPcqkRZd.js";
 const f = i(({ className: e, children: s, ...n }, d) => /* @__PURE__ */ t(r, { children: [
   /* @__PURE__ */ a(p, {}),
   /* @__PURE__ */ t(

package/dist/components/Command/components/DialogOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { O as a } from "../../../index-1RDo-S_f.js";
+import { O as a } from "../../../index-DLYwlPRZ.js";
 import { cn as i } from "../../../utils/index.js";
 const m = d(({ className: t, ...e }, o) => /* @__PURE__ */ s(
   a,

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

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

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const a = t([
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const a = o([
   "absolute",
   "bg-white",
   "border",
@@ -18,7 +18,7 @@ const a = t([
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
-  "data-[state=open]:flex",
+  "data-[state=open]:block",
   "data-[state=closed]:hidden"
 ]);
 export {

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

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

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

@@ -1,137 +1,153 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { forwardRef as W, useId as B, useRef as R, useImperativeHandle as G, useMemo as J, useEffect as p } from "react";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W, useId as B, useRef as j, useImperativeHandle as G, useMemo as J, useEffect as N } from "react";
 import { Loading as K } from "../../Loading/Loading.js";
-import { Typography as O } from "../../Typography/Typography.js";
-import { cn as f } from "../../../utils/index.js";
-import { labelVariants as P, dropdownVariants as Q } from "../Dropdown.variants.js";
-import { useDropdown as S } from "../hooks/useDropdown.js";
-import { List as X } from "./List/List.js";
-import { C as Y } from "../../../chevron-up-DgLBQCKD.js";
-import { useDropdownContext as Z } from "../contexts/dropdown.hook.js";
-const le = W(
+import { cn as p } from "../../../utils/index.js";
+import { labelVariants as Q, dropdownVariants as X } from "../Dropdown.variants.js";
+import { useDropdown as Y } from "../hooks/useDropdown.js";
+import { List as Z } from "./List/List.js";
+import { Typography as _ } from "../../Typography/Typography.js";
+import { C as q } from "../../../chevron-up-RLP4nX7V.js";
+import { useDropdownContext as V } from "../contexts/dropdown.hook.js";
+const de = W(
   ({
-    className: z,
-    defaultValue: m,
-    iconClassName: j,
-    isLoading: u,
+    className: k,
+    defaultValue: u,
+    iconClassName: E,
+    isLoading: C,
     label: x,
-    labelClassName: E,
-    listClassName: L,
-    listItemClassName: k,
-    name: l,
-    options: a,
-    placeholder: D,
-    required: h,
-    theme: F,
-    wrapperClassName: T
-  }, $) => {
-    const v = B(), o = R(null), b = R(null), { wrapperRef: s, wrapperInputRef: N, handleOpen: A, handleOpenIfClosed: H } = S({ ulRef: b }), { isOpen: w, toggleOpen: g, value: t, setValue: C } = Z(), c = l ? `${v}-${l}` : v;
-    G($, () => o.current, [o]);
-    const e = J(() => a.find(({ value: n }) => n === t), [a, t]);
-    p(() => {
-      o.current && (o.current.value = t ? e == null ? void 0 : e.value : "");
-    }, [e, t]), p(() => {
-      if (m && !t) {
-        const n = a && a.find((i) => i.value === m);
-        n && C(n.value);
+    labelClassName: D,
+    listClassName: F,
+    listItemClassName: M,
+    name: i,
+    options: r,
+    placeholder: h,
+    required: g,
+    searchable: y = !1,
+    theme: $,
+    wrapperClassName: A
+  }, H) => {
+    const I = B(), s = j(null), R = j(null), { wrapperRef: l, wrapperInputRef: L, handleOpen: O, handleOpenIfClosed: P } = Y({ ulRef: R }), { isOpen: v, toggleOpen: z, value: o, setValue: b, setSearchTerm: w, searchTerm: S } = V(), c = i ? `${I}-${i}` : I;
+    G(H, () => s.current, [s]);
+    const e = J(() => r.find(({ value: t }) => t === o), [r, o]);
+    N(() => {
+      s.current && (s.current.value = o ? e == null ? void 0 : e.value : "");
+    }, [e, o]), N(() => {
+      if (u && !o) {
+        const t = r && r.find((n) => n.value === u);
+        t && b(t.value);
       }
-    }, [m, a, C, t]), p(() => {
-      var i;
-      const n = new AbortController();
-      return (i = s.current) == null || i.addEventListener("focusout", (U) => {
-        var y;
-        const I = U.relatedTarget;
-        (!I || !((y = s.current) != null && y.contains(I))) && g(!1);
+    }, [u, r, b, o]), N(() => {
+      var n;
+      const t = new AbortController();
+      return (n = l.current) == null || n.addEventListener("focusout", (d) => {
+        var T;
+        const f = d.relatedTarget;
+        (!f || !((T = l.current) != null && T.contains(f))) && (z(!1), w(""));
       }), () => {
-        n.abort();
+        t.abort();
       };
-    }, [g, s]);
-    const M = () => e != null && e.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ d(
+    }, [z, l, w]);
+    const U = (t) => {
+      const n = t.target.value;
+      w(n);
+      const d = r.find(
+        (f) => f.value.toLowerCase() === n.toLowerCase()
+      );
+      d && b(d.value);
+    };
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: s,
-        className: f("flex flex-col w-full relative", T),
-        "data-theme": F,
+        ref: l,
+        className: p("flex flex-col w-full relative", A),
+        "data-theme": $,
         children: [
-          x ? /* @__PURE__ */ d(
+          x ? /* @__PURE__ */ m(
             "label",
             {
               id: c,
-              className: f(P({ className: E })),
+              className: p(Q({ className: D })),
               htmlFor: c,
-              onClick: H,
+              onClick: P,
               children: [
                 x,
-                h ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
+                g ? /* @__PURE__ */ a("span", { className: "text-red-500 ml-1", children: "*" }) : null
               ]
             }
           ) : null,
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ m(
             "div",
             {
-              ref: N,
+              ref: L,
               id: c,
-              className: f(Q({ className: z })),
+              className: p(X({ className: k })),
               role: "combobox",
-              onClick: A,
-              "aria-expanded": w,
+              onClick: O,
+              "aria-expanded": v,
               tabIndex: 0,
               "aria-labelledby": c,
               children: [
-                t ? /* @__PURE__ */ d(
-                  O,
+                /* @__PURE__ */ m("div", { className: "flex gap-3 items-center flex-1", children: [
+                  (e == null ? void 0 : e.leftIcon) && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }),
+                  y ? /* @__PURE__ */ a(
+                    "input",
+                    {
+                      type: "text",
+                      value: v ? S : (e == null ? void 0 : e.label) || "",
+                      onChange: U,
+                      placeholder: h,
+                      className: "flex-1 bg-transparent border-none outline-none text-zinc-700 text-base",
+                      onClick: (t) => {
+                        t.stopPropagation(), O();
+                      },
+                      "aria-label": x || h,
+                      "aria-labelledby": c
+                    }
+                  ) : /* @__PURE__ */ a(
+                    _,
+                    {
+                      variant: "body2",
+                      className: "flex-1 text-zinc-700 text-base",
+                      children: (e == null ? void 0 : e.label) || h
+                    }
+                  )
+                ] }),
+                C ? /* @__PURE__ */ a(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ a(
+                  q,
                   {
-                    variant: "body2",
-                    className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: [
-                      M(),
-                      e == null ? void 0 : e.label
-                    ]
-                  }
-                ) : /* @__PURE__ */ r(
-                  O,
-                  {
-                    variant: "body2",
-                    className: "flex gap-3 items-center text-zinc-700 text-base",
-                    children: D
-                  }
-                ),
-                u ? /* @__PURE__ */ r(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
-                  Y,
-                  {
-                    "data-state": w ? "open" : "closed",
-                    className: f(
+                    "data-state": v ? "open" : "closed",
+                    className: p(
                       "w-4 h-4 text-zinc-500 transition-all duration-50 data-[state=open]:rotate-0 data-[state=closed]:rotate-180",
-                      j
+                      E
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "input",
             {
-              ref: o,
+              ref: s,
               type: "text",
-              name: l,
+              name: i,
               className: "hidden",
               "aria-hidden": "true",
-              required: h
+              required: g
             }
           ),
-          /* @__PURE__ */ r(
-            X,
+          /* @__PURE__ */ a(
+            Z,
             {
-              ref: b,
-              className: L,
-              itemClassName: k,
-              name: l,
-              wrapperRef: s,
-              wrapperInputRef: N,
-              options: a,
-              isLoading: !!u
+              ref: R,
+              className: F,
+              itemClassName: M,
+              name: i,
+              wrapperRef: l,
+              wrapperInputRef: L,
+              options: r,
+              isLoading: !!C,
+              searchable: y
             }
           )
         ]
@@ -140,5 +156,5 @@ const le = W(
   }
 );
 export {
-  le as Wrapper
+  de as Wrapper
 };

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = e({
+const o = e({
   isOpen: !1,
   toggleOpen() {
     throw new Error("toggleOpen function must be overridden");
@@ -7,8 +7,12 @@ const t = e({
   value: void 0,
   setValue() {
     throw new Error("setValue function must be overridden");
+  },
+  searchTerm: "",
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
   }
 });
 export {
-  t as DropdownContext
+  o as DropdownContext
 };

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,22 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
-import { useCallback as u } from "react";
-import { DropdownContext as d } from "./dropdown.context.js";
-import { useToggle as f } from "../../../hooks/useToggle.js";
-const w = ({ children: t, onChange: r, value: e, name: o }) => {
-  const [l, p] = f(!1), s = u(
-    (m) => {
-      r == null || r({ target: { value: m, name: o ?? "" } });
+import { useState as u, useCallback as d } from "react";
+import { DropdownContext as f } from "./dropdown.context.js";
+import { useToggle as v } from "../../../hooks/useToggle.js";
+const D = ({ children: t, onChange: r, value: o, name: e }) => {
+  const [s, m] = v(!1), [l, p] = u(""), a = d(
+    (c) => {
+      r == null || r({ target: { value: c, name: e ?? "" } });
     },
-    [r, o]
+    [r, e]
   );
   return /* @__PURE__ */ i(
-    d.Provider,
+    f.Provider,
     {
-      value: { value: e, isOpen: l, setValue: s, toggleOpen: p },
+      value: {
+        value: o,
+        isOpen: s,
+        setValue: a,
+        toggleOpen: m,
+        searchTerm: l,
+        setSearchTerm: p
+      },
       children: t
     }
   );
 };
 export {
-  w as DropdownProvider
+  D as DropdownProvider
 };

package/dist/components/Input/Input.js

@@ -2,7 +2,7 @@ import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import s, { forwardRef as v, useId as E, useState as _ } from "react";
 import { cn as d } from "../../utils/index.js";
 import { inputVariants as k } from "./Input.variants.js";
-import { P as a } from "../../index-C5psggHV.js";
+import { P as a } from "../../index-h-Ul0anl.js";
 function m() {
   return m = Object.assign || function(e) {
     for (var r = 1; r < arguments.length; r++) {
@@ -120,11 +120,11 @@ const V = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200
     labelClassName: i,
     name: c,
     theme: b,
-    type: f = "text",
+    type: p = "text",
     helperText: y,
     ...C
   }, j) => {
-    const O = E(), [u, N] = _(() => f !== "password"), p = typeof r == "string" && r.length >= 0, P = u ? x : w;
+    const O = E(), [u, N] = _(() => p !== "password"), f = typeof r == "string" && r.length >= 0, P = u ? x : w;
     return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": b, children: [
       n ? /* @__PURE__ */ h(
         "label",
@@ -147,7 +147,7 @@ const V = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200
           {
             className: d(
               "absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
-              p && "text-red-600"
+              f && "text-red-600"
             ),
             children: /* @__PURE__ */ l(V, { className: "w-5 h-5" })
           }
@@ -158,20 +158,20 @@ const V = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200
             id: O,
             ref: j,
             name: c,
-            type: u ? "text" : "password",
+            type: u ? p : "password",
             className: d(
               k({
                 className: e,
-                variant: p ? "error" : "default"
+                variant: f ? "error" : "default"
               }),
-              (f === "password" || p) && "pr-10",
+              (p === "password" || f) && "pr-10",
               t && "pl-8"
             ),
             ...C
           }
         ),
-        p ? /* @__PURE__ */ l("i", { className: "absolute right-3 text-red-600 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ l(W, { className: "w-5 h-5" }) }) : null,
-        f === "password" && !r ? /* @__PURE__ */ l("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ l(
+        f ? /* @__PURE__ */ l("i", { className: "absolute right-3 text-red-600 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ l(W, { className: "w-5 h-5" }) }) : null,
+        p === "password" && !r ? /* @__PURE__ */ l("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ l(
           P,
           {
             className: "w-5 h-5 cursor-pointer",

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../index-BCGvACM9.js";
-import { M as d } from "../../Modal-DXYBiafI.js";
+import { M as d } from "../../Modal-CrG0m703.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,11 +1,11 @@
 import "react/jsx-runtime";
 import "../../../../index--EmNlyHx.js";
 import "react";
-import { W as f } from "../../../../Modal-DXYBiafI.js";
-import "../../../../Combination-Cvr3uETz.js";
+import "../../../../Combination-VYaRRJBZ.js";
+import { W as f } from "../../../../Modal-CrG0m703.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../x-DU-Zw-L_.js";
+import "../../../../x-BPcqkRZd.js";
 export {
   f as Wrapper
 };

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

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-BNmRGtA6.js";
-const t = o([
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const o = t([
   "bg-metal-1000",
   "bg-white",
   "border-none",
@@ -8,18 +8,16 @@ const t = o([
   "justify-between",
   "min-h-[450px]",
   "min-w-[500px]",
-  "overflow-auto",
   "relative",
   "rounded-md",
   "shadow-xs",
-  "lg:overflow-hidden",
   "animate-in",
   "fade-in-0",
   "zoom-in-95",
   "duration-150",
   "shadow-kubefirst-primary",
   "colony:shadow-red-400"
-]), r = o([
+]), r = t([
   "absolute",
   "right-1.5",
   "top-1.5",
@@ -30,5 +28,5 @@ const t = o([
 ]);
 export {
   r as buttonCloseVariants,
-  t as modalVariants
+  o as modalVariants
 };