@konstructio/ui 0.0.12-alpha.9 → 0.0.13-alpha.1

package/dist/components/Divider/Divider.js

@@ -1,9 +1,10 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
+import { cn as o } from "../../utils/index.js";
 import { dividerVariants as a } from "./Divider.variants.js";
 const d = ({
   className: i,
   ...r
-}) => /* @__PURE__ */ e("div", { className: a({ className: i }), ...r });
+}) => /* @__PURE__ */ m("div", { className: o(a({ className: i })), ...r });
 d.displayName = "Divider";
 export {
   d as Divider

package/dist/components/Divider/Divider.variants.js

@@ -1,14 +1,17 @@
 import { c as a } from "../../index-BNmRGtA6.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
-  variants: {
-    variant: {
-      default: ""
+const t = a(
+  ["h-[1px]", "bg-zinc-200", "w-full", "border-gray-200"],
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 export {
-  i as dividerVariants
+  t as dividerVariants
 };

package/dist/components/Dropdown/Dropdown.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { DropdownProvider as i } from "./contexts/dropdown.provider.js";
-import { Wrapper as t } from "./components/Wrapper.js";
-const a = f(({ onChange: o, ...p }, m) => /* @__PURE__ */ r(i, { onChange: o, children: /* @__PURE__ */ r(t, { ref: m, ...p }) }));
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { DropdownProvider as d } from "./contexts/dropdown.provider.js";
+import { Wrapper as e } from "./components/Wrapper.js";
+const x = t(({ onChange: p, value: m, name: r, ...f }, i) => /* @__PURE__ */ o(d, { onChange: p, value: m, name: r, children: /* @__PURE__ */ o(e, { name: r, ref: i, ...f }) }));
 export {
-  a as Dropdown
+  x as Dropdown
 };

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

@@ -1,41 +1,34 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(
-  [
-    "border",
-    "cursor-pointer",
-    "ease-in-out",
-    "flex",
-    "items-center",
-    "justify-between",
-    "px-3",
-    "py-1",
-    "relative",
-    "rounded-md",
-    "transition-all",
-    "w-full",
-    "outline-none"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: [
-          "aria-expanded:border-kubefirst-primary",
-          "aria-expanded:text-kubefirst-secondary",
-          "focus-visible:bg-purple-100"
-        ],
-        colony: [
-          "aria-expanded:border-red-400",
-          "aria-expanded:text-red-400",
-          "focus-visible:bg-red-100"
-        ],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+const o = e([
+  "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",
+  "aria-expanded:border-kubefirst-primary",
+  "aria-expanded:text-kubefirst-secondary",
+  "focus-visible:bg-zinc-50",
+  "colony:aria-expanded:border-red-400",
+  "colony:aria-expanded:text-red-400",
+  "colony:focus-visible:bg-red-100"
+]), a = e([
+  "mb-1",
+  "cursor-pointer",
+  "text-[14px]",
+  "leading-[20px]",
+  "tracking-[0.1px]"
+]);
 export {
-  a as dropdownVariants
+  o as dropdownVariants,
+  a as labelVariants
 };

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

@@ -1,25 +1,27 @@
-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 { jsx as o } from "react/jsx-runtime";
+import { forwardRef as u, useRef as c, useImperativeHandle as d } from "react";
+import { cn as b } from "../../../../utils/index.js";
+import { useNavigationUlList as v } from "../../hooks/useNavigationList.js";
+import { ListItem as t } from "../ListItem/ListItem.js";
+import { listVariants as x } 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(
+const I = u(
+  ({ isLoading: r, options: i, wrapperRef: s, wrapperInputRef: a, name: m }, n) => {
+    const e = c(null), { isOpen: f } = L();
+    d(n, () => e.current, [e]), v({ ulRef: e, wrapperRef: s, wrapperInputRef: a });
+    const p = i.length === 0;
+    return /* @__PURE__ */ o(
       "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: b(x(), f ? "flex" : "hidden"),
+        children: r ? /* @__PURE__ */ o(t, { isClickable: !1, value: "Loading...", label: "Loading..." }) : p ? /* @__PURE__ */ o(t, { isClickable: !1, value: "No options", label: "No options" }) : i.map((l) => /* @__PURE__ */ o(t, { isClickable: !0, ...l }, l.value))
       }
     );
   }
 );
 export {
-  j as List
+  I as List
 };

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

@@ -1,34 +1,24 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const o = t(
-  [
-    "absolute",
-    "bg-white",
-    "border",
-    "duration-100",
-    "ease-in-out",
-    "flex-col",
-    "mt-1",
-    "overflow-hidden",
-    "rounded-md",
-    "shadow-sm",
-    "top-full",
-    "transition-all",
-    "w-full",
-    "z-10"
-  ],
-  {
-    variants: {
-      theme: {
-        colony: ["border-red-400"],
-        kubefirst: [""],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const r = 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"
+]);
 export {
-  o as listVariants
+  r as listVariants
 };

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

@@ -1,36 +1,37 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useRef as u, useCallback as r } from "react";
-import { cn as d } from "../../../../utils/index.js";
-import { listItemVariants as p } from "./ListItem.variants.js";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useRef as p, useCallback as s } from "react";
+import { cn as u } from "../../../../utils/index.js";
+import { listItemVariants as d } from "./ListItem.variants.js";
+import { Typography as h } from "../../../Typography/Typography.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);
+const g = ({ isClickable: a, ...e }) => {
+  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
+    (t) => {
+      n(t.value), r(!1);
     },
-    [n, s]
-  ), a = r(
-    (l, m) => {
-      l.key === "Enter" && t(m);
+    [n, r]
+  ), i = s(
+    (t, m) => {
+      t.key === "Enter" && l(m);
     },
-    [t]
+    [l]
   );
   return /* @__PURE__ */ f(
     "li",
     {
       ref: c,
       role: "option",
-      className: d(p({ theme: o })),
+      className: u(d()),
       tabIndex: 0,
-      onClick: () => t(e),
-      onKeyDown: (l) => a(l, e),
+      onClick: () => a && l(e),
+      onKeyDown: (t) => i(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(h, { variant: "body2", className: "text-zinc-700", children: e.label })
       ]
     }
   );
 };
 export {
-  C as ListItem
+  g as ListItem
 };

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

@@ -1,32 +1,20 @@
-import { c as e } from "../../../../index-BNmRGtA6.js";
-const o = e(
-  [
-    "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"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: [""],
-        colony: ["focus:bg-red-100", "hover:bg-red-100"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const l = 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",
+  "colony:focus:bg-red-100",
+  "colony:hover:bg-red-100"
+]);
 export {
-  o as listItemVariants
+  l as listItemVariants
 };

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

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