@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/Select/Select.variants.js

@@ -1,20 +1,73 @@
 import { c as e } from "../../index-D29mdTf5.js";
-const a = e(["group", "border", "cursor-pointer", "ease-in-out", "flex", "items-center", "justify-between", "px-3", "py-1", "relative", "rounded", "transition-all", "w-full", "outline-none", "h-10", "border-gray-200", "focus-visible:bg-zinc-50", "aria-expanded:border-aurora-500", "aria-expanded:text-aurora-500", "kubefirst:aria-expanded:border-kubefirst-primary", "kubefirst:aria-expanded:text-kubefirst-secondary", "dark:border-metal-700", "dark:focus-visible:bg-metal-800", "dark:bg-metal-800"], {
-  variants: {
-    hasError: {
-      true: ["aria-expanded:border-red-600", "aria-expanded:text-red-600", "kubefirst:border-red-600", "kubefirst:text-red-600", "dark:border-red-500"],
-      false: ""
+const a = e(
+  [
+    "group",
+    "border",
+    "cursor-pointer",
+    "ease-in-out",
+    "flex",
+    "items-center",
+    "justify-between",
+    "px-3",
+    "py-1",
+    "relative",
+    "rounded",
+    "transition-all",
+    "w-full",
+    "outline-none",
+    "h-10",
+    "border-gray-200",
+    "focus-visible:bg-zinc-50",
+    "aria-expanded:border-aurora-500",
+    "aria-expanded:text-aurora-500",
+    "kubefirst:aria-expanded:border-kubefirst-primary",
+    "kubefirst:aria-expanded:text-kubefirst-secondary",
+    "dark:border-metal-700",
+    "dark:focus-visible:bg-metal-800",
+    "dark:bg-metal-800"
+  ],
+  {
+    variants: {
+      hasError: {
+        true: [
+          "aria-expanded:border-red-600",
+          "aria-expanded:text-red-600",
+          "kubefirst:border-red-600",
+          "kubefirst:text-red-600",
+          "dark:border-red-500"
+        ],
+        false: ""
+      },
+      disabled: {
+        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
+        false: []
+      }
     },
-    disabled: {
-      true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
-      false: []
+    defaultVariants: {
+      hasError: !1,
+      disabled: !1
     }
-  },
-  defaultVariants: {
-    hasError: !1,
-    disabled: !1
   }
-}), t = e(["flex-1", "bg-transparent", "border-none", "outline-none", "text-metal-700", "text-sm", "capitalize", "placeholder:text-sm", "placeholder:normal-case", "placeholder:select-none", "dark:placeholder:text-metal-400", "dark:text-metal-50"]), d = e(["cursor-pointer", "text-sm", "leading-5", "tracking-[0.1px]", "dark:text-metal-50"]);
+), t = e([
+  "flex-1",
+  "bg-transparent",
+  "border-none",
+  "outline-none",
+  "text-metal-700",
+  "text-sm",
+  "capitalize",
+  "placeholder:text-sm",
+  "placeholder:normal-case",
+  "placeholder:select-none",
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
+]), d = e([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-metal-50"
+]);
 export {
   t as inputVariants,
   d as labelVariants,

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -1,12 +1,11 @@
 import "react/jsx-runtime";
-import "../../../../compiler-runtime-DA41awpA.js";
 import "../../../../index-BvoZGpli.js";
 import "react";
 import "../../../../utils/index.js";
-import { A } from "../../../../AdditionalOptions-DiXvUzhu.js";
+import { A as s } from "../../../../AdditionalOptions-C2FDVZhu.js";
 import "../List/List.variants.js";
 import "./AdditionalOptions.variants.js";
 import "../../contexts/select.hook.js";
 export {
-  A as AdditionalOptions
+  s as AdditionalOptions
 };

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.variants.js

@@ -1,5 +1,26 @@
 import { cn as e } from "../../../../utils/index.js";
-const o = e("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");
+const o = e(
+  "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"
+);
 export {
   o as additionalOptionSlotClassName
 };

package/dist/components/Select/components/EmptyList.js

@@ -1,10 +1,5 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as r } from "../../../compiler-runtime-DA41awpA.js";
-const c = () => {
-  const e = r.c(1);
-  let t;
-  return e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ o("div", { children: "EmptyList" }), e[0] = t) : t = e[0], t;
-};
+import { jsx as t } from "react/jsx-runtime";
+const i = () => /* @__PURE__ */ t("div", { children: "EmptyList" });
 export {
-  c as EmptyList
+  i as EmptyList
 };

package/dist/components/Select/components/List/List.js

@@ -4,102 +4,181 @@ import { forwardRef as W, useRef as I, useState as Y, useImperativeHandle as $,
 import { Loading as te } from "../../../Loading/Loading.js";
 import { cn as s } from "../../../../utils/index.js";
 import { useNavigationUlList as re } from "../../hooks/useNavigationList.js";
-import { A as oe, i as ne } from "../../../../AdditionalOptions-DiXvUzhu.js";
+import { A as oe, i as ne } from "../../../../AdditionalOptions-C2FDVZhu.js";
 import { ListItem as g } from "../ListItem/ListItem.js";
 import { listGroupLabelVariants as se, listVariants as ie } from "./List.variants.js";
 import { DEFAULT_LIST_SIZE as ae } from "../../constants/pagination.js";
 import { ITEM_HEIGHT_PX as le } from "../../constants/list.js";
 import { useSelectContext as ce } from "../../contexts/select.hook.js";
-const xe = W(({
-  additionalOptions: O,
-  className: P,
-  groupedOptions: l,
-  inputRef: c,
-  isLoading: j,
-  itemClassName: u,
-  name: A,
-  searchable: f = !1,
-  listItemSecondRowClassName: p,
-  wrapperInputRef: M,
-  isInfiniteScrollEnabled: h,
-  noOptionsText: F,
-  onFetchMoreOptions: L,
-  visibleItems: E
-}, S) => {
-  const m = I(null), b = I(null), [v, k] = Y(!1), {
-    canContinueFetching: d,
-    canFilter: y,
-    isOpen: U,
-    isTyping: G,
-    options: T,
-    page: w,
-    searchTerm: n,
-    setCanContinueFetching: V,
-    setOptions: _,
-    setPage: q
-  } = ce(), z = E !== void 0 ? {
-    maxHeight: E * le
-  } : void 0;
-  $(S, () => m.current, [m]);
-  const i = l.length > 0 && ne(l[0]), x = f && y ? T.filter((e) => {
-    const t = n.toLowerCase();
-    return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-  }) : T, C = N(() => {
-    if (!i)
-      return [];
-    const e = l;
-    if (!f || !y || !n)
-      return e;
-    const t = n.toLowerCase();
-    return e.map((r) => ({
-      ...r,
-      options: r.options.filter((a) => a.label.toLowerCase().includes(t))
-    })).filter((r) => r.options.length > 0);
-  }, [i, l, f, y, n]), D = i ? C.flatMap((e) => e.options) : x;
-  re({
-    ulRef: m,
-    wrapperInputRef: M,
-    searchable: f,
-    filteredOptions: D
-  });
-  const X = x.filter((e, t, r) => t === r.findIndex((a) => a.value === e.value)), Z = i ? C.length === 0 : x.length === 0, B = N(() => Q(async (e) => {
-    const [t] = e;
-    if (t.isIntersecting && !v && L && d)
-      try {
-        k(!0);
-        const r = w + 1, {
-          data: a,
-          hasMore: J
-        } = await L({
-          page: r,
-          pageSize: ae,
-          termOfSearch: n
+const xe = W(
+  ({
+    additionalOptions: O,
+    className: P,
+    groupedOptions: l,
+    inputRef: c,
+    isLoading: _,
+    itemClassName: u,
+    name: j,
+    searchable: f = !1,
+    listItemSecondRowClassName: p,
+    wrapperInputRef: A,
+    isInfiniteScrollEnabled: h,
+    noOptionsText: F,
+    onFetchMoreOptions: L,
+    visibleItems: E
+  }, M) => {
+    const m = I(null), b = I(null), [v, k] = Y(!1), {
+      canContinueFetching: d,
+      canFilter: y,
+      isOpen: S,
+      isTyping: G,
+      options: T,
+      page: w,
+      searchTerm: n,
+      setCanContinueFetching: U,
+      setOptions: V,
+      setPage: q
+    } = ce(), z = E !== void 0 ? { maxHeight: E * le } : void 0;
+    $(M, () => m.current, [m]);
+    const i = l.length > 0 && ne(l[0]), x = f && y ? T.filter((e) => {
+      const t = n.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+    }) : T, C = N(() => {
+      if (!i)
+        return [];
+      const e = l;
+      if (!f || !y || !n)
+        return e;
+      const t = n.toLowerCase();
+      return e.map((r) => ({
+        ...r,
+        options: r.options.filter(
+          (a) => a.label.toLowerCase().includes(t)
+        )
+      })).filter((r) => r.options.length > 0);
+    }, [i, l, f, y, n]), D = i ? C.flatMap((e) => e.options) : x;
+    re({
+      ulRef: m,
+      wrapperInputRef: A,
+      searchable: f,
+      filteredOptions: D
+    });
+    const X = x.filter(
+      (e, t, r) => t === r.findIndex((a) => a.value === e.value)
+    ), Z = i ? C.length === 0 : x.length === 0, B = N(
+      () => Q(async (e) => {
+        const [t] = e;
+        if (t.isIntersecting && !v && L && d)
+          try {
+            k(!0);
+            const r = w + 1, { data: a, hasMore: J } = await L({
+              page: r,
+              pageSize: ae,
+              termOfSearch: n
+            });
+            q(r), U(J), V((K) => [...K, ...a]);
+          } catch {
+            console.error("Error fetching more options");
+          } finally {
+            k(!1);
+          }
+      }, 100),
+      [v, L, n, w]
+    );
+    return R(() => {
+      if (h && d && b.current && !G) {
+        const e = new IntersectionObserver(B, {
+          threshold: 0.1
         });
-        q(r), V(J), _((K) => [...K, ...a]);
-      } catch {
-        console.error("Error fetching more options");
-      } finally {
-        k(!1);
+        return e.observe(b.current), () => e.disconnect();
       }
-  }, 100), [v, L, n, w]);
-  return R(() => {
-    if (h && d && b.current && !G) {
-      const e = new IntersectionObserver(B, {
-        threshold: 0.1
-      });
-      return e.observe(b.current), () => e.disconnect();
-    }
-  }, [h, d, v, G, w]), /* @__PURE__ */ H("ul", { ref: m, title: A, role: "listbox", className: s(ie({
-    className: P
-  })), style: z, "data-state": U ? "open" : "closed", children: [
-    j ? /* @__PURE__ */ o(g, { className: s("select-none", u), isClickable: !1, inputRef: c, value: "Loading...", label: "Loading...", listItemSecondRowClassName: p }) : Z ? /* @__PURE__ */ o(g, { isEmpty: !0, className: s("select-none", u), isClickable: !1, inputRef: c, value: F ?? "", label: F ?? "No options", listItemSecondRowClassName: p }) : i ? C.map((e) => /* @__PURE__ */ H(ee, { children: [
-      /* @__PURE__ */ o("li", { role: "presentation", "aria-hidden": "true", "data-action": "true", className: s(se()), children: e.groupLabel }),
-      e.options.map((t) => /* @__PURE__ */ o(g, { className: s("select-none", u), isClickable: !0, inputRef: c, listItemSecondRowClassName: p, ...t }, t.value))
-    ] }, e.groupLabel)) : X.map((e) => /* @__PURE__ */ o(g, { className: s("select-none", u), isClickable: !0, inputRef: c, listItemSecondRowClassName: p, ...e }, e.value)),
-    h && d && /* @__PURE__ */ o("li", { ref: b, role: "option", "data-action": "true", className: "flex items-center justify-center py-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ o(te, { className: "w-4 h-4 text-aurora-500 select-none" }) }),
-    /* @__PURE__ */ o(oe, { additionalOptions: O })
-  ] });
-});
+    }, [
+      h,
+      d,
+      v,
+      G,
+      w
+    ]), /* @__PURE__ */ H(
+      "ul",
+      {
+        ref: m,
+        title: j,
+        role: "listbox",
+        className: s(ie({ className: P })),
+        style: z,
+        "data-state": S ? "open" : "closed",
+        children: [
+          _ ? /* @__PURE__ */ o(
+            g,
+            {
+              className: s("select-none", u),
+              isClickable: !1,
+              inputRef: c,
+              value: "Loading...",
+              label: "Loading...",
+              listItemSecondRowClassName: p
+            }
+          ) : Z ? /* @__PURE__ */ o(
+            g,
+            {
+              isEmpty: !0,
+              className: s("select-none", u),
+              isClickable: !1,
+              inputRef: c,
+              value: F ?? "",
+              label: F ?? "No options",
+              listItemSecondRowClassName: p
+            }
+          ) : i ? C.map((e) => /* @__PURE__ */ H(ee, { children: [
+            /* @__PURE__ */ o(
+              "li",
+              {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-action": "true",
+                className: s(se()),
+                children: e.groupLabel
+              }
+            ),
+            e.options.map((t) => /* @__PURE__ */ o(
+              g,
+              {
+                className: s("select-none", u),
+                isClickable: !0,
+                inputRef: c,
+                listItemSecondRowClassName: p,
+                ...t
+              },
+              t.value
+            ))
+          ] }, e.groupLabel)) : X.map((e) => /* @__PURE__ */ o(
+            g,
+            {
+              className: s("select-none", u),
+              isClickable: !0,
+              inputRef: c,
+              listItemSecondRowClassName: p,
+              ...e
+            },
+            e.value
+          )),
+          h && d && /* @__PURE__ */ o(
+            "li",
+            {
+              ref: b,
+              role: "option",
+              "data-action": "true",
+              className: "flex items-center justify-center py-3",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ o(te, { className: "w-4 h-4 text-aurora-500 select-none" })
+            }
+          ),
+          /* @__PURE__ */ o(oe, { additionalOptions: O })
+        ]
+      }
+    );
+  }
+);
 export {
   xe as List
 };

package/dist/components/Select/components/List/List.variants.js

@@ -1,5 +1,45 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const r = t(["flex", "items-center", "h-8", "px-6", "py-1.5", "text-[11px]", "font-medium", "uppercase", "tracking-[0.25px]", "text-metal-50", "pointer-events-none", "select-none", "cursor-default"]), a = t(["scrollbar", "absolute", "bg-white", "border", "flex-col", "mt-1", "overflow-hidden", "rounded", "shadow-2xs", "top-full", "w-full", "z-10", "max-h-44", "overflow-y-auto", "border-gray-200", "text-zinc-700", "animate-in", "fade-in-50", "zoom-in-95", "duration-200", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-metal-50", "[&>li:first-child]:mt-2", "[&>li:last-child]:mb-2"]);
+const r = t([
+  "flex",
+  "items-center",
+  "h-8",
+  "px-6",
+  "py-1.5",
+  "text-[11px]",
+  "font-medium",
+  "uppercase",
+  "tracking-[0.25px]",
+  "text-metal-50",
+  "pointer-events-none",
+  "select-none",
+  "cursor-default"
+]), a = t([
+  "scrollbar",
+  "absolute",
+  "bg-white",
+  "border",
+  "flex-col",
+  "mt-1",
+  "overflow-hidden",
+  "rounded",
+  "shadow-2xs",
+  "top-full",
+  "w-full",
+  "z-10",
+  "max-h-44",
+  "overflow-y-auto",
+  "border-gray-200",
+  "text-zinc-700",
+  "animate-in",
+  "fade-in-50",
+  "zoom-in-95",
+  "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 {
   r as listGroupLabelVariants,
   a as listVariants

package/dist/components/Select/components/ListItem/ListItem.js

@@ -6,7 +6,14 @@ import { listItemVariants as L } from "./ListItem.variants.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("mark", { className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50", children: a }, t) : /* @__PURE__ */ n("span", { children: a }, t));
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n(
+    "mark",
+    {
+      className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
+      children: a
+    },
+    t
+  ) : /* @__PURE__ */ n("span", { children: a }, t));
 }
 const K = ({
   isEmpty: c,
@@ -16,46 +23,94 @@ const K = ({
   listItemSecondRowClassName: a,
   ...t
 }) => {
-  const {
-    searchTerm: m,
-    highlightSearchEnabled: h,
-    setValue: x,
-    toggleOpen: g
-  } = V(), b = I(null), f = u((e) => {
-    x(e.value, o), g(!1);
-  }, [x, g]), N = u((e, l) => {
-    e.key === "Enter" && (e.stopPropagation(), f(l));
-  }, [f]), w = u(({
-    label: e,
-    rightComponent: l,
-    subLabel: p,
-    rightComponentClassName: C
-  }) => {
-    if (c)
-      return /* @__PURE__ */ n(y, { variant: "body2", className: "text-zinc-800 dark:text-metal-50 italic", children: e });
-    if (typeof e != "string")
-      return e;
-    const k = h && m.length > 0 ? j(e, m) : [e];
-    return /* @__PURE__ */ d(y, { variant: "body2", className: "text-zinc-700 dark:text-metal-50 font-medium", children: [
-      l ? /* @__PURE__ */ d("span", { className: s("flex gap-2 items-center", C), children: [
-        k,
-        " ",
-        l
-      ] }) : k,
-      p ? /* @__PURE__ */ n("span", { className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a), children: p }) : null
-    ] });
-  }, [h, m]);
-  return /* @__PURE__ */ d("li", { ref: b, role: "option", "data-action": "false", className: s(L({
-    className: i
-  })), tabIndex: 0, onClick: (e) => {
-    r && (f(t), e.stopPropagation());
-  }, onKeyDown: (e) => N(e, t), children: [
-    t.leftIcon ? /* @__PURE__ */ n("span", { className: s("w-4 h-4 flex justify-center", {
-      "items-center": !t.subLabel,
-      "items-baseline -tranmetal-y-2": !!t.subLabel
-    }, t.leftIconClassName), children: t.leftIcon }) : null,
-    w(t)
-  ] });
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = V(), b = I(null), f = u(
+    (e) => {
+      x(e.value, o), g(!1);
+    },
+    [x, g]
+  ), N = u(
+    (e, l) => {
+      e.key === "Enter" && (e.stopPropagation(), f(l));
+    },
+    [f]
+  ), w = u(
+    ({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
+      if (c)
+        return /* @__PURE__ */ n(
+          y,
+          {
+            variant: "body2",
+            className: "text-zinc-800 dark:text-metal-50 italic",
+            children: e
+          }
+        );
+      if (typeof e != "string")
+        return e;
+      const k = h && m.length > 0 ? j(e, m) : [e];
+      return /* @__PURE__ */ d(
+        y,
+        {
+          variant: "body2",
+          className: "text-zinc-700 dark:text-metal-50 font-medium",
+          children: [
+            l ? /* @__PURE__ */ d(
+              "span",
+              {
+                className: s("flex gap-2 items-center", C),
+                children: [
+                  k,
+                  " ",
+                  l
+                ]
+              }
+            ) : k,
+            p ? /* @__PURE__ */ n(
+              "span",
+              {
+                className: s(
+                  "block font-normal text-sm text-metal-800 dark:text-metal-50",
+                  a
+                ),
+                children: p
+              }
+            ) : null
+          ]
+        }
+      );
+    },
+    [h, m]
+  );
+  return /* @__PURE__ */ d(
+    "li",
+    {
+      ref: b,
+      role: "option",
+      "data-action": "false",
+      className: s(L({ className: i })),
+      tabIndex: 0,
+      onClick: (e) => {
+        r && (f(t), e.stopPropagation());
+      },
+      onKeyDown: (e) => N(e, t),
+      children: [
+        t.leftIcon ? /* @__PURE__ */ n(
+          "span",
+          {
+            className: s(
+              "w-4 h-4 flex justify-center",
+              {
+                "items-center": !t.subLabel,
+                "items-baseline -tranmetal-y-2": !!t.subLabel
+              },
+              t.leftIconClassName
+            ),
+            children: t.leftIcon
+          }
+        ) : null,
+        w(t)
+      ]
+    }
+  );
 };
 export {
   K as ListItem

package/dist/components/Select/components/ListItem/ListItem.variants.js

@@ -1,5 +1,23 @@
 import { c as r } from "../../../../index-D29mdTf5.js";
-const t = r(["cursor-pointer", "py-1.5", "px-6", "h-full", "focus-visible:outline-none", "m-0", "w-full", "flex", "items-center", "gap-3", "transition-bg", "duration-250", "min-h-10", "hover:bg-gray-50", "focus:bg-gray-50", "dark:hover:bg-metal-700", "dark:focus:bg-metal-700"]);
+const t = r([
+  "cursor-pointer",
+  "py-1.5",
+  "px-6",
+  "h-full",
+  "focus-visible:outline-none",
+  "m-0",
+  "w-full",
+  "flex",
+  "items-center",
+  "gap-3",
+  "transition-bg",
+  "duration-250",
+  "min-h-10",
+  "hover:bg-gray-50",
+  "focus:bg-gray-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
+]);
 export {
   t as listItemVariants
 };