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

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

@@ -1,133 +1,174 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as W, useId as q, useRef as T, useImperativeHandle as G, useMemo as J, useEffect as N } from "react";
-import { Loading as K } from "../../Loading/Loading.js";
-import { Typography as Q } from "../../Typography/Typography.js";
-import { cn as s } from "../../../utils/index.js";
-import { labelVariants as X, dropdownVariants as Y } from "../Dropdown.variants.js";
-import { useDropdown as Z } from "../hooks/useDropdown.js";
-import { List as _ } from "./List/List.js";
-import { C as B } from "../../../chevron-up-RLP4nX7V.js";
-import { useDropdownContext as ee } from "../contexts/dropdown.hook.js";
-const fe = W(
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { forwardRef as X, useId as Y, useRef as T, useImperativeHandle as Z, useMemo as B, useEffect as z } from "react";
+import { Loading as ee } from "../../Loading/Loading.js";
+import { Typography as te } from "../../Typography/Typography.js";
+import { cn as c } from "../../../utils/index.js";
+import { labelVariants as ae, inputVariants as re, dropdownVariants as ne } from "../Dropdown.variants.js";
+import { useDropdown as oe } from "../hooks/useDropdown.js";
+import { List as le } from "./List/List.js";
+import { c as V } from "../../../createLucideIcon-DGhJ8Z4k.js";
+import { useDropdownContext as se } from "../contexts/dropdown.hook.js";
+/**
+* @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 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], ie = V("chevron-up", ce);
+/**
+* @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 ue = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], fe = V("search", ue), ge = X(
   ({
-    className: j,
-    defaultValue: p,
-    error: f,
-    iconClassName: k,
-    isLoading: C,
-    label: x,
-    labelClassName: V,
-    listClassName: D,
-    listItemClassName: F,
-    name: u,
-    options: a,
-    placeholder: h,
-    isRequired: g,
-    searchable: y = !1,
-    theme: M,
-    wrapperClassName: $,
-    onBlur: I
-  }, A) => {
-    const L = q(), n = T(null), O = T(null), { wrapperRef: c, wrapperInputRef: R, handleOpen: z, handleOpenIfClosed: H } = Z({ ulRef: O }), { isOpen: v, searchTerm: P, value: r, toggleOpen: E, setValue: b, setSearchTerm: w } = ee(), i = u ? `${L}-${u}` : L;
-    G(A, () => n.current, [n]);
-    const l = J(() => a.find(({ value: e }) => e === r), [a, r]);
-    N(() => {
-      n.current && (n.current.value = r ? l?.value : "");
-    }, [l, r]), N(() => {
-      if (p && !r) {
-        const e = a && a.find((o) => o.value === p);
-        e && b(e.value);
+    additionalOptions: _,
+    className: $,
+    defaultValue: h,
+    disabled: r = !1,
+    error: m,
+    iconClassName: D,
+    inputClassName: F,
+    isLoading: j,
+    isRequired: v,
+    label: w,
+    labelClassName: M,
+    listClassName: A,
+    listItemClassName: H,
+    listItemSecondRowClassName: P,
+    name: i,
+    options: o,
+    placeholder: N,
+    searchable: k = !1,
+    onSearchChange: U,
+    showSearchIcon: C,
+    theme: W,
+    wrapperClassName: q,
+    onBlur: I,
+    ...b
+  }, G) => {
+    const E = Y(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = oe({
+      ulRef: O,
+      inputRef: t,
+      disabled: r
+    }), { isOpen: p, searchTerm: J, value: l, toggleOpen: K, setValue: y, setSearchTerm: L } = se(), f = i ? `${E}-${i}` : E;
+    Z(G, () => t.current, [t]);
+    const n = B(() => o.find(({ value: e }) => e === l), [o, l]);
+    z(() => {
+      t.current && (t.current.value = l ? n?.value : "");
+    }, [n, l]), z(() => {
+      if (h && !l) {
+        const e = o && o.find((s) => s.value === h);
+        e && y(e.value);
       }
-    }, [p, a, b, r]), N(() => {
+    }, [h, o, y, l]), z(() => {
       const e = new AbortController();
-      return c.current?.addEventListener("focusout", (o) => {
-        const d = o.relatedTarget;
-        (!d || !c.current?.contains(d)) && (E(!1), w(""), n.current?.value || I?.());
+      return u.current?.addEventListener("focusout", (s) => {
+        const d = s.relatedTarget;
+        (!d || !u.current?.contains(d)) && (L(""), t.current?.value || I?.());
       }), () => {
         e.abort();
       };
-    }, [E, c, w, I, r]);
-    const S = (e) => {
-      const o = e.target.value;
-      w(o);
-      const d = a.find(
-        (U) => U.value.toLocaleLowerCase() === o.toLocaleLowerCase()
+    }, [K, u, L, I, l]);
+    const Q = (e) => {
+      const s = e.target.value;
+      U?.(s), L(s);
+      const d = o.find(
+        (S) => S.value.toLocaleLowerCase() === s.toLocaleLowerCase()
       );
-      d && b(d.value);
+      d && y(d.value);
     };
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ x(
       "div",
       {
-        ref: c,
-        className: s("flex flex-col w-full relative", $),
-        "data-theme": M,
+        ref: u,
+        className: c("flex flex-col w-full relative", q),
+        "data-theme": W,
         children: [
-          x ? /* @__PURE__ */ m(
+          w ? /* @__PURE__ */ x(
             "label",
             {
-              id: i,
-              className: s(X({ className: V })),
-              htmlFor: i,
-              onClick: H,
+              id: f,
+              className: c(ae({ className: M })),
+              htmlFor: f,
+              onClick: () => !r && g(),
               children: [
-                x,
-                g ? /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" }) : null
+                w,
+                v && /* @__PURE__ */ a("span", { className: "text-red-600 ml-1", children: "*" })
               ]
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ x(
             "div",
             {
               ref: R,
-              id: i,
-              className: s(Y({ className: j, hasError: !!f })),
+              id: f,
+              className: c(
+                ne({ className: $, hasError: !!m, disabled: r })
+              ),
               role: "combobox",
-              onClick: z,
-              "aria-expanded": v,
+              onClick: () => !r && g(),
+              "aria-expanded": p,
               tabIndex: 0,
-              "aria-labelledby": i,
+              "aria-labelledby": f,
               children: [
-                /* @__PURE__ */ m("div", { className: "flex gap-3 items-center flex-1", children: [
-                  l?.leftIcon && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: l.leftIcon }),
-                  y ? /* @__PURE__ */ t(
+                /* @__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(fe, { 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: v ? P : l?.label || "",
-                      onChange: S,
-                      placeholder: h,
-                      className: s(
-                        "flex-1 bg-transparent border-none outline-none text-zinc-700 text-base",
-                        {
-                          "text-red-700 placeholder:text-red-700": !!f
-                        }
-                      ),
+                      value: p ? J : n?.label || "",
+                      name: i,
+                      onChange: Q,
+                      placeholder: N,
+                      className: c(re({ className: F }), {
+                        "text-red-700 placeholder:text-red-700": !!m
+                      }),
                       onClick: (e) => {
-                        e.stopPropagation(), z();
+                        e.stopPropagation(), r || g();
                       },
-                      "aria-label": x || h,
-                      "aria-labelledby": i
+                      "aria-label": w || N,
+                      "aria-labelledby": f,
+                      required: v,
+                      autoComplete: "off",
+                      autoCapitalize: "words",
+                      disabled: r,
+                      ...b
                     }
-                  ) : /* @__PURE__ */ t(
-                    Q,
+                  ) : /* @__PURE__ */ a(
+                    te,
                     {
                       variant: "body2",
-                      className: s("flex-1 text-zinc-700 text-base", {
-                        "text-red-700": !!f
-                      }),
-                      children: l?.label || h
+                      className: c(
+                        "flex-1 text-zinc-400 text-sm dark:text-slate-400",
+                        {
+                          "text-red-700": !!m,
+                          "select-none": !n,
+                          "text-slate-800 dark:text-slate-50": n,
+                          "text-slate-400/50 dark:text-slate-50/50": r
+                        }
+                      ),
+                      children: n?.label || N
                     }
                   )
                 ] }),
-                C ? /* @__PURE__ */ t(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ t(
-                  B,
+                j ? /* @__PURE__ */ a(ee, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
+                  ie,
                   {
-                    "data-state": v ? "open" : "closed",
-                    className: s(
-                      "w-4 h-4 text-zinc-500 transition-all duration-50 data-[state=open]:rotate-0 data-[state=closed]:rotate-180",
-                      k,
+                    "data-state": p ? "open" : "closed",
+                    className: c(
+                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
+                      D,
                       {
-                        "text-red-700": !!f
+                        "text-red-700": !!m,
+                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": r
                       }
                     )
                   }
@@ -135,29 +176,34 @@ const fe = W(
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          !k && /* @__PURE__ */ a(
             "input",
             {
-              ref: n,
+              ref: t,
               type: "text",
-              name: u,
+              name: i,
               className: "hidden",
               "aria-hidden": "true",
-              required: g
+              required: v,
+              inert: !0,
+              ...b
             }
           ),
-          /* @__PURE__ */ t(
-            _,
+          p && /* @__PURE__ */ a(
+            le,
             {
               ref: O,
-              className: D,
-              itemClassName: F,
-              name: u,
-              wrapperRef: c,
+              additionalOptions: _,
+              className: A,
+              itemClassName: H,
+              name: i,
+              wrapperRef: u,
               wrapperInputRef: R,
-              options: a,
-              isLoading: !!C,
-              searchable: y
+              inputRef: t,
+              options: o,
+              isLoading: !!j,
+              searchable: k,
+              listItemSecondRowClassName: P
             }
           )
         ]
@@ -166,5 +212,5 @@ const fe = W(
   }
 );
 export {
-  fe as Wrapper
+  ge as Wrapper
 };

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

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

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

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

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,57 +1,60 @@
-import { useRef as c, useEffect as d, useCallback as u } from "react";
-import { useDropdownContext as g } from "../contexts/dropdown.hook.js";
-const b = ({ ulRef: a }) => {
-  const o = c(null), t = c(null), { isOpen: i, toggleOpen: e } = g();
-  d(() => {
-    const n = new AbortController(), s = (l) => {
-      l.key === "Escape" && e(!1);
-    }, r = (l) => {
-      o.current?.contains(l.target) || e(!1);
+import { useRef as c, useEffect as u, useCallback as g } from "react";
+import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
+const b = ({
+  ulRef: i,
+  inputRef: l,
+  disabled: d
+}) => {
+  const o = c(null), t = c(null), { toggleOpen: n } = m();
+  u(() => {
+    const e = new AbortController(), s = (a) => {
+      a.key === "Escape" && n(!1);
+    }, r = (a) => {
+      o.current?.contains(a.target) || n(!1);
     };
     return document.addEventListener("keydown", s, {
-      signal: n.signal
+      signal: e.signal
     }), document.addEventListener("mousedown", r, {
-      signal: n.signal
+      signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && e(!1);
+        document.hidden && n(!1);
       },
       {
-        signal: n.signal
+        signal: e.signal
       }
     ), t.current?.addEventListener(
       "focus",
       () => {
-        e(!0);
+        d || n(!0);
       },
-      { signal: n.signal }
+      { signal: e.signal }
     ), () => {
-      n.abort();
+      e.abort();
     };
-  }, [e, o]), d(() => {
-    const n = new AbortController();
+  }, [n, o]), u(() => {
+    const e = new AbortController();
     return t.current?.addEventListener(
       "keydown",
       (s) => {
         if (s.key === "ArrowDown") {
-          const r = a.current?.querySelector("li");
+          const r = i.current?.querySelector("li");
           r && r.focus();
         }
       },
-      { signal: n.signal }
+      { signal: e.signal }
     ), () => {
-      n.abort();
+      e.abort();
     };
-  }, [t, a]);
-  const f = u(() => e(!0), [e]), p = u(() => {
-    i || e(!1);
-  }, [i, e]);
+  }, [t, i]);
+  const f = g(() => {
+    n(!0), requestAnimationFrame(() => l?.current?.focus());
+  }, [l, n]);
   return {
     wrapperRef: o,
     wrapperInputRef: t,
-    handleOpen: f,
-    handleOpenIfClosed: p
+    handleOpen: f
   };
 };
 export {

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,58 +1,62 @@
-import { useRef as b, useEffect as u } from "react";
-import { useDropdownContext as f } from "../contexts/dropdown.hook.js";
-const d = ({
+import { useRef as g, useEffect as i } from "react";
+import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
+const w = ({
+  inputRef: s,
+  searchable: l,
   ulRef: t,
-  wrapperRef: i,
-  wrapperInputRef: o
+  wrapperInputRef: u,
+  wrapperRef: a
 }) => {
-  const r = b(0), { isOpen: l } = f();
-  u(() => {
-    const e = t.current?.querySelectorAll("li") ?? [], c = new AbortController(), n = () => {
+  const r = g(0), { isOpen: f } = d();
+  i(() => {
+    const c = t.current?.querySelectorAll("li") ?? [], e = Array.from(c).filter(
+      (n) => n.getAttribute("data-action") !== "true"
+    ), o = new AbortController(), m = () => {
       r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, a = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, o.current?.focus());
+    }, b = () => {
+      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, s?.current && l ? s.current.focus() : u.current?.focus());
     };
     return t.current?.addEventListener(
       "keydown",
-      (s) => {
-        switch (s.preventDefault(), s.key) {
+      (n) => {
+        switch (n.preventDefault(), n.key) {
           case "ArrowDown": {
-            n();
+            m();
             break;
           }
           case "Tab": {
-            s.shiftKey ? a() : n();
+            n.shiftKey ? b() : m();
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? o.current?.focus() : a();
+            r.current === 0 ? u.current?.focus() : b();
             break;
           }
           case "Enter": {
-            e[r.current].querySelector("button")?.click();
+            e[r.current]?.click();
             break;
           }
         }
       },
-      { signal: c.signal }
+      { signal: o.signal }
     ), () => {
-      c.abort();
+      o.abort();
     };
-  }, [t, r, o]), u(() => {
-    const e = new AbortController();
-    return i.current?.addEventListener(
+  }, [t, r, u, s, l]), i(() => {
+    const c = new AbortController();
+    return a.current?.addEventListener(
       "mouseenter",
       () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
+        (t.current?.querySelectorAll("li") ?? []).forEach((o) => o.blur());
       },
-      { signal: e.signal }
+      { signal: c.signal }
     ), () => {
-      e.abort();
+      c.abort();
     };
-  }, [t, i]), u(() => {
-    l || (r.current = 0);
-  }, [l]);
+  }, [t, a]), i(() => {
+    f || (r.current = 0);
+  }, [f]);
 };
 export {
-  d as useNavigationUlList
+  w as useNavigationUlList
 };

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import { jsxs as h, jsx as p } from "react/jsx-runtime";
 import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
 import { cn as l } from "../../utils/index.js";
 import { Button as P } from "../Button/Button.js";
-import { P as c } from "../../index-h-Ul0anl.js";
+import { P as c } from "../../index-N2OStZoU.js";
 function m() {
   return m = Object.assign || function(e) {
     for (var i = 1; i < arguments.length; i++) {

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-BLZPftpV.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-BLZPftpV.js";
+import { C as N } from "../../../../chevron-down-J5nS1Tu0.js";
 const R = ({
   label: s,
   position: l = "left",

package/dist/components/Input/Input.js

@@ -4,7 +4,7 @@ import { cn as u } from "../../utils/index.js";
 import { inputVariants as $ } from "./Input.variants.js";
 import { SearchIcon as L } from "../../assets/icons/components/Search.js";
 import { Warning as T } from "../../assets/icons/components/Warning.js";
-import { P as i } from "../../index-h-Ul0anl.js";
+import { P as i } from "../../index-N2OStZoU.js";
 function h() {
   return h = Object.assign || function(t) {
     for (var n = 1; n < arguments.length; n++) {

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-DbC6TvM5.js";
+import { c as t } from "../../createLucideIcon-DGhJ8Z4k.js";
 /**
-* @license lucide-react v0.544.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/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../index-C9T9HQaa.js";
-import { M as d } from "../../Modal-V67Uz78z.js";
+import "react-dom";
+import { M as d } from "../../Modal-B8jrP02v.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";