@konstructio/ui 0.1.0-alpha.8 → 0.1.1-alpha.1

package/dist/components/Datepicker/DatePicker.variants.js

@@ -1,4 +1,4 @@
-import { c as t } from "../../index-BNmRGtA6.js";
+import { c as t } from "../../index-D29mdTf5.js";
 const r = t("w-fit py-4 px-6");
 export {
   r as datePickerVariants

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

@@ -1,4 +1,4 @@
-import { c as a } from "../../index-BNmRGtA6.js";
+import { c as a } from "../../index-D29mdTf5.js";
 const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
   variants: {
     variant: {

package/dist/components/Dropdown/Dropdown.js

@@ -1,8 +1,30 @@
-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 }) }));
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { DropdownProvider as n } from "./contexts/dropdown.provider.js";
+import { Wrapper as c } from "./components/Wrapper.js";
+const v = p(({ onChange: r, onBlur: l, value: a, error: s, helperText: e, name: o, ...i }, d) => /* @__PURE__ */ t(
+  n,
+  {
+    onChange: r,
+    onBlur: l,
+    value: a,
+    name: o,
+    children: /* @__PURE__ */ m("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ t(
+        c,
+        {
+          name: o,
+          error: s,
+          ref: d,
+          onBlur: l,
+          ...i
+        }
+      ),
+      s ? /* @__PURE__ */ t("span", { className: "text-xs text-red-700", children: s }) : null,
+      !s && e ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: e }) : null
+    ] })
+  }
+));
 export {
-  x as Dropdown
+  v as Dropdown
 };

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

@@ -1,27 +1,44 @@
-import { c as e } from "../../index-BNmRGtA6.js";
-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([
+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",
+    "aria-expanded:border-kubefirst-primary",
+    "aria-expanded:text-kubefirst-secondary",
+    "focus-visible:bg-zinc-50",
+    "civo:aria-expanded:border-civo-primary",
+    "civo:aria-expanded:text-civo-primary"
+  ],
+  {
+    variants: {
+      hasError: {
+        true: [
+          "border-red-600",
+          "text-red-600",
+          "civo:aria-expanded:border-red-600",
+          "civo:aria-expanded:text-red-600"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasError: !1
+    }
+  }
+), i = r([
   "mb-1",
   "cursor-pointer",
   "text-[14px]",
@@ -29,6 +46,6 @@ const o = e([
   "tracking-[0.1px]"
 ]);
 export {
-  o as dropdownVariants,
-  a as labelVariants
+  a as dropdownVariants,
+  i as labelVariants
 };

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

@@ -1,4 +1,4 @@
-import { c as o } from "../../../../index-BNmRGtA6.js";
+import { c as o } from "../../../../index-D29mdTf5.js";
 const a = o([
   "absolute",
   "bg-white",

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

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-BNmRGtA6.js";
-const l = o([
+import { c as o } from "../../../../index-D29mdTf5.js";
+const i = o([
   "cursor-pointer",
   "py-2",
   "px-2",
@@ -12,9 +12,9 @@ const l = o([
   "gap-3",
   "hover:bg-slate-50",
   "focus:bg-slate-50",
-  "colony:focus:bg-red-100",
-  "colony:hover:bg-red-100"
+  "civo:focus:bg-civo-primary/5",
+  "civo:hover:bg-civo-primary/5"
 ]);
 export {
-  l as listItemVariants
+  i as listItemVariants
 };

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

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

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

@@ -1,29 +1,29 @@
 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 v } from "../../../hooks/useToggle.js";
-const D = ({ children: t, onChange: r, value: o, name: e }) => {
-  const [s, m] = v(!1), [l, p] = u(""), a = d(
+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 == null || r({ target: { value: c, name: e ?? "" } });
+      r?.({ target: { value: c, name: e ?? "" } }), o?.();
     },
-    [r, e]
+    [r, e, o]
   );
   return /* @__PURE__ */ i(
     f.Provider,
     {
       value: {
-        value: o,
-        isOpen: s,
-        setValue: a,
-        toggleOpen: m,
-        searchTerm: l,
-        setSearchTerm: p
+        value: s,
+        isOpen: a,
+        searchTerm: n,
+        setSearchTerm: p,
+        setValue: l,
+        toggleOpen: m
       },
       children: t
     }
   );
 };
 export {
-  D as DropdownProvider
+  w as DropdownProvider
 };

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

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

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

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