@konstructio/ui 0.1.2-alpha.104 → 0.1.2-alpha.105

package/dist/Wrapper-R8fik3ah.js

@@ -0,0 +1,182 @@
+import { t as r } from "./utils-Cx-WzRZF.js";
+import { LoaderIcon as oe } from "./assets/icons/components/Loader.js";
+import { t as se } from "./createLucideIcon-MbzNWCaI.js";
+import { t as ie } from "./chevron-up-Bjpvg6ui.js";
+import { Typography as ce } from "./components/Typography/Typography.js";
+import { useSelectContext as ue } from "./components/Select/contexts/select.hook.js";
+import { List as me } from "./components/Select/components/List/List.js";
+import { inputVariants as fe, labelVariants as pe, selectVariants as de } from "./components/Select/Select.variants.js";
+import { useSelect as xe } from "./components/Select/hooks/useSelect.js";
+import { forwardRef as he, useEffect as we, useId as Ne, useImperativeHandle as ge, useMemo as ve, useRef as h } from "react";
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+var ye = [["path", {
+  d: "m21 21-4.34-4.34",
+  key: "14j7rj"
+}], ["circle", {
+  cx: "11",
+  cy: "11",
+  r: "8",
+  key: "4ej97u"
+}]], ke = se("search", ye), Se = he(({ additionalOptions: R, className: D, defaultValue: w, disabled: a = !1, error: p, groupedOptions: T, iconClassName: S, inputClassName: E, isInfiniteScrollEnabled: F = !1, isLoading: k, isRequired: N, label: g, labelAction: K, labelClassName: M, labelWrapperClassName: W, listClassName: _, listItemClassName: $, listItemSecondRowClassName: q, name: d, noOptionsText: A, placeholder: v, searchable: C = !1, showSearchIcon: y, theme: H, visibleItems: P, wrapperClassName: U, onFetchMoreOptions: B, onBlur: G, onSearchChange: J, ...I }, Q) => {
+  const j = Ne(), c = h(null), L = h(null), O = h(null), X = h(0), { isOpen: o, options: l, searchTerm: Y, value: s, setCanFilter: Z, setSearchTerm: ee, setValue: u, toggleOpen: te } = ue(), t = ve(() => l.find(({ value: e }) => e === s), [l, s]), { wrapperRef: ae, wrapperInputRef: V, handleOpen: x } = xe({
+    inputRef: c,
+    searchInputRef: L,
+    internalValue: t,
+    onBlur: G
+  }), b = () => {
+    if (!a) {
+      if (o) {
+        te(!1);
+        return;
+      }
+      x();
+    }
+  }, re = (e) => {
+    if (!a) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !o) {
+          x();
+          return;
+        }
+        O.current?.querySelector("li")?.focus();
+        return;
+      }
+      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
+    }
+  }, m = d ? `${j}-${d}` : j;
+  ge(Q, () => c.current, [c]), we(() => {
+    if (w && !s) {
+      const e = l && l.find((f) => f.value === w);
+      e && u(e.value);
+    }
+  }, [
+    w,
+    l,
+    u,
+    s
+  ]);
+  const ne = (e) => {
+    const f = e.target.value;
+    Z(!0), u(""), ee(f ?? ""), J?.(f);
+    const z = l.find((le) => le.value.toLocaleLowerCase() === f.toLocaleLowerCase());
+    u(z ? z.value : t?.value ?? "");
+  };
+  return /* @__PURE__ */ i("div", {
+    ref: ae,
+    className: r("flex flex-col gap-2 w-full relative", U),
+    "data-theme": H,
+    children: [
+      g ? /* @__PURE__ */ i("div", {
+        className: r("flex items-center justify-between", W),
+        children: [/* @__PURE__ */ i("label", {
+          id: m,
+          className: r(pe({ className: M })),
+          htmlFor: m,
+          onClick: () => !a && x(),
+          children: [g, N && /* @__PURE__ */ n("span", {
+            className: "text-red-600 dark:text-red-500 ml-1",
+            children: "*"
+          })]
+        }), K]
+      }) : null,
+      /* @__PURE__ */ i("div", {
+        ref: V,
+        id: m,
+        className: r(de({
+          className: D,
+          hasError: !!p,
+          disabled: a
+        })),
+        role: "combobox",
+        onClick: b,
+        onKeyDown: re,
+        "aria-expanded": o,
+        tabIndex: X.current,
+        "aria-labelledby": m,
+        children: [/* @__PURE__ */ i("div", {
+          className: "flex gap-2.5 items-center flex-1",
+          children: [
+            t?.leftIcon && !y && /* @__PURE__ */ n("span", {
+              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
+              children: t.leftIcon
+            }),
+            y && /* @__PURE__ */ n(ke, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
+            C ? /* @__PURE__ */ n("input", {
+              ref: L,
+              type: "text",
+              value: o ? Y : t?.label ?? s ?? "",
+              onChange: ne,
+              placeholder: v,
+              className: r(fe({ className: E }), { "text-red-700 placeholder:text-red-700": !!p }),
+              onClick: (e) => {
+                e.stopPropagation(), a || x();
+              },
+              "aria-label": g || v,
+              "aria-labelledby": m,
+              required: N,
+              autoComplete: "off",
+              autoCapitalize: "words",
+              disabled: a,
+              tabIndex: -1,
+              ...I
+            }) : /* @__PURE__ */ i(ce, {
+              variant: "body2",
+              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
+                "text-red-700": !!p,
+                "select-none": !t,
+                "text-metal-800 dark:text-metal-50": t,
+                "text-metal-400/50 dark:text-metal-50/50": a
+              }, t?.wrapperClassNameOnSelectedValue),
+              children: [
+                t?.label || v,
+                " ",
+                t?.showRightComponentOnselectedValue ? t?.rightComponent : null
+              ]
+            })
+          ]
+        }), k ? /* @__PURE__ */ n(oe, {
+          size: 16,
+          className: "text-metal-400 animate-spin select-none"
+        }) : !y && /* @__PURE__ */ n(ie, {
+          "data-state": o ? "open" : "closed",
+          className: r("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-metal-50", S, {
+            "text-red-700": !!p,
+            "text-metal-400/50 dark:group-focus-within:text-zinc-500": a
+          })
+        })]
+      }),
+      /* @__PURE__ */ n("input", {
+        ref: c,
+        type: "text",
+        name: d,
+        className: "hidden",
+        "aria-hidden": "true",
+        required: N,
+        inert: !0,
+        defaultValue: t?.value ?? s ?? void 0,
+        ...I
+      }),
+      o && /* @__PURE__ */ n(me, {
+        ref: O,
+        additionalOptions: R,
+        className: _,
+        groupedOptions: T,
+        itemClassName: $,
+        name: d,
+        wrapperInputRef: V,
+        inputRef: c,
+        options: l,
+        isLoading: !!k,
+        searchable: C,
+        listItemSecondRowClassName: q,
+        isInfiniteScrollEnabled: F,
+        onFetchMoreOptions: B,
+        noOptionsText: A,
+        visibleItems: P
+      })
+    ]
+  });
+});
+export {
+  Se as t
+};

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
 import { t as a } from "../../utils-Cx-WzRZF.js";
-import { t as h } from "../../Wrapper-BhqUVI1G.js";
+import { t as h } from "../../Wrapper-R8fik3ah.js";
 import { SelectProvider as v } from "./contexts/select.provider.js";
 import { n as N } from "../../AdditionalOptions-D0BAS2HG.js";
 import { forwardRef as g, useMemo as j } from "react";

package/dist/components/Select/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-BhqUVI1G.js";
+import { t as p } from "../../../Wrapper-R8fik3ah.js";
 export {
   p as Wrapper
 };

package/dist/components/Select/components/index.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../Wrapper-BhqUVI1G.js";
+import { t as o } from "../../../Wrapper-R8fik3ah.js";
 import { t as i } from "../../../AdditionalOptions-D0BAS2HG.js";
 import { EmptyList as p } from "./EmptyList.js";
 import { List as a } from "./List/List.js";

package/dist/components/Select/hooks/useSelect.js

@@ -1,68 +1,56 @@
-import { useClickOutside as E } from "../../../hooks/useClickOutside.js";
-import { useSelectContext as w } from "../contexts/select.hook.js";
-import { useCallback as p, useEffect as l, useRef as v } from "react";
-var k = ({ ulRef: d, inputRef: o, searchInputRef: m, disabled: b, internalValue: i, onBlur: f }) => {
-  const n = v(null), a = v(null), { value: c, setSearchTerm: g, setCanFilter: u, toggleOpen: r } = w();
-  return E(n, p(() => {
-    r(!1);
-  }, [r])), l(() => {
-    const e = new AbortController(), s = (t) => {
-      t.key === "Escape" && r(!1);
+import { useClickOutside as m } from "../../../hooks/useClickOutside.js";
+import { useSelectContext as E } from "../contexts/select.hook.js";
+import { useCallback as b, useEffect as l, useRef as g } from "react";
+var h = ({ inputRef: r, searchInputRef: v, internalValue: c, onBlur: i }) => {
+  const t = g(null), d = g(null), { value: o, setSearchTerm: f, setCanFilter: u, toggleOpen: n } = E();
+  return m(t, b(() => {
+    n(!1);
+  }, [n])), l(() => {
+    const e = new AbortController(), s = (a) => {
+      a.key === "Escape" && n(!1);
     };
     return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
-      document.hidden && r(!1);
-    }, { signal: e.signal }), a.current?.addEventListener("focusin", (t) => {
-      !b && t.target?.matches(":focus-visible") && r(!0);
+      document.hidden && n(!1);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [r, n]), l(() => {
+  }, [n, t]), l(() => {
     const e = new AbortController();
-    return a.current?.addEventListener("keydown", (s) => {
-      if (s.key === "ArrowDown") {
-        const t = d.current?.querySelector("li");
-        t && t.focus();
-      }
-    }, { signal: e.signal }), () => {
-      e.abort();
-    };
-  }, [a, d]), l(() => {
-    const e = new AbortController();
-    return o?.current?.addEventListener("focusin", () => {
-      g(i?.value ?? ""), u(!1);
-    }, { signal: e.signal }), o?.current?.addEventListener("focusout", () => {
+    return r?.current?.addEventListener("focusin", () => {
+      f(c?.value ?? ""), u(!1);
+    }, { signal: e.signal }), r?.current?.addEventListener("focusout", () => {
       u(!0);
-    }, { signal: e.signal }), a.current?.addEventListener("focus", () => {
+    }, { signal: e.signal }), d.current?.addEventListener("focus", () => {
       u(!1);
-    }, { signal: e.signal }), n.current?.addEventListener("focusout", (s) => {
-      n.current?.contains(s.relatedTarget) || r(!1);
+    }, { signal: e.signal }), t.current?.addEventListener("focusout", (s) => {
+      t.current?.contains(s.relatedTarget) || n(!1);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [c]), l(() => {
-    o?.current && (o.current.value = c && i?.value || "");
-  }, [i, c]), l(() => {
+  }, [o]), l(() => {
+    r?.current && (r.current.value = o && c?.value || "");
+  }, [c, o]), l(() => {
     const e = new AbortController();
-    return n.current?.addEventListener("focusout", (s) => {
-      const t = s.relatedTarget;
-      (!t || !n.current?.contains(t)) && (o?.current?.value || f?.());
+    return t.current?.addEventListener("focusout", (s) => {
+      const a = s.relatedTarget;
+      (!a || !t.current?.contains(a)) && (r?.current?.value || i?.());
     }), () => {
       e.abort();
     };
   }, [
-    r,
     n,
-    g,
+    t,
     f,
-    c
+    i,
+    o
   ]), {
-    wrapperRef: n,
-    wrapperInputRef: a,
+    wrapperRef: t,
+    wrapperInputRef: d,
     handleOpen: () => {
-      r(!0), requestAnimationFrame(() => m?.current?.focus());
+      n(!0), requestAnimationFrame(() => v?.current?.focus());
     }
   };
 };
 export {
-  k as useSelect
+  h as useSelect
 };

package/dist/lib/components/Select/hooks/useSelect.d.ts

@@ -1,14 +1,12 @@
 import { ComponentRef, RefObject } from 'react';
 import { SelectProps, Option } from '../Select.types';
 type UseSelectParams = {
-    ulRef: RefObject<ComponentRef<'ul'> | null>;
     inputRef?: RefObject<ComponentRef<'input'> | null>;
     searchInputRef?: RefObject<ComponentRef<'input'> | null>;
-    disabled: boolean;
     internalValue?: Option;
     onBlur?: SelectProps['onBlur'];
 };
-export declare const useSelect: ({ ulRef, inputRef, searchInputRef, disabled, internalValue, onBlur, }: UseSelectParams) => {
+export declare const useSelect: ({ inputRef, searchInputRef, internalValue, onBlur, }: UseSelectParams) => {
     wrapperRef: RefObject<HTMLDivElement | null>;
     wrapperInputRef: RefObject<HTMLDivElement | null>;
     handleOpen: () => void;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.103",
+  "version": "0.1.2-alpha.104",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.104",
+  "version": "0.1.2-alpha.105",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/Wrapper-BhqUVI1G.js

@@ -1,171 +0,0 @@
-import { t as r } from "./utils-Cx-WzRZF.js";
-import { LoaderIcon as le } from "./assets/icons/components/Loader.js";
-import { t as se } from "./createLucideIcon-MbzNWCaI.js";
-import { t as oe } from "./chevron-up-Bjpvg6ui.js";
-import { Typography as ie } from "./components/Typography/Typography.js";
-import { useSelectContext as ce } from "./components/Select/contexts/select.hook.js";
-import { List as me } from "./components/Select/components/List/List.js";
-import { inputVariants as pe, labelVariants as ue, selectVariants as fe } from "./components/Select/Select.variants.js";
-import { useSelect as de } from "./components/Select/hooks/useSelect.js";
-import { forwardRef as xe, useEffect as he, useId as ve, useImperativeHandle as Ne, useMemo as ge, useRef as x } from "react";
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-var Ce = [["path", {
-  d: "m21 21-4.34-4.34",
-  key: "14j7rj"
-}], ["circle", {
-  cx: "11",
-  cy: "11",
-  r: "8",
-  key: "4ej97u"
-}]], we = se("search", Ce), Fe = xe(({ additionalOptions: z, className: R, defaultValue: h, disabled: t = !1, error: f, groupedOptions: T, iconClassName: F, inputClassName: S, isInfiniteScrollEnabled: E = !1, isLoading: k, isRequired: v, label: N, labelAction: M, labelClassName: W, labelWrapperClassName: _, listClassName: $, listItemClassName: H, listItemSecondRowClassName: P, name: d, noOptionsText: U, placeholder: g, searchable: y = !1, showSearchIcon: C, theme: q, visibleItems: A, wrapperClassName: B, onFetchMoreOptions: D, onBlur: G, onSearchChange: J, ...I }, K) => {
-  const j = ve(), i = x(null), L = x(null), O = x(null), Q = x(0), { isOpen: c, options: l, searchTerm: X, value: s, setCanFilter: Y, setSearchTerm: Z, setValue: m, toggleOpen: ee } = ce(), e = ge(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: te, wrapperInputRef: V, handleOpen: w } = de({
-    ulRef: O,
-    inputRef: i,
-    searchInputRef: L,
-    disabled: t,
-    internalValue: e,
-    onBlur: G
-  }), ae = () => {
-    if (!t) {
-      if (c) {
-        ee(!1);
-        return;
-      }
-      w();
-    }
-  }, p = d ? `${j}-${d}` : j;
-  Ne(K, () => i.current, [i]), he(() => {
-    if (h && !s) {
-      const a = l && l.find((u) => u.value === h);
-      a && m(a.value);
-    }
-  }, [
-    h,
-    l,
-    m,
-    s
-  ]);
-  const re = (a) => {
-    const u = a.target.value;
-    Y(!0), m(""), Z(u ?? ""), J?.(u);
-    const b = l.find((ne) => ne.value.toLocaleLowerCase() === u.toLocaleLowerCase());
-    m(b ? b.value : e?.value ?? "");
-  };
-  return /* @__PURE__ */ o("div", {
-    ref: te,
-    className: r("flex flex-col gap-2 w-full relative", B),
-    "data-theme": q,
-    children: [
-      N ? /* @__PURE__ */ o("div", {
-        className: r("flex items-center justify-between", _),
-        children: [/* @__PURE__ */ o("label", {
-          id: p,
-          className: r(ue({ className: W })),
-          htmlFor: p,
-          onClick: () => !t && w(),
-          children: [N, v && /* @__PURE__ */ n("span", {
-            className: "text-red-600 dark:text-red-500 ml-1",
-            children: "*"
-          })]
-        }), M]
-      }) : null,
-      /* @__PURE__ */ o("div", {
-        ref: V,
-        id: p,
-        className: r(fe({
-          className: R,
-          hasError: !!f,
-          disabled: t
-        })),
-        role: "combobox",
-        onClick: ae,
-        "aria-expanded": c,
-        tabIndex: Q.current,
-        "aria-labelledby": p,
-        children: [/* @__PURE__ */ o("div", {
-          className: "flex gap-2.5 items-center flex-1",
-          children: [
-            e?.leftIcon && !C && /* @__PURE__ */ n("span", {
-              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
-              children: e.leftIcon
-            }),
-            C && /* @__PURE__ */ n(we, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
-            y ? /* @__PURE__ */ n("input", {
-              ref: L,
-              type: "text",
-              value: c ? X : e?.label ?? s ?? "",
-              onChange: re,
-              placeholder: g,
-              className: r(pe({ className: S }), { "text-red-700 placeholder:text-red-700": !!f }),
-              onClick: (a) => {
-                a.stopPropagation(), t || w();
-              },
-              "aria-label": N || g,
-              "aria-labelledby": p,
-              required: v,
-              autoComplete: "off",
-              autoCapitalize: "words",
-              disabled: t,
-              tabIndex: -1,
-              ...I
-            }) : /* @__PURE__ */ o(ie, {
-              variant: "body2",
-              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
-                "text-red-700": !!f,
-                "select-none": !e,
-                "text-metal-800 dark:text-metal-50": e,
-                "text-metal-400/50 dark:text-metal-50/50": t
-              }, e?.wrapperClassNameOnSelectedValue),
-              children: [
-                e?.label || g,
-                " ",
-                e?.showRightComponentOnselectedValue ? e?.rightComponent : null
-              ]
-            })
-          ]
-        }), k ? /* @__PURE__ */ n(le, {
-          size: 16,
-          className: "text-metal-400 animate-spin select-none"
-        }) : !C && /* @__PURE__ */ n(oe, {
-          "data-state": c ? "open" : "closed",
-          className: r("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-metal-50", F, {
-            "text-red-700": !!f,
-            "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
-          })
-        })]
-      }),
-      /* @__PURE__ */ n("input", {
-        ref: i,
-        type: "text",
-        name: d,
-        className: "hidden",
-        "aria-hidden": "true",
-        required: v,
-        inert: !0,
-        defaultValue: e?.value ?? s ?? void 0,
-        ...I
-      }),
-      c && /* @__PURE__ */ n(me, {
-        ref: O,
-        additionalOptions: z,
-        className: $,
-        groupedOptions: T,
-        itemClassName: H,
-        name: d,
-        wrapperInputRef: V,
-        inputRef: i,
-        options: l,
-        isLoading: !!k,
-        searchable: y,
-        listItemSecondRowClassName: P,
-        isInfiniteScrollEnabled: E,
-        onFetchMoreOptions: D,
-        noOptionsText: U,
-        visibleItems: A
-      })
-    ]
-  });
-});
-export {
-  Fe as t
-};