@konstructio/ui 0.1.2-alpha.27 → 0.1.2-alpha.29

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

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

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

@@ -1,91 +1,97 @@
 import { jsxs as H, jsx as o } from "react/jsx-runtime";
 import { S as V } from "../../../../index-BtQfgaSF.js";
 import { d as Z } from "../../../../debounce-BFejQm9P.js";
-import { forwardRef as B, useRef as w, useState as G, useImperativeHandle as J, useMemo as K, useEffect as M } from "react";
+import { forwardRef as B, useRef as k, useState as G, useImperativeHandle as J, useMemo as K, useEffect as M } from "react";
 import { Loading as Q } from "../../../Loading/Loading.js";
 import { cn as a } from "../../../../utils/index.js";
 import { useNavigationUlList as R } from "../../hooks/useNavigationList.js";
-import { ListItem as v } from "../ListItem/ListItem.js";
+import { ListItem as b } from "../ListItem/ListItem.js";
 import { listVariants as W } from "./List.variants.js";
 import { DEFAULT_LIST_SIZE as X } from "../../constants/pagination.js";
 import { useDropdownContext as Y } from "../../contexts/dropdown.hook.js";
 const ue = B(
   ({
-    additionalOptions: k,
-    className: C,
+    additionalOptions: C,
+    className: F,
     inputRef: i,
-    isLoading: F,
+    isLoading: N,
     itemClassName: l,
-    name: N,
-    searchable: b = !1,
+    name: I,
+    searchable: L = !1,
     listItemSecondRowClassName: c,
-    wrapperInputRef: I,
+    wrapperInputRef: O,
     isInfiniteScrollEnabled: u,
     onFetchMoreOptions: f
-  }, O) => {
-    const s = w(null), m = w(null), [p, L] = G(!1), {
-      isOpen: T,
+  }, T) => {
+    const s = k(null), m = k(null), [p, x] = G(!1), {
+      isOpen: j,
       searchTerm: g,
-      canFilter: j,
+      canFilter: E,
       canContinueFetching: n,
-      page: E,
-      options: x,
-      isTyping: y,
+      page: d,
+      options: y,
+      isTyping: w,
       setOptions: P,
       setPage: S,
       setCanContinueFetching: D
     } = Y();
-    J(O, () => s.current, [s]);
-    const d = b && j ? x.filter((e) => {
+    J(T, () => s.current, [s]);
+    const h = L && E ? y.filter((e) => {
       const t = g.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : x;
+    }) : y;
     R({
       ulRef: s,
-      wrapperInputRef: I,
-      searchable: b,
-      filteredOptions: d
+      wrapperInputRef: O,
+      searchable: L,
+      filteredOptions: h
     });
-    const U = d.filter(
-      (e, t, r) => t === r.findIndex((h) => h.value === e.value)
-    ), _ = d.length === 0, q = K(
+    const U = h.filter(
+      (e, t, r) => t === r.findIndex((v) => v.value === e.value)
+    ), _ = h.length === 0, q = K(
       () => Z(async (e) => {
         const [t] = e;
         if (t.isIntersecting && !p && f && n)
           try {
-            L(!0);
-            const r = E + 1, { data: h, hasMore: z } = await f({
+            x(!0);
+            const r = d + 1, { data: v, hasMore: z } = await f({
               page: r,
               pageSize: X,
               termOfSearch: g
             });
-            S(r), D(z), P((A) => [...A, ...h]);
+            S(r), D(z), P((A) => [...A, ...v]);
           } catch {
             console.error("Error fetching more options");
           } finally {
-            L(!1);
+            x(!1);
           }
       }, 100),
-      [p, f, g]
+      [p, f, g, d]
     );
     return M(() => {
-      if (u && n && m.current && !y) {
+      if (u && n && m.current && !w) {
         const e = new IntersectionObserver(q, {
           threshold: 0.1
         });
         return e.observe(m.current), () => e.disconnect();
       }
-    }, [u, n, p, y]), /* @__PURE__ */ H(
+    }, [
+      u,
+      n,
+      p,
+      w,
+      d
+    ]), /* @__PURE__ */ H(
       "ul",
       {
         ref: s,
-        title: N,
+        title: I,
         role: "listbox",
-        className: a(W({ className: C })),
-        "data-state": T ? "open" : "closed",
+        className: a(W({ className: F })),
+        "data-state": j ? "open" : "closed",
         children: [
-          F ? /* @__PURE__ */ o(
-            v,
+          N ? /* @__PURE__ */ o(
+            b,
             {
               className: a("select-none", l),
               isClickable: !1,
@@ -95,7 +101,7 @@ const ue = B(
               listItemSecondRowClassName: c
             }
           ) : _ ? /* @__PURE__ */ o(
-            v,
+            b,
             {
               className: a("select-none", l),
               isClickable: !1,
@@ -105,7 +111,7 @@ const ue = B(
               listItemSecondRowClassName: c
             }
           ) : U.map((e) => /* @__PURE__ */ o(
-            v,
+            b,
             {
               className: a("select-none", l),
               isClickable: !0,
@@ -126,7 +132,7 @@ const ue = B(
               children: /* @__PURE__ */ o(Q, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          k?.map((e, t) => /* @__PURE__ */ o("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ o(V, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+          C?.map((e, t) => /* @__PURE__ */ o("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ o(V, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
         ]
       }
     );

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

@@ -1,132 +1,133 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import { forwardRef as Y, useId as Z, useRef as C, useMemo as ee, useImperativeHandle as te, useEffect as ae } from "react";
 import { Loading as re } from "../../Loading/Loading.js";
 import { Typography as ne } from "../../Typography/Typography.js";
 import { cn as s } from "../../../utils/index.js";
 import { labelVariants as oe, inputVariants as se, dropdownVariants as le } from "../Dropdown.variants.js";
-import { useDropdown as ce } from "../hooks/useDropdown.js";
-import { List as ie } from "./List/List.js";
-import { c as V } from "../../../createLucideIcon-D4r5Phnh.js";
-import { useDropdownContext as pe } from "../contexts/dropdown.hook.js";
-const ue = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], de = V("chevron-up", ue);
-const fe = [
+import { useDropdown as ie } from "../hooks/useDropdown.js";
+import { List as ce } from "./List/List.js";
+import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
+import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
+import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
+const me = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], me = V("search", fe), ze = Y(
+], de = pe("search", me), je = Y(
   ({
-    additionalOptions: R,
-    className: _,
+    additionalOptions: V,
+    className: O,
     defaultValue: x,
     disabled: a = !1,
-    error: u,
-    iconClassName: F,
-    inputClassName: O,
-    isLoading: y,
+    error: f,
+    iconClassName: R,
+    inputClassName: F,
+    isLoading: k,
     isRequired: h,
     label: v,
     labelClassName: T,
-    listClassName: $,
-    listItemClassName: D,
-    listItemSecondRowClassName: E,
-    name: d,
+    listClassName: D,
+    listItemClassName: E,
+    listItemSecondRowClassName: M,
+    name: m,
     placeholder: N,
     searchable: g = !1,
     showSearchIcon: w,
-    theme: M,
-    wrapperClassName: W,
-    isInfiniteScrollEnabled: H = !1,
-    onFetchMoreOptions: P,
-    onBlur: U,
-    onSearchChange: q,
-    ...I
-  }, A) => {
-    const z = Z(), l = C(null), L = C(null), B = C(0), {
-      isOpen: f,
-      searchTerm: G,
+    theme: W,
+    wrapperClassName: _,
+    isInfiniteScrollEnabled: $ = !1,
+    onFetchMoreOptions: H,
+    onBlur: P,
+    onSearchChange: U,
+    ...y
+  }, q) => {
+    const I = Z(), l = C(null), L = C(null), A = C(0), {
+      isOpen: i,
+      searchTerm: B,
       value: o,
       options: n,
       setValue: c,
-      setSearchTerm: J,
-      setCanFilter: K
-    } = pe(), e = ee(() => n.find(({ value: r }) => r === o), [n, o]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: k } = ce({
+      setSearchTerm: G,
+      setCanFilter: J,
+      toggleOpen: K
+    } = fe(), e = ee(() => n.find(({ value: r }) => r === o), [n, o]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: z } = ie({
       ulRef: L,
       inputRef: l,
       disabled: a,
       internalValue: e,
-      onBlur: U
-    }), i = d ? `${z}-${d}` : z;
-    te(A, () => l.current, [l]), ae(() => {
+      onBlur: P
+    }), p = m ? `${I}-${m}` : I;
+    te(q, () => l.current, [l]), ae(() => {
       if (x && !o) {
-        const r = n && n.find((p) => p.value === x);
+        const r = n && n.find((u) => u.value === x);
         r && c(r.value);
       }
     }, [x, n, c, o]);
     const S = (r) => {
-      const p = r.target.value;
-      K(!0), c(""), J(p ?? ""), q?.(p);
+      const u = r.target.value;
+      J(!0), c(""), G(u ?? ""), U?.(u);
       const b = n.find(
-        (X) => X.value.toLocaleLowerCase() === p.toLocaleLowerCase()
+        (X) => X.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
       c(b ? b.value : e?.value ?? "");
     };
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: Q,
-        className: s("flex flex-col w-full relative", W),
-        "data-theme": M,
+        className: s("flex flex-col w-full relative", _),
+        "data-theme": W,
         children: [
-          v ? /* @__PURE__ */ m(
+          v ? /* @__PURE__ */ d(
             "label",
             {
-              id: i,
+              id: p,
               className: s(oe({ className: T })),
-              htmlFor: i,
-              onClick: () => !a && k(),
+              htmlFor: p,
+              onClick: () => !a && z(),
               children: [
                 v,
                 h && /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" })
               ]
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ d(
             "div",
             {
               ref: j,
-              id: i,
+              id: p,
               className: s(
-                le({ className: _, hasError: !!u, disabled: a })
+                le({ className: O, hasError: !!f, disabled: a })
               ),
               role: "combobox",
-              onClick: () => !a && k(),
-              "aria-expanded": f,
-              tabIndex: B.current,
-              "aria-labelledby": i,
+              onClick: () => !a && K(!i),
+              "aria-expanded": i,
+              tabIndex: A.current,
+              "aria-labelledby": p,
               children: [
-                /* @__PURE__ */ m("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                /* @__PURE__ */ d("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   e?.leftIcon && !w && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
-                  w && /* @__PURE__ */ t(me, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                  w && /* @__PURE__ */ t(de, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
                   g ? /* @__PURE__ */ t(
                     "input",
                     {
                       type: "text",
-                      value: f ? G : e?.label ?? o ?? "",
+                      value: i ? B : e?.label ?? o ?? "",
                       onChange: S,
                       placeholder: N,
-                      className: s(se({ className: O }), {
-                        "text-red-700 placeholder:text-red-700": !!u
+                      className: s(se({ className: F }), {
+                        "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (r) => {
-                        r.stopPropagation(), a || k();
+                        r.stopPropagation(), a || z();
                       },
                       "aria-label": v || N,
-                      "aria-labelledby": i,
+                      "aria-labelledby": p,
                       required: h,
                       autoComplete: "off",
                       autoCapitalize: "words",
                       disabled: a,
                       tabIndex: -1,
-                      ...I
+                      ...y
                     }
                   ) : /* @__PURE__ */ t(
                     ne,
@@ -135,7 +136,7 @@ const fe = [
                       className: s(
                         "flex-1 text-zinc-400 text-sm dark:text-slate-400",
                         {
-                          "text-red-700": !!u,
+                          "text-red-700": !!f,
                           "select-none": !e,
                           "text-slate-800 dark:text-slate-50": e,
                           "text-slate-400/50 dark:text-slate-50/50": a
@@ -145,15 +146,15 @@ const fe = [
                     }
                   )
                 ] }),
-                y ? /* @__PURE__ */ t(re, { className: "w-4 h-4 text-zinc-500 select-none" }) : !w && /* @__PURE__ */ t(
-                  de,
+                k ? /* @__PURE__ */ t(re, { className: "w-4 h-4 text-zinc-500 select-none" }) : !w && /* @__PURE__ */ t(
+                  ue,
                   {
-                    "data-state": f ? "open" : "closed",
+                    "data-state": i ? "open" : "closed",
                     className: s(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
-                      F,
+                      R,
                       {
-                        "text-red-700": !!u,
+                        "text-red-700": !!f,
                         "text-slate-400/50 dark:group-focus-within:text-zinc-500": a
                       }
                     )
@@ -167,31 +168,31 @@ const fe = [
             {
               ref: l,
               type: "text",
-              name: d,
+              name: m,
               className: "hidden",
               "aria-hidden": "true",
               required: h,
               inert: !0,
               defaultValue: e?.value ?? o ?? void 0,
-              ...I
+              ...y
             }
           ),
-          f && /* @__PURE__ */ t(
-            ie,
+          i && /* @__PURE__ */ t(
+            ce,
             {
               ref: L,
-              additionalOptions: R,
-              className: $,
-              itemClassName: D,
-              name: d,
+              additionalOptions: V,
+              className: D,
+              itemClassName: E,
+              name: m,
               wrapperInputRef: j,
               inputRef: l,
               options: n,
-              isLoading: !!y,
+              isLoading: !!k,
               searchable: g,
-              listItemSecondRowClassName: E,
-              isInfiniteScrollEnabled: H,
-              onFetchMoreOptions: P
+              listItemSecondRowClassName: M,
+              isInfiniteScrollEnabled: $,
+              onFetchMoreOptions: H
             }
           )
         ]
@@ -200,5 +201,5 @@ const fe = [
   }
 );
 export {
-  ze as Wrapper
+  je as Wrapper
 };

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

@@ -1,18 +1,18 @@
-import { useRef as m, useEffect as l, useCallback as b } from "react";
+import { useRef as m, useEffect as c, useCallback as b } from "react";
 import { useDropdownContext as L } from "../contexts/dropdown.hook.js";
-const y = ({
+const p = ({
   ulRef: f,
   inputRef: t,
   disabled: w,
-  internalValue: i,
+  internalValue: u,
   onBlur: g
 }) => {
-  const r = m(null), a = m(null), { value: c, setSearchTerm: v, setCanFilter: u, toggleOpen: n } = L();
-  l(() => {
-    const e = new AbortController(), o = (d) => {
-      d.key === "Escape" && n(!1);
-    }, s = (d) => {
-      r.current?.contains(d.target) || n(!1);
+  const r = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
+  c(() => {
+    const e = new AbortController(), o = (l) => {
+      l.key === "Escape" && n(!1);
+    }, s = (l) => {
+      r.current?.contains(l.target) || n(!1);
     };
     return document.addEventListener("keydown", o, {
       signal: e.signal
@@ -28,14 +28,14 @@ const y = ({
       }
     ), a.current?.addEventListener(
       "focusin",
-      () => {
-        w || n(!0);
+      (l) => {
+        !w && l.target?.matches(":focus-visible") && n(!0);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
-  }, [n, r]), l(() => {
+  }, [n, r]), c(() => {
     const e = new AbortController();
     return a.current?.addEventListener(
       "keydown",
@@ -49,24 +49,24 @@ const y = ({
     ), () => {
       e.abort();
     };
-  }, [a, f]), l(() => {
+  }, [a, f]), c(() => {
     const e = new AbortController();
     return t?.current?.addEventListener(
       "focusin",
       () => {
-        v(i?.value ?? ""), u(!1);
+        v(u?.value ?? ""), d(!1);
       },
       { signal: e.signal }
     ), t?.current?.addEventListener(
       "focusout",
       () => {
-        u(!0);
+        d(!0);
       },
       { signal: e.signal }
     ), a.current?.addEventListener(
       "focus",
       () => {
-        u(!1);
+        d(!1);
       },
       { signal: e.signal }
     ), r.current?.addEventListener(
@@ -78,9 +78,9 @@ const y = ({
     ), () => {
       e.abort();
     };
-  }, [c]), l(() => {
-    t?.current && (t.current.value = c && i?.value || "");
-  }, [i, c]), l(() => {
+  }, [i]), c(() => {
+    t?.current && (t.current.value = i && u?.value || "");
+  }, [u, i]), c(() => {
     const e = new AbortController();
     return r.current?.addEventListener("focusout", (o) => {
       const s = o.relatedTarget;
@@ -88,7 +88,7 @@ const y = ({
     }), () => {
       e.abort();
     };
-  }, [n, r, v, g, c]);
+  }, [n, r, v, g, i]);
   const E = b(() => {
     n(!0), requestAnimationFrame(() => t?.current?.focus());
   }, [t, n]);
@@ -99,5 +99,5 @@ const y = ({
   };
 };
 export {
-  y as useDropdown
+  p as useDropdown
 };

package/dist/components/Filter/Filter.variants.js

@@ -9,8 +9,8 @@ const a = t(["flex", "gap-8", "items-center"]), n = t([
   "w-max"
 ]), r = t([
   "text-slate-400",
-  "h-[20px]",
-  "w-[20px]",
+  "h-5",
+  "w-5",
   "transition-all",
   "duration-150",
   "ease-in-out"

package/dist/components/Input/Input.variants.js

@@ -39,7 +39,7 @@ const a = r(
     variants: {
       variant: {
         default: "",
-        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 dark:border-red-500 pr-8 focus-visible:ring-transparent"
+        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 pr-8 focus-visible:ring-transparent"
       }
     },
     defaultVariants: {

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { PhoneNumberProvider as t } from "./contexts/phone-number.provider.js";
+import { Wrapper as f } from "./components/Wrapper.js";
+const u = p(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(t, { defaultCountryCode: o, children: /* @__PURE__ */ r(f, { ref: e, ...m }) }));
+export {
+  u as PhoneNumberInput
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -0,0 +1,45 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const e = r(
+  [
+    "relative",
+    "border",
+    "border-gray-300",
+    "rounded",
+    "data-[state=open]:border-aurora-500",
+    "focus-within:border-aurora-500",
+    "transition-colors",
+    "duration-150",
+    "dark:border-slate-500",
+    "dark:bg-slate-800",
+    "dark:data-[state=open]:border-slate-500",
+    "dark:focus-within:border-slate-500"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [],
+        error: [
+          "border-red-600",
+          "dark:border-red-500",
+          "data-[state=open]:border-red-500",
+          "focus-within:border-red-500",
+          "pr-8",
+          "focus-visible:ring-transparent"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), t = r([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]);
+export {
+  t as labelVariants,
+  e as phoneNumberInputVariants
+};

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -0,0 +1,27 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { C as s } from "../../../../chevron-up-DrQr2Fwd.js";
+import { usePhoneNumberContext as l } from "../../contexts/phone-number.hook.js";
+const m = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = l(), { flag: n } = o;
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-2 cursor-pointer",
+      onClick: () => a(!t),
+      children: [
+        /* @__PURE__ */ e(n, {}),
+        /* @__PURE__ */ e(
+          s,
+          {
+            className: "transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 w-5 h-5 text-slate-400",
+            "data-state": t ? "open" : "closed"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  m as FlagContent
+};