@konstructio/ui 0.0.12-alpha.2 → 0.0.12-alpha.21

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

@@ -1,25 +1,51 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as a, useRef as p, useImperativeHandle as u } from "react";
-import { cn as c } from "../../../../utils/index.js";
-import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
-import { ListItem as x } from "../ListItem/ListItem.js";
-import { listVariants as v } from "./List.variants.js";
-import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
-const j = a(
-  ({ options: i, theme: t, wrapperRef: m, wrapperInputRef: s, name: l }, n) => {
-    const r = p(null), { isOpen: f } = L();
-    return u(n, () => r.current, [r]), d({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c, useRef as d, useImperativeHandle as b } from "react";
+import { cn as v } from "../../../../utils/index.js";
+import { useNavigationUlList as x } from "../../hooks/useNavigationList.js";
+import { ListItem as l } from "../ListItem/ListItem.js";
+import { listVariants as L } from "./List.variants.js";
+import { useDropdownContext as g } from "../../contexts/dropdown.hook.js";
+const y = c(
+  ({ isLoading: s, options: r, theme: o, wrapperRef: a, wrapperInputRef: n, name: m }, f) => {
+    const e = d(null), { isOpen: p } = g();
+    b(f, () => e.current, [e]), x({ ulRef: e, wrapperRef: a, wrapperInputRef: n });
+    const u = r.length === 0;
+    return /* @__PURE__ */ i(
       "ul",
       {
-        ref: r,
-        title: l,
+        ref: e,
+        title: m,
         role: "listbox",
-        className: c(v({ theme: t }), f ? "flex" : "hidden"),
-        children: i.map((o) => /* @__PURE__ */ e(x, { theme: t, ...o }, o.value))
+        className: v(L({ theme: o }), p ? "flex" : "hidden"),
+        children: s ? /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !1,
+            value: "Loading...",
+            label: "Loading..."
+          }
+        ) : u ? /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !1,
+            value: "No options",
+            label: "No options"
+          }
+        ) : r.map((t) => /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !0,
+            ...t
+          },
+          t.value
+        ))
       }
     );
   }
 );
 export {
-  j as List
+  y as List
 };

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

@@ -1,5 +1,5 @@
-import { c as r } from "../../../../index-BNmRGtA6.js";
-const t = r(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const e = t(
   [
     "absolute",
     "bg-white",
@@ -14,13 +14,15 @@ const t = r(
     "top-full",
     "transition-all",
     "w-full",
-    "z-10"
+    "z-10",
+    "max-h-[185px]",
+    "overflow-y-auto"
   ],
   {
     variants: {
       theme: {
         colony: ["border-red-400"],
-        kubefirst: ["border-kubefirst-primary"],
+        kubefirst: ["text-zinc-700"],
         civo: ""
       }
     },
@@ -30,5 +32,5 @@ const t = r(
   }
 );
 export {
-  t as listVariants
+  e as listVariants
 };

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

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

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

@@ -1,5 +1,5 @@
 import { c as e } from "../../../../index-BNmRGtA6.js";
-const t = e(
+const o = e(
   [
     "cursor-pointer",
     "py-2",
@@ -10,12 +10,14 @@ const t = e(
     "w-full",
     "flex",
     "items-center",
-    "gap-3"
+    "gap-3",
+    "hover:bg-slate-50",
+    "focus:bg-slate-50"
   ],
   {
     variants: {
       theme: {
-        kubefirst: ["focus:bg-purple-100", "hover:bg-purple-100"],
+        kubefirst: [""],
         colony: ["focus:bg-red-100", "hover:bg-red-100"],
         civo: ""
       }
@@ -26,5 +28,5 @@ const t = e(
   }
 );
 export {
-  t as listItemVariants
+  o as listItemVariants
 };

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

@@ -1,69 +1,101 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as F, useId as L, useRef as N, useImperativeHandle as $, useEffect as m } from "react";
-import { cn as R } from "../../../utils/index.js";
-import { dropdownVariants as A } from "../Dropdown.variants.js";
-import { useDropdown as H } from "../hooks/useDropdown.js";
-import { List as U } from "./List/List.js";
-import { C as W } from "../../../chevron-up-DgLBQCKD.js";
-import { useDropdownContext as q } from "../contexts/dropdown.hook.js";
-import { useTheme as z } from "../../../contexts/theme.hook.js";
-const X = F(
-  ({ theme: g, label: p, placeholder: O, name: o, options: a, defaultValue: c }, j) => {
-    const d = L(), r = N(null), u = N(null), { wrapperRef: n, wrapperInputRef: h, handleOpen: y, handleOpenIfClosed: E } = H({ ulRef: u }), { isOpen: x, value: e, setValue: w, toggleOpen: b } = q(), { theme: T } = z(), v = g ?? T, s = o ? `${d}-${o}` : d;
-    $(j, () => r.current, [r]), m(() => {
-      r.current && (r.current.value = e ? e.value : "");
-    }, [e]), m(() => {
-      if (c) {
-        const l = a.find(
-          (i) => i.value === c
-        );
-        l && w(l);
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as H, useId as M, useRef as O, useImperativeHandle as U, useMemo as W, useEffect as p } from "react";
+import { cn as u } from "../../../utils/index.js";
+import { labelVariants as B, dropdownVariants as G } from "../Dropdown.variants.js";
+import { useDropdown as J } from "../hooks/useDropdown.js";
+import { List as K } from "./List/List.js";
+import { Typography as z } from "../../Typography/Typography.js";
+import { Loading as P } from "../../Loading/Loading.js";
+import { C as Q } from "../../../chevron-up-DgLBQCKD.js";
+import { useDropdownContext as S } from "../contexts/dropdown.hook.js";
+import { useTheme as X } from "../../../contexts/theme.hook.js";
+const ae = H(
+  ({
+    theme: T,
+    label: h,
+    labelClassName: j,
+    placeholder: E,
+    name: l,
+    options: n,
+    required: x,
+    defaultValue: f,
+    isLoading: v
+  }, L) => {
+    const b = M(), s = O(null), w = O(null), { wrapperRef: a, wrapperInputRef: N, handleOpen: k, handleOpenIfClosed: D } = J({ ulRef: w }), { isOpen: g, toggleOpen: C, value: r, setValue: I } = S(), { theme: F } = X(), d = T ?? F, c = l ? `${b}-${l}` : b;
+    U(L, () => s.current, [s]);
+    const e = W(() => n.find(({ value: o }) => o === r), [n, r]);
+    p(() => {
+      s.current && (s.current.value = r ? e == null ? void 0 : e.value : "");
+    }, [e, r]), p(() => {
+      if (f && !r) {
+        const o = n && n.find((i) => i.value === f);
+        o && I(o.value);
       }
-    }, [c, a, w]), m(() => {
+    }, [f, n, I, r]), p(() => {
       var i;
-      const l = new AbortController();
-      return (i = n.current) == null || i.addEventListener("focusout", (D) => {
-        var I;
-        const C = D.relatedTarget;
-        (!C || !((I = n.current) != null && I.contains(C))) && b(!1);
+      const o = new AbortController();
+      return (i = a.current) == null || i.addEventListener("focusout", (A) => {
+        var R;
+        const y = A.relatedTarget;
+        (!y || !((R = a.current) != null && R.contains(y))) && C(!1);
       }), () => {
-        l.abort();
+        o.abort();
       };
-    }, [b, n]);
-    const k = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ f("div", { ref: n, className: "flex flex-col w-full relative", children: [
-      p ? /* @__PURE__ */ t(
+    }, [C, a]);
+    const $ = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
+    return /* @__PURE__ */ m("div", { ref: a, className: "flex flex-col w-full relative", children: [
+      h ? /* @__PURE__ */ m(
         "label",
         {
-          id: s,
-          className: "m-2 cursor-pointer",
-          htmlFor: s,
-          onClick: E,
-          children: p
+          id: c,
+          className: u(
+            B({ theme: d }),
+            j
+          ),
+          htmlFor: c,
+          onClick: D,
+          children: [
+            h,
+            x ? /* @__PURE__ */ t("span", { className: "text-red-500 ml-1", children: "*" }) : null
+          ]
         }
       ) : null,
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ m(
         "div",
         {
-          ref: h,
-          id: s,
-          className: R(A({ theme: v })),
+          ref: N,
+          id: c,
+          className: u(G({ theme: d })),
           role: "combobox",
-          onClick: y,
-          "aria-expanded": x,
+          onClick: k,
+          "aria-expanded": g,
           tabIndex: 0,
-          "aria-labelledby": s,
+          "aria-labelledby": c,
           children: [
-            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ f("span", { className: "flex gap-3 items-center", children: [
-              k(),
-              e.label
-            ] }) : O }),
-            /* @__PURE__ */ t(
-              W,
+            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: r ? /* @__PURE__ */ m(
+              z,
+              {
+                variant: "body2",
+                className: "flex gap-3 items-center text-zinc-700",
+                children: [
+                  $(),
+                  e == null ? void 0 : e.label
+                ]
+              }
+            ) : /* @__PURE__ */ t(
+              z,
+              {
+                variant: "body2",
+                className: "flex gap-3 items-center text-zinc-700",
+                children: E
+              }
+            ) }),
+            v ? /* @__PURE__ */ t(P, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ t(
+              Q,
               {
-                className: R(
-                  "w-4 h-4 text-inherit transition-all duration-50",
-                  x ? "rotate-0" : "rotate-180"
+                className: u(
+                  "w-4 h-4 text-zinc-500 transition-all duration-50",
+                  g ? "rotate-0" : "rotate-180"
                 )
               }
             )
@@ -73,27 +105,29 @@ const X = F(
       /* @__PURE__ */ t(
         "input",
         {
-          ref: r,
+          ref: s,
           type: "text",
-          name: o,
+          name: l,
           className: "hidden",
-          "aria-hidden": "true"
+          "aria-hidden": "true",
+          required: x
         }
       ),
       /* @__PURE__ */ t(
-        U,
+        K,
         {
-          ref: u,
-          name: o,
-          wrapperRef: n,
-          wrapperInputRef: h,
-          options: a,
-          theme: v
+          ref: w,
+          name: l,
+          wrapperRef: a,
+          wrapperInputRef: N,
+          options: n,
+          isLoading: !!v,
+          theme: d
         }
       )
     ] });
   }
 );
 export {
-  X as Wrapper
+  ae as Wrapper
 };

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

@@ -1,10 +1,10 @@
 import { createContext as e } from "react";
 const t = e({
-  value: null,
   isOpen: !1,
   toggleOpen() {
     throw new Error("toggleOpen function must be overridden");
   },
+  value: void 0,
   setValue() {
     throw new Error("setValue function must be overridden");
   }

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

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