@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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

@@ -0,0 +1,64 @@
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { useSelectContext as I } from "../../contexts/select.hook.js";
+import { listItemVariants as L } from "./ListItem.variants.js";
+import { useCallback as d, useRef as V } from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+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));
+}
+var K = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = I(), b = V(null), f = d((e) => {
+    x(e.value, o), g(!1);
+  }, [x, g]), N = d((e, l) => {
+    e.key === "Enter" && (e.stopPropagation(), f(l));
+  }, [f]), w = d(({ 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__ */ u(y, {
+      variant: "body2",
+      className: "text-zinc-700 dark:text-metal-50 font-medium",
+      children: [l ? /* @__PURE__ */ u("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__ */ u("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/{Dropdown → Select}/components/ListItem/ListItem.variants.js

@@ -1,8 +1,8 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const t = r([
+import { t as r } from "../../../../dist-DtEbXv47.js";
+var a = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,11 +12,12 @@ 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
+  a as listItemVariants
 };

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

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

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

@@ -0,0 +1,10 @@
+import { t as o } from "../../../Wrapper-DEJ-hyar.js";
+import { t as i } from "../../../AdditionalOptions-Cx9wU01w.js";
+import { EmptyList as p } from "./EmptyList.js";
+import { List as a } from "./List/List.js";
+export {
+  i as AdditionalOptions,
+  p as EmptyList,
+  a as List,
+  o as Wrapper
+};

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

@@ -0,0 +1,6 @@
+import { DEFAULT_LIST_SIZE as r } from "./pagination.js";
+import { ITEM_HEIGHT_PX as E } from "./list.js";
+export {
+  r as DEFAULT_LIST_SIZE,
+  E as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/list.js

@@ -0,0 +1,4 @@
+var r = 40;
+export {
+  r as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/pagination.js

@@ -0,0 +1,4 @@
+var r = 10;
+export {
+  r as DEFAULT_LIST_SIZE
+};

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

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

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

@@ -0,0 +1,36 @@
+import { createContext as e } from "react";
+var t = e({
+  highlightSearchEnabled: !1,
+  isOpen: !1,
+  searchTerm: "",
+  value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
+  },
+  setValue() {
+    throw new Error("setValue function must be overridden");
+  },
+  toggleOpen() {
+    throw new Error("toggleOpen function must be overridden");
+  }
+});
+export {
+  t as SelectContext
+};

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

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

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

@@ -0,0 +1,48 @@
+import { useToggle as L } from "../../../hooks/useToggle.js";
+import { SelectContext as N } from "./select.context.js";
+import { useCallback as f, useEffect as T, useRef as p, useState as e } from "react";
+import { jsx as O } from "react/jsx-runtime";
+var c = 1, R = 300, V = ({ children: v, value: C, name: i, highlightSearch: E = !1, options: n, onChange: a, onBlur: u }) => {
+  const [S, l] = e(n), d = p(E), [F, g] = L(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = p(void 0), D = f((r, m) => {
+    m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: {
+      value: r,
+      name: i ?? ""
+    } }), u?.(), t.current = setTimeout(() => {
+      h(!1);
+    }, R);
+  }, [
+    a,
+    i,
+    u
+  ]), G = f((r) => {
+    g(r), o(!0), s(c);
+  }, [g]);
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ O(N.Provider, {
+    value: {
+      highlightSearchEnabled: d.current,
+      isOpen: F,
+      searchTerm: P,
+      value: C,
+      canFilter: b,
+      canContinueFetching: A,
+      page: _,
+      options: S,
+      isTyping: y,
+      setOptions: l,
+      setPage: s,
+      setCanContinueFetching: o,
+      setCanFilter: x,
+      setSearchTerm: I,
+      setValue: D,
+      toggleOpen: G
+    },
+    children: v
+  });
+};
+export {
+  V as SelectProvider
+};

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

@@ -0,0 +1,41 @@
+import { useSelectContext as k } from "../contexts/select.hook.js";
+import { useEffect as a, useRef as b } from "react";
+var A = ({ searchable: o, ulRef: n, wrapperInputRef: e, filteredOptions: f }) => {
+  const r = b(0), { isOpen: s } = k();
+  a(() => {
+    const g = n.current?.querySelectorAll("li") ?? [], t = Array.from(g).filter((c) => c.getAttribute("data-action") !== "true"), u = new AbortController(), i = () => {
+      r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
+    };
+    return n.current?.addEventListener("keydown", (c) => {
+      switch (c.preventDefault(), c.key) {
+        case "ArrowDown":
+          i();
+          break;
+        case "Tab":
+          c.shiftKey ? l() : i();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? e.current?.focus() : l();
+          break;
+        case "Enter":
+          t[r.current]?.click();
+          break;
+      }
+    }, { signal: u.signal }), () => {
+      u.abort();
+    };
+  }, [
+    n,
+    r,
+    e,
+    o,
+    f.length
+  ]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
+};
+export {
+  A as useNavigationUlList
+};

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

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

package/dist/components/Sidebar/Sidebar.js

@@ -1,25 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Wrapper as t } from "./components/Wrapper/Wrapper.js";
-import { Footer as a } from "./components/Footer/Footer.js";
-import { Logo as p } from "./components/Logo/Logo.js";
-import { Navigation as m } from "./components/Navigation/Navigation.js";
-import { NavigationGroup as n } from "./components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as e } from "./components/NavigationSeparator/NavigationSeparator.js";
-const o = (r) => /* @__PURE__ */ i(t, { ...r });
+"use client";
+import { Footer as i } from "./components/Footer/Footer.js";
+import { Logo as a } from "./components/Logo/Logo.js";
+import { NavigationGroup as t } from "./components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as p } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as m } from "./components/NavigationSeparator/NavigationSeparator.js";
+import { Navigation as n } from "./components/Navigation/Navigation.js";
+import { Wrapper as e } from "./components/Wrapper/Wrapper.js";
+import { jsx as g } from "react/jsx-runtime";
+var o = (r) => /* @__PURE__ */ g(e, { ...r });
 o.displayName = "KonstructSidebar";
-o.Footer = a;
-o.Logo = p;
-o.Navigation = m;
-o.NavigationGroup = n;
-o.NavigationOption = g;
-o.NavigationSeparator = e;
+o.Footer = i;
+o.Logo = a;
+o.Navigation = n;
+o.NavigationGroup = t;
+o.NavigationOption = p;
+o.NavigationSeparator = m;
 export {
-  a as Footer,
-  p as Logo,
-  m as Navigation,
-  n as NavigationGroup,
-  g as NavigationOption,
-  e as NavigationSeparator,
+  i as Footer,
+  a as Logo,
+  n as Navigation,
+  t as NavigationGroup,
+  p as NavigationOption,
+  m as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/Sidebar.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
   "duration-200",
   "ease-linear",
   "flex",
@@ -10,10 +10,10 @@ const e = r([
   "px-4",
   "relative",
   "transition-all",
-  "w-[72px]",
-  "md:w-[256px]",
+  "w-18",
+  "md:w-64",
   "bg-kubefirst-dark-blue-900"
-]), o = r([
+]), i = r([
   "absolute",
   "top-0",
   "right-0",
@@ -27,6 +27,6 @@ const e = r([
   "bg-slate-200"
 ]);
 export {
-  o as dragVariants,
+  i as dragVariants,
   e as wrapperSiderbarVariants
 };

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -1,8 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as e } from "../../../../utils/index.js";
-import { footerVariants as m } from "./Footer.variants.js";
-const a = ({ className: o, children: r }) => /* @__PURE__ */ t("footer", { className: e(m({ className: o })), children: r });
-a.displayName = "KonstructSidebarFooter";
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { footerVariants as a } from "./Footer.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var m = ({ className: o, children: r }) => /* @__PURE__ */ e("footer", {
+  className: t(a({ className: o })),
+  children: r
+});
+m.displayName = "KonstructSidebarFooter";
 export {
-  a as Footer
+  m as Footer
 };

package/dist/components/Sidebar/components/Footer/Footer.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const e = t([
+import { t } from "../../../../dist-DtEbXv47.js";
+var e = t([
   "p-2",
   "pb-5",
   "text-white",

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,7 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as m } from "../../../../utils/index.js";
-import { logoVariants as t } from "./Logo.variants.js";
-const s = ({ children: o, className: r }) => /* @__PURE__ */ a("header", { className: m(t({ className: r })), children: o });
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { logoVariants as m } from "./Logo.variants.js";
+import { jsx as t } from "react/jsx-runtime";
+var s = ({ children: o, className: r }) => /* @__PURE__ */ t("header", {
+  className: a(m({ className: r })),
+  children: o
+});
 s.displayName = "KonstructSidebarLogo";
 export {
   s as Logo

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,5 +1,5 @@
-import { c as p } from "../../../../index-D29mdTf5.js";
-const o = p([
+import { t as p } from "../../../../dist-DtEbXv47.js";
+var o = p([
   "md:px-4",
   "md:py-5",
   "flex",

package/dist/components/Sidebar/components/Navigation/Navigation.js

@@ -1,19 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../../../../utils/index.js";
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { NavigationTitle as r } from "../NavigationTitle/NavigationTitle.js";
 import { NavigationGroup as n } from "../NavigationGroup/NavigationGroup.js";
 import { NavigationOption as m } from "../NavigationOption/NavigationOption.js";
 import { NavigationSeparator as p } from "../NavigationSeparator/NavigationSeparator.js";
-import { NavigationTitle as v } from "../NavigationTitle/NavigationTitle.js";
-import { navigationVariants as N } from "./Navigation.variants.js";
-const i = ({
-  className: a,
+import { navigationVariants as v } from "./Navigation.variants.js";
+import { jsx as N } from "react/jsx-runtime";
+var a = ({ className: i, children: o }) => /* @__PURE__ */ N("nav", {
+  className: t(v({ className: i })),
   children: o
-}) => /* @__PURE__ */ t("nav", { className: r(N({ className: a })), children: o });
-i.displayName = "KonstructSidebarNavigation";
-i.NavigationGroup = n;
-i.NavigationOption = m;
-i.NavigationSeparator = p;
-i.NavigationTitle = v;
+});
+a.displayName = "KonstructSidebarNavigation";
+a.NavigationGroup = n;
+a.NavigationOption = m;
+a.NavigationSeparator = p;
+a.NavigationTitle = r;
 export {
-  i as Navigation
+  a as Navigation
 };

package/dist/components/Sidebar/components/Navigation/Navigation.variants.js

@@ -1,5 +1,10 @@
-import { c as a } from "../../../../index-D29mdTf5.js";
-const o = a(["flex", "flex-1", "w-full", "flex-col"]);
+import { t as a } from "../../../../dist-DtEbXv47.js";
+var f = a([
+  "flex",
+  "flex-1",
+  "w-full",
+  "flex-col"
+]);
 export {
-  o as navigationVariants
+  f as navigationVariants
 };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js

@@ -1,26 +1,16 @@
-import { jsxs as s, Fragment as e, jsx as a } from "react/jsx-runtime";
-import { cn as u } from "../../../../utils/index.js";
-import { NavigationTitle as l } from "../NavigationTitle/NavigationTitle.js";
-import { navigationGroupsVariants as p } from "./NavigationGroup.variants.js";
-const c = ({
-  children: o,
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { NavigationTitle as e } from "../NavigationTitle/NavigationTitle.js";
+import { navigationGroupsVariants as u } from "./NavigationGroup.variants.js";
+import { Fragment as l, jsx as a, jsxs as p } from "react/jsx-runtime";
+var N = ({ children: i, title: r, className: o, titleClassName: t, isVisible: n = !0, ...m }) => n ? /* @__PURE__ */ p(l, { children: [r ? /* @__PURE__ */ a(e, {
   title: r,
-  className: i,
-  titleClassName: t,
-  isVisible: n = !0,
+  className: t,
   ...m
-}) => n ? /* @__PURE__ */ s(e, { children: [
-  r ? /* @__PURE__ */ a(
-    l,
-    {
-      title: r,
-      className: t,
-      ...m
-    }
-  ) : null,
-  /* @__PURE__ */ a("ul", { className: u(p({ className: i })), children: o })
-] }) : null;
-c.displayName = "KonstructSidebarNavigationGroup";
+}) : null, /* @__PURE__ */ a("ul", {
+  className: s(u({ className: o })),
+  children: i
+})] }) : null;
+N.displayName = "KonstructSidebarNavigationGroup";
 export {
-  c as NavigationGroup
+  N as NavigationGroup
 };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js

@@ -1,5 +1,9 @@
-import { c as a } from "../../../../index-D29mdTf5.js";
-const r = a(["flex", "flex-col", "gap-1"]);
+import { t as a } from "../../../../dist-DtEbXv47.js";
+var r = a([
+  "flex",
+  "flex-col",
+  "gap-1"
+]);
 export {
   r as navigationGroupsVariants
 };

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -1,26 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as p } from "../../../../utils/index.js";
-import { navigationOptionVariants as e } from "./NavigationOption.variants.js";
-const m = ({
-  children: i,
-  className: o,
-  isVisible: t = !0,
-  isActive: r,
-  ...n
-}) => t ? /* @__PURE__ */ a(
-  "li",
-  {
-    ...n,
-    role: "option",
-    className: p(
-      e({
-        className: o,
-        isActive: r
-      })
-    ),
-    children: i
-  }
-) : null;
+import { t as n } from "../../../../utils-DHuiYnx1.js";
+import { navigationOptionVariants as p } from "./NavigationOption.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var m = ({ children: i, className: t, isVisible: o = !0, isActive: r, ...a }) => o ? /* @__PURE__ */ e("li", {
+  ...a,
+  role: "option",
+  className: n(p({
+    className: t,
+    isActive: r
+  })),
+  children: i
+}) : null;
 m.displayName = "KonstructSidebarNavigationOption";
 export {
   m as NavigationOption