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

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

@@ -1,73 +1,20 @@
 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: ""
-      },
-      disabled: {
-        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
-        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: ""
     },
-    defaultVariants: {
-      hasError: !1,
-      disabled: !1
+    disabled: {
+      true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
+      false: []
     }
+  },
+  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,11 +1,12 @@
 import "react/jsx-runtime";
+import "../../../../compiler-runtime-DA41awpA.js";
 import "../../../../index-BvoZGpli.js";
 import "react";
 import "../../../../utils/index.js";
-import { A as s } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import { A } from "../../../../AdditionalOptions-DiXvUzhu.js";
 import "../List/List.variants.js";
 import "./AdditionalOptions.variants.js";
 import "../../contexts/select.hook.js";
 export {
-  s as AdditionalOptions
+  A as AdditionalOptions
 };

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

@@ -1,26 +1,5 @@
 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,5 +1,10 @@
-import { jsx as t } from "react/jsx-runtime";
-const i = () => /* @__PURE__ */ t("div", { children: "EmptyList" });
+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;
+};
 export {
-  i as EmptyList
+  c as EmptyList
 };

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

@@ -4,181 +4,102 @@ 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-C2FDVZhu.js";
+import { A as oe, i as ne } from "../../../../AdditionalOptions-DiXvUzhu.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: _,
-    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
+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
         });
-        return e.observe(b.current), () => e.disconnect();
+        q(r), V(J), _((K) => [...K, ...a]);
+      } catch {
+        console.error("Error fetching more options");
+      } finally {
+        k(!1);
       }
-    }, [
-      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 })
-        ]
-      }
-    );
-  }
-);
+  }, 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 })
+  ] });
+});
 export {
   xe as List
 };

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

@@ -1,45 +1,5 @@
 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,14 +6,7 @@ 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,
@@ -23,94 +16,46 @@ 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,23 +1,5 @@
 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
 };