@konstructio/ui 0.1.2-alpha.1 → 0.1.2-alpha.101

package/dist/components/Dropdown/Dropdown.variants.js

@@ -1,51 +0,0 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r(
-  [
-    "border",
-    "cursor-pointer",
-    "ease-in-out",
-    "flex",
-    "items-center",
-    "justify-between",
-    "px-3",
-    "py-1",
-    "relative",
-    "rounded-md",
-    "transition-all",
-    "w-full",
-    "outline-none",
-    "h-9",
-    "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"
-  ],
-  {
-    variants: {
-      hasError: {
-        true: [
-          "aria-expanded:border-red-600",
-          "aria-expanded:text-red-600",
-          "kubefirst:border-red-600",
-          "kubefirst:text-red-600"
-        ],
-        false: ""
-      }
-    },
-    defaultVariants: {
-      hasError: !1
-    }
-  }
-), t = r([
-  "mb-1",
-  "cursor-pointer",
-  "text-[14px]",
-  "leading-[20px]",
-  "tracking-[0.1px]"
-]);
-export {
-  a as dropdownVariants,
-  t as labelVariants
-};

package/dist/components/Dropdown/components/EmptyList.js

@@ -1,5 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-const i = () => /* @__PURE__ */ t("div", { children: "EmptyList" });
-export {
-  i as EmptyList
-};

package/dist/components/Dropdown/components/List/List.js

@@ -1,64 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as v, useRef as w, useImperativeHandle as N } from "react";
-import { cn as h } from "../../../../utils/index.js";
-import { useNavigationUlList as x } from "../../hooks/useNavigationList.js";
-import { ListItem as s } from "../ListItem/ListItem.js";
-import { listVariants as C } from "./List.variants.js";
-import { useDropdownContext as k } from "../../contexts/dropdown.hook.js";
-const T = v(
-  ({
-    className: i,
-    isLoading: n,
-    itemClassName: o,
-    name: c,
-    options: r,
-    searchable: m = !1,
-    wrapperInputRef: f,
-    wrapperRef: p
-  }, u) => {
-    const l = w(null), { isOpen: b, searchTerm: d } = k();
-    N(u, () => l.current, [l]), x({ ulRef: l, wrapperRef: p, wrapperInputRef: f });
-    const a = m ? r.filter((e) => {
-      const g = d.toLowerCase();
-      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(g);
-    }) : r, L = a.length === 0;
-    return /* @__PURE__ */ t(
-      "ul",
-      {
-        ref: l,
-        title: c,
-        role: "listbox",
-        className: h(C({ className: i })),
-        "data-state": b ? "open" : "closed",
-        children: n ? /* @__PURE__ */ t(
-          s,
-          {
-            className: o,
-            isClickable: !1,
-            value: "Loading...",
-            label: "Loading..."
-          }
-        ) : L ? /* @__PURE__ */ t(
-          s,
-          {
-            className: o,
-            isClickable: !1,
-            value: "No options",
-            label: "No options"
-          }
-        ) : a.map((e) => /* @__PURE__ */ t(
-          s,
-          {
-            className: o,
-            isClickable: !0,
-            ...e
-          },
-          e.value
-        ))
-      }
-    );
-  }
-);
-export {
-  T as List
-};

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

@@ -1,26 +0,0 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const a = o([
-  "absolute",
-  "bg-white",
-  "border",
-  "duration-100",
-  "ease-in-out",
-  "flex-col",
-  "mt-1",
-  "overflow-hidden",
-  "rounded-md",
-  "shadow-2xs",
-  "top-full",
-  "transition-all",
-  "w-full",
-  "z-10",
-  "max-h-[185px]",
-  "overflow-y-auto",
-  "border-gray-200",
-  "text-zinc-700",
-  "data-[state=open]:block",
-  "data-[state=closed]:hidden"
-]);
-export {
-  a as listVariants
-};

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,43 +0,0 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { useRef as u, useCallback as s } from "react";
-import { Typography as d } from "../../../Typography/Typography.js";
-import { cn as h } from "../../../../utils/index.js";
-import { listItemVariants as x } from "./ListItem.variants.js";
-import { useDropdownContext as y } from "../../contexts/dropdown.hook.js";
-const j = ({
-  isClickable: a,
-  className: i,
-  ...t
-}) => {
-  const { setValue: l, toggleOpen: n } = y(), c = u(null), o = s(
-    (e) => {
-      l(e.value), n(!1);
-    },
-    [l, n]
-  ), m = s(
-    (e, f) => {
-      e.key === "Enter" && (e.stopPropagation(), o(f));
-    },
-    [o]
-  );
-  return /* @__PURE__ */ p(
-    "li",
-    {
-      ref: c,
-      role: "option",
-      className: h(x({ className: i })),
-      tabIndex: 0,
-      onClick: (e) => {
-        a && (o(t), e.stopPropagation());
-      },
-      onKeyDown: (e) => m(e, t),
-      children: [
-        t.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: t.leftIcon }) : null,
-        /* @__PURE__ */ r(d, { variant: "body2", className: "text-zinc-700", children: t.label })
-      ]
-    }
-  );
-};
-export {
-  j as ListItem
-};

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

@@ -1,20 +0,0 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const i = o([
-  "cursor-pointer",
-  "py-2",
-  "px-2",
-  "h-full",
-  "focus-visible:outline-none",
-  "m-0",
-  "w-full",
-  "flex",
-  "items-center",
-  "gap-3",
-  "hover:bg-slate-50",
-  "focus:bg-slate-50",
-  "civo:focus:bg-civo-primary/5",
-  "civo:hover:bg-civo-primary/5"
-]);
-export {
-  i as listItemVariants
-};

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,170 +0,0 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as W, useId as q, useRef as T, useImperativeHandle as G, useMemo as J, useEffect as N } from "react";
-import { Loading as K } from "../../Loading/Loading.js";
-import { Typography as Q } from "../../Typography/Typography.js";
-import { cn as s } from "../../../utils/index.js";
-import { labelVariants as X, dropdownVariants as Y } from "../Dropdown.variants.js";
-import { useDropdown as Z } from "../hooks/useDropdown.js";
-import { List as _ } from "./List/List.js";
-import { C as B } from "../../../chevron-up-RLP4nX7V.js";
-import { useDropdownContext as ee } from "../contexts/dropdown.hook.js";
-const fe = W(
-  ({
-    className: j,
-    defaultValue: p,
-    error: f,
-    iconClassName: k,
-    isLoading: C,
-    label: x,
-    labelClassName: V,
-    listClassName: D,
-    listItemClassName: F,
-    name: u,
-    options: a,
-    placeholder: h,
-    isRequired: g,
-    searchable: y = !1,
-    theme: M,
-    wrapperClassName: $,
-    onBlur: I
-  }, A) => {
-    const L = q(), n = T(null), O = T(null), { wrapperRef: c, wrapperInputRef: R, handleOpen: z, handleOpenIfClosed: H } = Z({ ulRef: O }), { isOpen: v, searchTerm: P, value: r, toggleOpen: E, setValue: b, setSearchTerm: w } = ee(), i = u ? `${L}-${u}` : L;
-    G(A, () => n.current, [n]);
-    const l = J(() => a.find(({ value: e }) => e === r), [a, r]);
-    N(() => {
-      n.current && (n.current.value = r ? l?.value : "");
-    }, [l, r]), N(() => {
-      if (p && !r) {
-        const e = a && a.find((o) => o.value === p);
-        e && b(e.value);
-      }
-    }, [p, a, b, r]), N(() => {
-      const e = new AbortController();
-      return c.current?.addEventListener("focusout", (o) => {
-        const d = o.relatedTarget;
-        (!d || !c.current?.contains(d)) && (E(!1), w(""), n.current?.value || I?.());
-      }), () => {
-        e.abort();
-      };
-    }, [E, c, w, I, r]);
-    const S = (e) => {
-      const o = e.target.value;
-      w(o);
-      const d = a.find(
-        (U) => U.value.toLocaleLowerCase() === o.toLocaleLowerCase()
-      );
-      d && b(d.value);
-    };
-    return /* @__PURE__ */ m(
-      "div",
-      {
-        ref: c,
-        className: s("flex flex-col w-full relative", $),
-        "data-theme": M,
-        children: [
-          x ? /* @__PURE__ */ m(
-            "label",
-            {
-              id: i,
-              className: s(X({ className: V })),
-              htmlFor: i,
-              onClick: H,
-              children: [
-                x,
-                g ? /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" }) : null
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ m(
-            "div",
-            {
-              ref: R,
-              id: i,
-              className: s(Y({ className: j, hasError: !!f })),
-              role: "combobox",
-              onClick: z,
-              "aria-expanded": v,
-              tabIndex: 0,
-              "aria-labelledby": i,
-              children: [
-                /* @__PURE__ */ m("div", { className: "flex gap-3 items-center flex-1", children: [
-                  l?.leftIcon && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: l.leftIcon }),
-                  y ? /* @__PURE__ */ t(
-                    "input",
-                    {
-                      type: "text",
-                      value: v ? P : l?.label || "",
-                      onChange: S,
-                      placeholder: h,
-                      className: s(
-                        "flex-1 bg-transparent border-none outline-none text-zinc-700 text-base",
-                        {
-                          "text-red-700 placeholder:text-red-700": !!f
-                        }
-                      ),
-                      onClick: (e) => {
-                        e.stopPropagation(), z();
-                      },
-                      "aria-label": x || h,
-                      "aria-labelledby": i
-                    }
-                  ) : /* @__PURE__ */ t(
-                    Q,
-                    {
-                      variant: "body2",
-                      className: s("flex-1 text-zinc-700 text-base", {
-                        "text-red-700": !!f
-                      }),
-                      children: l?.label || h
-                    }
-                  )
-                ] }),
-                C ? /* @__PURE__ */ t(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ t(
-                  B,
-                  {
-                    "data-state": v ? "open" : "closed",
-                    className: s(
-                      "w-4 h-4 text-zinc-500 transition-all duration-50 data-[state=open]:rotate-0 data-[state=closed]:rotate-180",
-                      k,
-                      {
-                        "text-red-700": !!f
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              ref: n,
-              type: "text",
-              name: u,
-              className: "hidden",
-              "aria-hidden": "true",
-              required: g
-            }
-          ),
-          /* @__PURE__ */ t(
-            _,
-            {
-              ref: O,
-              className: D,
-              itemClassName: F,
-              name: u,
-              wrapperRef: c,
-              wrapperInputRef: R,
-              options: a,
-              isLoading: !!C,
-              searchable: y
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  fe as Wrapper
-};

package/dist/components/Dropdown/components/index.js

@@ -1,8 +0,0 @@
-import { EmptyList as p } from "./EmptyList.js";
-import { List as e } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper.js";
-export {
-  p as EmptyList,
-  e as List,
-  f as Wrapper
-};

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,18 +0,0 @@
-import { createContext as e } from "react";
-const o = e({
-  isOpen: !1,
-  toggleOpen() {
-    throw new Error("toggleOpen function must be overridden");
-  },
-  value: void 0,
-  setValue() {
-    throw new Error("setValue function must be overridden");
-  },
-  searchTerm: "",
-  setSearchTerm() {
-    throw new Error("setSearchTerm function must be overridden");
-  }
-});
-export {
-  o as DropdownContext
-};

package/dist/components/Dropdown/contexts/dropdown.hook.js

@@ -1,13 +0,0 @@
-import { useContext as t } from "react";
-import { DropdownContext as r } from "./dropdown.context.js";
-const p = () => {
-  const o = t(r);
-  if (!o)
-    throw new Error(
-      "useDropdownContext must be used within a DropdownProvider"
-    );
-  return o;
-};
-export {
-  p as useDropdownContext
-};

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,29 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as u, useCallback as d } from "react";
-import { DropdownContext as f } from "./dropdown.context.js";
-import { useToggle as g } from "../../../hooks/useToggle.js";
-const w = ({ children: t, value: s, name: e, onChange: r, onBlur: o }) => {
-  const [a, m] = g(!1), [n, p] = u(""), l = d(
-    (c) => {
-      r?.({ target: { value: c, name: e ?? "" } }), o?.();
-    },
-    [r, e, o]
-  );
-  return /* @__PURE__ */ i(
-    f.Provider,
-    {
-      value: {
-        value: s,
-        isOpen: a,
-        searchTerm: n,
-        setSearchTerm: p,
-        setValue: l,
-        toggleOpen: m
-      },
-      children: t
-    }
-  );
-};
-export {
-  w as DropdownProvider
-};

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

@@ -1,6 +0,0 @@
-import { useDropdownContext as e } from "./dropdown.hook.js";
-import { DropdownProvider as t } from "./dropdown.provider.js";
-export {
-  t as DropdownProvider,
-  e as useDropdownContext
-};

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,59 +0,0 @@
-import { useRef as c, useEffect as d, useCallback as u } from "react";
-import { useDropdownContext as g } from "../contexts/dropdown.hook.js";
-const b = ({ ulRef: a }) => {
-  const o = c(null), t = c(null), { isOpen: i, toggleOpen: e } = g();
-  d(() => {
-    const n = new AbortController(), s = (l) => {
-      l.key === "Escape" && e(!1);
-    }, r = (l) => {
-      o.current?.contains(l.target) || e(!1);
-    };
-    return document.addEventListener("keydown", s, {
-      signal: n.signal
-    }), document.addEventListener("mousedown", r, {
-      signal: n.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && e(!1);
-      },
-      {
-        signal: n.signal
-      }
-    ), t.current?.addEventListener(
-      "focus",
-      () => {
-        e(!0);
-      },
-      { signal: n.signal }
-    ), () => {
-      n.abort();
-    };
-  }, [e, o]), d(() => {
-    const n = new AbortController();
-    return t.current?.addEventListener(
-      "keydown",
-      (s) => {
-        if (s.key === "ArrowDown") {
-          const r = a.current?.querySelector("li");
-          r && r.focus();
-        }
-      },
-      { signal: n.signal }
-    ), () => {
-      n.abort();
-    };
-  }, [t, a]);
-  const f = u(() => e(!0), [e]), p = u(() => {
-    i || e(!1);
-  }, [i, e]);
-  return {
-    wrapperRef: o,
-    wrapperInputRef: t,
-    handleOpen: f,
-    handleOpenIfClosed: p
-  };
-};
-export {
-  b as useDropdown
-};

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

@@ -1,58 +0,0 @@
-import { useRef as b, useEffect as u } from "react";
-import { useDropdownContext as f } from "../contexts/dropdown.hook.js";
-const d = ({
-  ulRef: t,
-  wrapperRef: i,
-  wrapperInputRef: o
-}) => {
-  const r = b(0), { isOpen: l } = f();
-  u(() => {
-    const e = t.current?.querySelectorAll("li") ?? [], c = new AbortController(), n = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, a = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, o.current?.focus());
-    };
-    return t.current?.addEventListener(
-      "keydown",
-      (s) => {
-        switch (s.preventDefault(), s.key) {
-          case "ArrowDown": {
-            n();
-            break;
-          }
-          case "Tab": {
-            s.shiftKey ? a() : n();
-            break;
-          }
-          case "ArrowUp": {
-            r.current === 0 ? o.current?.focus() : a();
-            break;
-          }
-          case "Enter": {
-            e[r.current].querySelector("button")?.click();
-            break;
-          }
-        }
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
-    };
-  }, [t, r, o]), u(() => {
-    const e = new AbortController();
-    return i.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
-    };
-  }, [t, i]), u(() => {
-    l || (r.current = 0);
-  }, [l]);
-};
-export {
-  d as useNavigationUlList
-};