@konstructio/ui 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { R as A, A as D, P as v, O as j, C as k, T, D as w, a as P, b as R } from "../../index-BNU3RH-3.js";
+import { R as A, A as D, P as v, O as j, C as k, T, D as w, a as P, b as R } from "../../index-CT6_TaZk.js";
 import { Button as l } from "../Button/Button.js";
 import { cn as t } from "../../utils/index.js";
 import { useAlertDialog as z } from "./hooks/useAlertDialog.js";

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { A as p } from "../../../index-BNU3RH-3.js";
+import { A as p } from "../../../index-CT6_TaZk.js";
 import "../../Button/Button.js";
 import "../../../utils/index.js";
 export {

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-BNU3RH-3.js";
+import { A as g } from "../../../index-CT6_TaZk.js";
 export {
   g as AlertDialogTrigger
 };

package/dist/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import S, { forwardRef as z, useId as V, useCallback as X } from "react";
 import { u as L } from "../../index-B5MIi2tR.js";
 import { c as J, a as Q, b as j } from "../../index-Cq1I1cG9.js";
 import { u as Y, a as Z } from "../../index-Bc1LNrRD.js";
-import { P as ee } from "../../index-Dm-ooN_M.js";
+import { P as ee } from "../../index-j2KyU-zG.js";
 import { P as w } from "../../index-BCGvACM9.js";
 import { cn as T } from "../../utils/index.js";
 import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";

package/dist/components/Command/Command.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { R as s, D as p } from "../../index-DLYwlPRZ.js";
+import { R as s, D as p } from "../../index-aR9z1Fe3.js";
 import { V as l } from "../../index--EmNlyHx.js";
 import { cn as m } from "../../utils/index.js";
 import { wrapperVariants as f } from "./Command.variants.js";

package/dist/components/Command/components/Command.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-Dkt8F6CZ.js";
+import { _ as o } from "../../../index-oBRTQ54R.js";
 const s = p(({ className: r, children: a, ...e }, i) => /* @__PURE__ */ m(o, { ref: i, className: r, ...e, children: /* @__PURE__ */ m("div", { className: "w-[500px]", children: a }) }));
 s.displayName = o.displayName;
 export {

package/dist/components/Command/components/CommandEmpty.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as m } from "../../../index-Dkt8F6CZ.js";
+import { _ as m } from "../../../index-oBRTQ54R.js";
 const r = p((t, e) => /* @__PURE__ */ o(
   m.Empty,
   {

package/dist/components/Command/components/CommandGroup.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-Dkt8F6CZ.js";
+import { _ as o } from "../../../index-oBRTQ54R.js";
 import { cn as a } from "../../../utils/index.js";
 const t = p(({ className: r, ...m }, d) => /* @__PURE__ */ e(
   o.Group,

package/dist/components/Command/components/CommandInput.js

@@ -1,5 +1,5 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { _ as m } from "../../../index-Dkt8F6CZ.js";
+import { _ as m } from "../../../index-oBRTQ54R.js";
 import s, { forwardRef as u } from "react";
 import { cn as f } from "../../../utils/index.js";
 import { searchInconInputVariants as v, inputVariants as g } from "../Command.variants.js";

package/dist/components/Command/components/CommandItem.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as i, useContext as p, useCallback as c } from "react";
-import { _ as r } from "../../../index-Dkt8F6CZ.js";
+import { _ as r } from "../../../index-oBRTQ54R.js";
 import { cn as l } from "../../../utils/index.js";
 import { CommandContext as u } from "../contexts/Command.context.js";
 const f = i(({ className: a, onSelect: e, ...s }, o) => {

package/dist/components/Command/components/CommandList.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { _ as o } from "../../../index-Dkt8F6CZ.js";
+import { _ as o } from "../../../index-oBRTQ54R.js";
 import { cn as t } from "../../../utils/index.js";
 const e = s(({ className: m, ...r }, a) => /* @__PURE__ */ i(
   o.List,

package/dist/components/Command/components/CommandSeparator.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as r } from "../../../index-Dkt8F6CZ.js";
+import { _ as r } from "../../../index-oBRTQ54R.js";
 import { cn as t } from "../../../utils/index.js";
 const s = p(({ className: o, ...a }, m) => /* @__PURE__ */ e(
   r.Separator,

package/dist/components/Command/components/DialogContent.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { a as r, C as o, b as l } from "../../../index-DLYwlPRZ.js";
+import { a as r, C as o, b as l } from "../../../index-aR9z1Fe3.js";
 import { cn as m } from "../../../utils/index.js";
 import { DialogOverlay as p } from "./DialogOverlay.js";
 import { X as c } from "../../../x-BPcqkRZd.js";

package/dist/components/Command/components/DialogOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { O as a } from "../../../index-DLYwlPRZ.js";
+import { O as a } from "../../../index-aR9z1Fe3.js";
 import { cn as i } from "../../../utils/index.js";
 const m = d(({ className: t, ...e }, o) => /* @__PURE__ */ s(
   a,

package/dist/components/Dropdown/Dropdown.js

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

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

@@ -1,27 +1,48 @@
 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([
+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",
+    "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",
+    "civo:aria-expanded:border-civo-primary",
+    "civo:aria-expanded:text-civo-primary"
+  ],
+  {
+    variants: {
+      hasError: {
+        true: [
+          "border-red-600",
+          "text-red-600",
+          "colony:aria-expanded:border-red-600",
+          "colony:aria-expanded:text-red-600",
+          "civo:aria-expanded:border-red-600",
+          "civo:aria-expanded:text-red-600"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasError: !1
+    }
+  }
+), d = e([
   "mb-1",
   "cursor-pointer",
   "text-[14px]",
@@ -29,6 +50,6 @@ const o = e([
   "tracking-[0.1px]"
 ]);
 export {
-  o as dropdownVariants,
-  a as labelVariants
+  a as dropdownVariants,
+  d as labelVariants
 };

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

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

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

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

package/dist/components/Input/Input.js

@@ -139,7 +139,7 @@ const C = v(
           children: [
             n,
             " ",
-            o ? /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" }) : null
+            o && /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
           ]
         }
       ) : null,
@@ -149,7 +149,9 @@ const C = v(
           {
             className: d(
               "absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
-              f && "text-red-600"
+              {
+                "text-red-700": f
+              }
             ),
             children: /* @__PURE__ */ s(I, { className: "w-5 h-5" })
           }
@@ -172,7 +174,7 @@ const C = v(
             ...j
           }
         ),
-        f ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-600 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(W, { className: "w-5 h-5" }) }) : null,
+        f ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-700 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(W, { className: "w-5 h-5" }) }) : null,
         p === "password" && !r ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(
           P,
           {
@@ -181,7 +183,7 @@ const C = v(
           }
         ) }) : null
       ] }),
-      r ? /* @__PURE__ */ s("span", { className: "text-xs text-red-600", children: r }) : null,
+      r ? /* @__PURE__ */ s("span", { className: "text-xs text-red-700", children: r }) : null,
       !r && w ? /* @__PURE__ */ s("span", { className: "text-xs text-slate-600", children: w }) : null
     ] });
   }

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { R as n } from "../../index-CvfCCTEO.js";
+import { R as n } from "../../index-DdbImHmO.js";
 import { cn as s } from "../../utils/index.js";
 import { rootVariants as p } from "./Tabs.variants.js";
 import { List as f } from "./components/List.js";

package/dist/components/Tabs/components/Content.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { C as m } from "../../../index-CvfCCTEO.js";
+import { C as m } from "../../../index-DdbImHmO.js";
 import { cn as a } from "../../../utils/index.js";
 import { contentVariants as e } from "../Tabs.variants.js";
 const c = ({

package/dist/components/Tabs/components/List.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { L as n } from "../../../index-CvfCCTEO.js";
+import { L as n } from "../../../index-DdbImHmO.js";
 import { cn as t } from "../../../utils/index.js";
 import { listVariants as a } from "../Tabs.variants.js";
 const p = ({

package/dist/components/Tabs/components/Trigger.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { T as e } from "../../../index-CvfCCTEO.js";
+import { T as e } from "../../../index-DdbImHmO.js";
 import { Typography as m } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
 import { triggerVariants as p } from "../Tabs.variants.js";