@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.46

package/dist/components/{Dropdown/Dropdown.variants.js → Select/Select.variants.js}

@@ -52,7 +52,7 @@ const a = e(
   "bg-transparent",
   "border-none",
   "outline-none",
-  "text-zinc-700",
+  "text-metal-700",
   "text-sm",
   "capitalize",
   "placeholder:text-sm",
@@ -69,7 +69,7 @@ const a = e(
   "dark:text-metal-50"
 ]);
 export {
-  a as dropdownVariants,
   t as inputVariants,
-  d as labelVariants
+  d as labelVariants,
+  a as selectVariants
 };

package/dist/components/{Dropdown → Select}/components/List/List.js

@@ -3,75 +3,75 @@ import { S as Z } from "../../../../index-BvoZGpli.js";
 import { d as B } from "../../../../debounce-BFejQm9P.js";
 import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
 import { Loading as R } from "../../../Loading/Loading.js";
-import { cn as s } from "../../../../utils/index.js";
+import { cn as o } from "../../../../utils/index.js";
 import { useNavigationUlList as W } from "../../hooks/useNavigationList.js";
 import { ListItem as b } from "../ListItem/ListItem.js";
 import { listVariants as X } from "./List.variants.js";
 import { DEFAULT_LIST_SIZE as Y } from "../../constants/pagination.js";
-import { useDropdownContext as $ } from "../../contexts/dropdown.hook.js";
+import { useSelectContext as $ } from "../../contexts/select.hook.js";
 const fe = G(
   ({
     additionalOptions: F,
     className: N,
-    inputRef: i,
+    inputRef: l,
     isLoading: E,
-    itemClassName: l,
+    itemClassName: i,
     name: I,
-    searchable: y = !1,
+    searchable: x = !1,
     listItemSecondRowClassName: c,
-    wrapperInputRef: j,
+    wrapperInputRef: S,
     isInfiniteScrollEnabled: u,
     onFetchMoreOptions: f,
-    noOptionsText: L
-  }, O) => {
-    const n = C(null), m = C(null), [p, w] = J(!1), {
-      isOpen: P,
+    noOptionsText: y
+  }, j) => {
+    const n = C(null), m = C(null), [p, L] = J(!1), {
+      isOpen: O,
       searchTerm: g,
-      canFilter: S,
+      canFilter: P,
       canContinueFetching: a,
       page: d,
-      options: x,
+      options: w,
       isTyping: k,
       setOptions: T,
-      setPage: D,
-      setCanContinueFetching: U
+      setPage: U,
+      setCanContinueFetching: _
     } = $();
-    K(O, () => n.current, [n]);
-    const h = y && S ? x.filter((e) => {
+    K(j, () => n.current, [n]);
+    const h = x && P ? w.filter((e) => {
       const t = g.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : x;
+    }) : w;
     W({
       ulRef: n,
-      wrapperInputRef: j,
-      searchable: y,
+      wrapperInputRef: S,
+      searchable: x,
       filteredOptions: h
     });
-    const _ = h.filter(
-      (e, t, o) => t === o.findIndex((v) => v.value === e.value)
-    ), q = h.length === 0, z = M(
+    const q = h.filter(
+      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
+    ), z = h.length === 0, A = M(
       () => B(async (e) => {
         const [t] = e;
         if (t.isIntersecting && !p && f && a)
           try {
-            w(!0);
-            const o = d + 1, { data: v, hasMore: A } = await f({
-              page: o,
+            L(!0);
+            const s = d + 1, { data: v, hasMore: D } = await f({
+              page: s,
               pageSize: Y,
               termOfSearch: g
             });
-            D(o), U(A), T((H) => [...H, ...v]);
+            U(s), _(D), T((H) => [...H, ...v]);
           } catch {
             console.error("Error fetching more options");
           } finally {
-            w(!1);
+            L(!1);
           }
       }, 100),
       [p, f, g, d]
     );
     return Q(() => {
       if (u && a && m.current && !k) {
-        const e = new IntersectionObserver(z, {
+        const e = new IntersectionObserver(A, {
           threshold: 0.1
         });
         return e.observe(m.current), () => e.disconnect();
@@ -88,36 +88,36 @@ const fe = G(
         ref: n,
         title: I,
         role: "listbox",
-        className: s(X({ className: N })),
-        "data-state": P ? "open" : "closed",
+        className: o(X({ className: N })),
+        "data-state": O ? "open" : "closed",
         children: [
           E ? /* @__PURE__ */ r(
             b,
             {
-              className: s("select-none", l),
+              className: o("select-none", i),
               isClickable: !1,
-              inputRef: i,
+              inputRef: l,
               value: "Loading...",
               label: "Loading...",
               listItemSecondRowClassName: c
             }
-          ) : q ? /* @__PURE__ */ r(
+          ) : z ? /* @__PURE__ */ r(
             b,
             {
               isEmpty: !0,
-              className: s("select-none", l),
+              className: o("select-none", i),
               isClickable: !1,
-              inputRef: i,
-              value: L ?? "",
-              label: L ?? "No options",
+              inputRef: l,
+              value: y ?? "",
+              label: y ?? "No options",
               listItemSecondRowClassName: c
             }
-          ) : _.map((e) => /* @__PURE__ */ r(
+          ) : q.map((e) => /* @__PURE__ */ r(
             b,
             {
-              className: s("select-none", l),
+              className: o("select-none", i),
               isClickable: !0,
-              inputRef: i,
+              inputRef: l,
               listItemSecondRowClassName: c,
               ...e
             },
@@ -137,14 +137,17 @@ const fe = G(
           F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
             Z,
             {
-              className: s(
+              className: o(
                 "flex",
-                "p-2",
+                "min-h-10",
+                "py-2",
+                "px-6",
                 "w-full",
                 "h-full",
                 "gap-1",
                 "items-center",
                 "text-sm",
+                "[&>svg]:-ml-1",
                 "[&>svg]:w-3.5",
                 "[&>svg]:h-3.5",
                 "[&>svg]:shrink-0",
@@ -152,7 +155,9 @@ const fe = G(
                 "select-none",
                 "hover:bg-gray-50",
                 "hover:dark:bg-metal-700",
-                "focus:outline-0"
+                "focus:outline-0",
+                "text-blue-600",
+                "dark:text-aurora-500"
               ),
               children: e
             }

package/dist/components/{Dropdown → Select}/components/List/List.variants.js

@@ -1,5 +1,6 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const t = o([
+import { c as t } from "../../../../index-D29mdTf5.js";
+const o = t([
+  "scrollbar",
   "absolute",
   "bg-white",
   "border",
@@ -11,7 +12,7 @@ const t = o([
   "top-full",
   "w-full",
   "z-10",
-  "max-h-46.25",
+  "max-h-44",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
@@ -21,8 +22,10 @@ const t = o([
   "duration-200",
   "dark:bg-metal-800",
   "dark:border-metal-700",
-  "dark:text-metal-50"
+  "dark:text-metal-50",
+  "[&>li:first-child]:mt-2",
+  "[&>li:last-child]:mb-2"
 ]);
 export {
-  t as listVariants
+  o as listVariants
 };

package/dist/components/{Dropdown → Select}/components/ListItem/ListItem.js

@@ -1,9 +1,9 @@
 import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import { useRef as I, useCallback as u } from "react";
-import { cn as l } from "../../../../utils/index.js";
+import { cn as s } from "../../../../utils/index.js";
 import { Typography as y } from "../../../Typography/Typography.js";
 import { listItemVariants as L } from "./ListItem.variants.js";
-import { useDropdownContext as V } from "../../contexts/dropdown.hook.js";
+import { useSelectContext as V } from "../../contexts/select.hook.js";
 function j(c, r) {
   const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
   return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n(
@@ -23,18 +23,18 @@ const K = ({
   listItemSecondRowClassName: a,
   ...t
 }) => {
-  const { searchTerm: m, highlightSearchEnabled: h, setValue: p, toggleOpen: x } = V(), b = I(null), f = u(
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = V(), b = I(null), f = u(
     (e) => {
-      p(e.value, o), x(!1);
+      x(e.value, o), g(!1);
     },
-    [p, x]
-  ), w = u(
-    (e, s) => {
-      e.key === "Enter" && (e.stopPropagation(), f(s));
+    [x, g]
+  ), N = u(
+    (e, l) => {
+      e.key === "Enter" && (e.stopPropagation(), f(l));
     },
     [f]
-  ), N = u(
-    ({ label: e, rightComponent: s, subLabel: g, rightComponentClassName: C }) => {
+  ), w = u(
+    ({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
       if (c)
         return /* @__PURE__ */ n(
           y,
@@ -53,25 +53,25 @@ const K = ({
           variant: "body2",
           className: "text-zinc-700 dark:text-metal-50 font-medium",
           children: [
-            s ? /* @__PURE__ */ d(
+            l ? /* @__PURE__ */ d(
               "span",
               {
-                className: l("flex gap-2 items-center", C),
+                className: s("flex gap-2 items-center", C),
                 children: [
                   k,
                   " ",
-                  s
+                  l
                 ]
               }
             ) : k,
-            g ? /* @__PURE__ */ n(
+            p ? /* @__PURE__ */ n(
               "span",
               {
-                className: l(
+                className: s(
                   "block font-normal text-sm text-metal-800 dark:text-metal-50",
                   a
                 ),
-                children: g
+                children: p
               }
             ) : null
           ]
@@ -86,17 +86,17 @@ const K = ({
       ref: b,
       role: "option",
       "data-action": "false",
-      className: l(L({ className: i })),
+      className: s(L({ className: i })),
       tabIndex: 0,
       onClick: (e) => {
         r && (f(t), e.stopPropagation());
       },
-      onKeyDown: (e) => w(e, t),
+      onKeyDown: (e) => N(e, t),
       children: [
         t.leftIcon ? /* @__PURE__ */ n(
           "span",
           {
-            className: l(
+            className: s(
               "w-4 h-4 flex justify-center",
               {
                 "items-center": !t.subLabel,
@@ -107,7 +107,7 @@ const K = ({
             children: t.leftIcon
           }
         ) : null,
-        N(t)
+        w(t)
       ]
     }
   );

package/dist/components/{Dropdown → Select}/components/ListItem/ListItem.variants.js

@@ -1,8 +1,8 @@
 import { c as r } from "../../../../index-D29mdTf5.js";
 const t = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,6 +12,7 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
   "dark:hover:bg-metal-700",

package/dist/components/{Dropdown → Select}/components/Wrapper.js

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

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

@@ -0,0 +1,6 @@
+import { useSelectContext as r } from "./select.hook.js";
+import { SelectProvider as x } from "./select.provider.js";
+export {
+  x as SelectProvider,
+  r as useSelectContext
+};

package/dist/components/{Dropdown/contexts/dropdown.context.js → Select/contexts/select.context.js}

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = e({
+const r = e({
   highlightSearchEnabled: !1,
   isOpen: !1,
   searchTerm: "",
@@ -32,5 +32,5 @@ const t = e({
   }
 });
 export {
-  t as DropdownContext
+  r as SelectContext
 };

package/dist/components/Select/contexts/select.hook.js

@@ -0,0 +1,11 @@
+import { useContext as e } from "react";
+import { SelectContext as o } from "./select.context.js";
+const c = () => {
+  const t = e(o);
+  if (!t)
+    throw new Error("useSelectContext must be used within a SelectProvider");
+  return t;
+};
+export {
+  c as useSelectContext
+};