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

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

@@ -23,7 +23,7 @@ const a = e(
     "kubefirst:aria-expanded:border-kubefirst-primary",
     "kubefirst:aria-expanded:text-kubefirst-secondary",
     "dark:border-metal-700",
-    "dark:focus-visible:bg-slate-800",
+    "dark:focus-visible:bg-metal-800",
     "dark:bg-metal-800"
   ],
   {
@@ -38,7 +38,7 @@ const a = e(
         false: ""
       },
       disabled: {
-        true: ["cursor-default", "bg-gray-100", "dark:bg-slate-700/80"],
+        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
         false: []
       }
     },
@@ -52,24 +52,24 @@ const a = e(
   "bg-transparent",
   "border-none",
   "outline-none",
-  "text-zinc-700",
+  "text-metal-700",
   "text-sm",
   "capitalize",
   "placeholder:text-sm",
   "placeholder:normal-case",
   "placeholder:select-none",
-  "dark:placeholder:text-slate-400",
-  "dark:text-slate-50"
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
 ]), d = e([
   "mb-1",
   "cursor-pointer",
   "text-sm",
   "leading-5",
   "tracking-[0.1px]",
-  "dark:text-slate-50"
+  "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,127 +3,127 @@ 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 a } 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 o = 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,
-      canContinueFetching: n,
+      canFilter: P,
+      canContinueFetching: a,
       page: d,
-      options: x,
+      options: w,
       isTyping: k,
       setOptions: T,
-      setPage: D,
-      setCanContinueFetching: U
+      setPage: U,
+      setCanContinueFetching: _
     } = $();
-    K(O, () => o.current, [o]);
-    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: o,
-      wrapperInputRef: j,
-      searchable: y,
+      ulRef: n,
+      wrapperInputRef: S,
+      searchable: x,
       filteredOptions: h
     });
-    const _ = h.filter(
+    const q = h.filter(
       (e, t, s) => t === s.findIndex((v) => v.value === e.value)
-    ), q = h.length === 0, z = M(
+    ), z = h.length === 0, A = M(
       () => B(async (e) => {
         const [t] = e;
-        if (t.isIntersecting && !p && f && n)
+        if (t.isIntersecting && !p && f && a)
           try {
-            w(!0);
-            const s = d + 1, { data: v, hasMore: A } = await f({
+            L(!0);
+            const s = d + 1, { data: v, hasMore: D } = await f({
               page: s,
               pageSize: Y,
               termOfSearch: g
             });
-            D(s), 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 && n && m.current && !k) {
-        const e = new IntersectionObserver(z, {
+      if (u && a && m.current && !k) {
+        const e = new IntersectionObserver(A, {
           threshold: 0.1
         });
         return e.observe(m.current), () => e.disconnect();
       }
     }, [
       u,
-      n,
+      a,
       p,
       k,
       d
     ]), /* @__PURE__ */ V(
       "ul",
       {
-        ref: o,
+        ref: n,
         title: I,
         role: "listbox",
-        className: a(X({ className: N })),
-        "data-state": P ? "open" : "closed",
+        className: o(X({ className: N })),
+        "data-state": O ? "open" : "closed",
         children: [
           E ? /* @__PURE__ */ r(
             b,
             {
-              className: a("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: a("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: a("select-none", l),
+              className: o("select-none", i),
               isClickable: !0,
-              inputRef: i,
+              inputRef: l,
               listItemSecondRowClassName: c,
               ...e
             },
             e.value
           )),
-          u && n && /* @__PURE__ */ r(
+          u && a && /* @__PURE__ */ r(
             "li",
             {
               ref: m,
@@ -134,7 +134,34 @@ const fe = G(
               children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(Z, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
+            Z,
+            {
+              className: o(
+                "flex",
+                "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",
+                "cursor-pointer",
+                "select-none",
+                "hover:bg-gray-50",
+                "hover:dark:bg-metal-700",
+                "focus:outline-0",
+                "text-blue-600",
+                "dark:text-aurora-500"
+              ),
+              children: e
+            }
+          ) }, t))
         ]
       }
     );

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,18 +12,20 @@ const t = o([
   "top-full",
   "w-full",
   "z-10",
-  "max-h-[185px]",
+  "max-h-44",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
   "animate-in",
   "fade-in-50",
   "zoom-in-95",
-  "duration-[200ms]",
-  "dark:bg-slate-800",
-  "dark:border-slate-700",
-  "dark:text-slate-50"
+  "duration-200",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "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,46 +1,46 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
+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";
-function j(c, n) {
-  const i = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
-  return c.split(o).map((a, t) => a.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ s(
+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(
     "mark",
     {
-      className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+      className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
       children: a
     },
     t
-  ) : /* @__PURE__ */ s("span", { children: a }, t));
+  ) : /* @__PURE__ */ n("span", { children: a }, t));
 }
 const K = ({
   isEmpty: c,
-  isClickable: n,
+  isClickable: r,
   className: i,
   inputRef: o,
   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, r) => {
-      e.key === "Enter" && (e.stopPropagation(), f(r));
+    [x, g]
+  ), N = u(
+    (e, l) => {
+      e.key === "Enter" && (e.stopPropagation(), f(l));
     },
     [f]
-  ), N = u(
-    ({ label: e, rightComponent: r, subLabel: g, rightComponentClassName: C }) => {
+  ), w = u(
+    ({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
       if (c)
-        return /* @__PURE__ */ s(
+        return /* @__PURE__ */ n(
           y,
           {
             variant: "body2",
-            className: "text-zinc-800 dark:text-slate-50 italic",
+            className: "text-zinc-800 dark:text-metal-50 italic",
             children: e
           }
         );
@@ -51,27 +51,27 @@ const K = ({
         y,
         {
           variant: "body2",
-          className: "text-zinc-700 dark:text-slate-50 font-medium",
+          className: "text-zinc-700 dark:text-metal-50 font-medium",
           children: [
-            r ? /* @__PURE__ */ d(
+            l ? /* @__PURE__ */ d(
               "span",
               {
-                className: l("flex gap-2 items-center", C),
+                className: s("flex gap-2 items-center", C),
                 children: [
                   k,
                   " ",
-                  r
+                  l
                 ]
               }
             ) : k,
-            g ? /* @__PURE__ */ s(
+            p ? /* @__PURE__ */ n(
               "span",
               {
-                className: l(
-                  "block font-normal text-sm text-slate-800 dark:text-slate-50",
+                className: s(
+                  "block font-normal text-sm text-metal-800 dark:text-metal-50",
                   a
                 ),
-                children: g
+                children: p
               }
             ) : null
           ]
@@ -86,28 +86,28 @@ const K = ({
       ref: b,
       role: "option",
       "data-action": "false",
-      className: l(L({ className: i })),
+      className: s(L({ className: i })),
       tabIndex: 0,
       onClick: (e) => {
-        n && (f(t), e.stopPropagation());
+        r && (f(t), e.stopPropagation());
       },
-      onKeyDown: (e) => w(e, t),
+      onKeyDown: (e) => N(e, t),
       children: [
-        t.leftIcon ? /* @__PURE__ */ s(
+        t.leftIcon ? /* @__PURE__ */ n(
           "span",
           {
-            className: l(
+            className: s(
               "w-4 h-4 flex justify-center",
               {
                 "items-center": !t.subLabel,
-                "items-baseline -translate-y-2": !!t.subLabel
+                "items-baseline -tranmetal-y-2": !!t.subLabel
               },
               t.leftIconClassName
             ),
             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,10 +12,11 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
   t as listItemVariants