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

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

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

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

@@ -1,7 +1,11 @@
-import { useRef as c, useEffect as u, useCallback as f } from "react";
-import { useDropdownContext as g } from "../contexts/dropdown.hook.js";
-const w = ({ ulRef: l, inputRef: i }) => {
-  const o = c(null), t = c(null), { toggleOpen: n } = g();
+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);
@@ -23,7 +27,7 @@ const w = ({ ulRef: l, inputRef: i }) => {
     ), t.current?.addEventListener(
       "focus",
       () => {
-        n(!0);
+        d || n(!0);
       },
       { signal: e.signal }
     ), () => {
@@ -35,7 +39,7 @@ const w = ({ ulRef: l, inputRef: i }) => {
       "keydown",
       (s) => {
         if (s.key === "ArrowDown") {
-          const r = l.current?.querySelector("li");
+          const r = i.current?.querySelector("li");
           r && r.focus();
         }
       },
@@ -43,16 +47,16 @@ const w = ({ ulRef: l, inputRef: i }) => {
     ), () => {
       e.abort();
     };
-  }, [t, l]);
-  const d = f(() => {
-    n(!0), requestAnimationFrame(() => i?.current?.focus());
-  }, [i, n]);
+  }, [t, i]);
+  const f = g(() => {
+    n(!0), requestAnimationFrame(() => l?.current?.focus());
+  }, [l, n]);
   return {
     wrapperRef: o,
     wrapperInputRef: t,
-    handleOpen: d
+    handleOpen: f
   };
 };
 export {
-  w as useDropdown
+  b as useDropdown
 };

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

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-DnY-81vT.js";
+import { c as t } 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.