@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.46

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.js

@@ -1,11 +1,12 @@
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { jsx as g, jsxs as R } from "react/jsx-runtime";
 import * as S from "react";
-import { useRef as R, useMemo as T, useEffect as k } from "react";
-import { flushSync as D } from "react-dom";
+import { useRef as T, useMemo as k, useEffect as D } from "react";
+import { flushSync as W } from "react-dom";
 import { Typography as O } from "../../../Typography/Typography.js";
-import { TruncateText as W } from "../TruncateText/TruncateText.js";
-import { usePhoneNumberContext as L } from "../../contexts/phone-number.hook.js";
-function y(r, l, e) {
+import { cn as z } from "../../../../utils/index.js";
+import { TruncateText as L } from "../TruncateText/TruncateText.js";
+import { usePhoneNumberContext as V } from "../../contexts/phone-number.hook.js";
+function x(r, l, e) {
   let s = e.initialDeps ?? [], t, o = !0;
   function n() {
     var i, a, u;
@@ -17,7 +18,7 @@ function y(r, l, e) {
     s = d;
     let m;
     if (e.key && ((a = e.debug) != null && a.call(e)) && (m = Date.now()), t = l(...d), e.key && ((u = e.debug) != null && u.call(e))) {
-      const v = Math.round((Date.now() - c) * 100) / 100, f = Math.round((Date.now() - m) * 100) / 100, x = f / 16, E = (p, w) => {
+      const v = Math.round((Date.now() - c) * 100) / 100, f = Math.round((Date.now() - m) * 100) / 100, y = f / 16, E = (p, w) => {
         for (p = String(p); p.length < w; )
           p = " " + p;
         return p;
@@ -29,7 +30,7 @@ function y(r, l, e) {
             font-weight: bold;
             color: hsl(${Math.max(
           0,
-          Math.min(120 - 120 * x, 120)
+          Math.min(120 - 120 * y, 120)
         )}deg 100% 31%);`,
         e?.key
       );
@@ -40,25 +41,25 @@ function y(r, l, e) {
     s = i;
   }, n;
 }
-function z(r, l) {
+function C(r, l) {
   if (r === void 0)
     throw new Error("Unexpected undefined");
   return r;
 }
-const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
+const j = (r, l) => Math.abs(r - l) < 1.01, P = (r, l, e) => {
   let s;
   return function(...t) {
     r.clearTimeout(s), s = r.setTimeout(() => l.apply(this, t), e);
   };
-}, C = (r) => {
+}, I = (r) => {
   const { offsetWidth: l, offsetHeight: e } = r;
   return { width: l, height: e };
-}, P = (r) => r, B = (r) => {
+}, B = (r) => r, H = (r) => {
   const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), s = [];
   for (let t = l; t <= e; t++)
     s.push(t);
   return s;
-}, H = (r, l) => {
+}, $ = (r, l) => {
   const e = r.scrollElement;
   if (!e)
     return;
@@ -69,7 +70,7 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
     const { width: i, height: a } = n;
     l({ width: Math.round(i), height: Math.round(a) });
   };
-  if (t(C(e)), !s.ResizeObserver)
+  if (t(I(e)), !s.ResizeObserver)
     return () => {
     };
   const o = new s.ResizeObserver((n) => {
@@ -82,16 +83,16 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
           return;
         }
       }
-      t(C(e));
+      t(I(e));
     };
     r.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(i) : i();
   });
   return o.observe(e, { box: "border-box" }), () => {
     o.unobserve(e);
   };
-}, I = {
+}, A = {
   passive: !0
-}, A = typeof window > "u" ? !0 : "onscrollend" in window, $ = (r, l) => {
+}, F = typeof window > "u" ? !0 : "onscrollend" in window, q = (r, l) => {
   const e = r.scrollElement;
   if (!e)
     return;
@@ -99,8 +100,8 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
   if (!s)
     return;
   let t = 0;
-  const o = r.options.useScrollendEvent && A ? () => {
-  } : j(
+  const o = r.options.useScrollendEvent && F ? () => {
+  } : P(
     s,
     () => {
       l(t, !1);
@@ -110,12 +111,12 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
     const { horizontal: d, isRtl: h } = r.options;
     t = d ? e.scrollLeft * (h && -1 || 1) : e.scrollTop, o(), l(t, c);
   }, i = n(!0), a = n(!1);
-  e.addEventListener("scroll", i, I);
-  const u = r.options.useScrollendEvent && A;
-  return u && e.addEventListener("scrollend", a, I), () => {
+  e.addEventListener("scroll", i, A);
+  const u = r.options.useScrollendEvent && F;
+  return u && e.addEventListener("scrollend", a, A), () => {
     e.removeEventListener("scroll", i), u && e.removeEventListener("scrollend", a);
   };
-}, q = (r, l, e) => {
+}, U = (r, l, e) => {
   if (l?.borderBoxSize) {
     const s = l.borderBoxSize[0];
     if (s)
@@ -124,7 +125,7 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
       );
   }
   return r[e.options.horizontal ? "offsetWidth" : "offsetHeight"];
-}, U = (r, {
+}, K = (r, {
   adjustments: l = 0,
   behavior: e
 }, s) => {
@@ -135,7 +136,7 @@ const V = (r, l) => Math.abs(r - l) < 1.01, j = (r, l, e) => {
     behavior: e
   });
 };
-class K {
+class G {
   constructor(l) {
     this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.currentScrollToIndex = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.laneAssignments = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.prevLanes = void 0, this.lanesChangedFlag = !1, this.lanesSettling = !1, this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
       let e = null;
@@ -173,11 +174,11 @@ class K {
         scrollPaddingStart: 0,
         scrollPaddingEnd: 0,
         horizontal: !1,
-        getItemKey: P,
-        rangeExtractor: B,
+        getItemKey: B,
+        rangeExtractor: H,
         onChange: () => {
         },
-        measureElement: q,
+        measureElement: U,
         initialRect: { width: 0, height: 0 },
         scrollMargin: 0,
         gap: 0,
@@ -194,7 +195,7 @@ class K {
     }, this.notify = (e) => {
       var s, t;
       (t = (s = this.options).onChange) == null || t.call(s, this, e);
-    }, this.maybeNotify = y(
+    }, this.maybeNotify = x(
       () => (this.calculateRange(), [
         this.isScrolling,
         this.range ? this.range.startIndex : null,
@@ -252,7 +253,7 @@ class K {
           break;
       }
       return o.size === this.options.lanes ? Array.from(o.values()).sort((n, i) => n.end === i.end ? n.index - i.index : n.end - i.end)[0] : void 0;
-    }, this.getMeasurementOptions = y(
+    }, this.getMeasurementOptions = x(
       () => [
         this.options.count,
         this.options.paddingStart,
@@ -270,13 +271,9 @@ class K {
         lanes: i
       }),
       {
-        key: !1,
-        skipInitialOnChange: !0,
-        onChange: () => {
-          this.notify(this.isScrolling);
-        }
+        key: !1
       }
-    ), this.getMeasurements = y(
+    ), this.getMeasurements = x(
       () => [this.getMeasurementOptions(), this.itemSizeCache],
       ({ count: e, paddingStart: s, scrollMargin: t, getItemKey: o, enabled: n, lanes: i }, a) => {
         if (!n)
@@ -298,19 +295,19 @@ class K {
         }
         for (let h = u; h < e; h++) {
           const m = o(h), v = this.laneAssignments.get(h);
-          let f, x;
+          let f, y;
           if (v !== void 0 && this.options.lanes > 1) {
             f = v;
             const b = d[f], M = b !== void 0 ? c[b] : void 0;
-            x = M ? M.end + this.options.gap : s + t;
+            y = M ? M.end + this.options.gap : s + t;
           } else {
             const b = this.options.lanes === 1 ? c[h - 1] : this.getFurthestMeasurement(c, h);
-            x = b ? b.end + this.options.gap : s + t, f = b ? b.lane : h % this.options.lanes, this.options.lanes > 1 && this.laneAssignments.set(h, f);
+            y = b ? b.end + this.options.gap : s + t, f = b ? b.lane : h % this.options.lanes, this.options.lanes > 1 && this.laneAssignments.set(h, f);
           }
-          const E = a.get(m), p = typeof E == "number" ? E : this.options.estimateSize(h), w = x + p;
+          const E = a.get(m), p = typeof E == "number" ? E : this.options.estimateSize(h), w = y + p;
           c[h] = {
             index: h,
-            start: x,
+            start: y,
             size: p,
             end: w,
             key: m,
@@ -323,14 +320,14 @@ class K {
         key: process.env.NODE_ENV !== "production" && "getMeasurements",
         debug: () => this.options.debug
       }
-    ), this.calculateRange = y(
+    ), this.calculateRange = x(
       () => [
         this.getMeasurements(),
         this.getSize(),
         this.getScrollOffset(),
         this.options.lanes
       ],
-      (e, s, t, o) => this.range = e.length > 0 && s > 0 ? G({
+      (e, s, t, o) => this.range = e.length > 0 && s > 0 ? J({
         measurements: e,
         outerSize: s,
         scrollOffset: t,
@@ -340,7 +337,7 @@ class K {
         key: process.env.NODE_ENV !== "production" && "calculateRange",
         debug: () => this.options.debug
       }
-    ), this.getVirtualIndexes = y(
+    ), this.getVirtualIndexes = x(
       () => {
         let e = null, s = null;
         const t = this.calculateRange();
@@ -390,7 +387,7 @@ class K {
         return;
       }
       this._measureElement(e, void 0);
-    }, this.getVirtualItems = y(
+    }, this.getVirtualItems = x(
       () => [this.getVirtualIndexes(), this.getMeasurements()],
       (e, s) => {
         const t = [];
@@ -407,11 +404,11 @@ class K {
     ), this.getVirtualItemForOffset = (e) => {
       const s = this.getMeasurements();
       if (s.length !== 0)
-        return z(
-          s[N(
+        return C(
+          s[_(
             0,
             s.length - 1,
-            (t) => z(s[t]).start,
+            (t) => C(s[t]).start,
             e
           )]
         );
@@ -477,7 +474,7 @@ class K {
               console.warn("Failed to get offset for index:", e);
               return;
             }
-            V(f[0], v) || a(h);
+            j(f[0], v) || a(h);
           };
           this.isDynamicMode() ? this.targetWindow.requestAnimationFrame(m) : m();
         });
@@ -525,7 +522,7 @@ class K {
     }, this.setOptions(l);
   }
 }
-const N = (r, l, e, s) => {
+const _ = (r, l, e, s) => {
   for (; r <= l; ) {
     const t = (r + l) / 2 | 0, o = e(t);
     if (o < s)
@@ -537,7 +534,7 @@ const N = (r, l, e, s) => {
   }
   return r > 0 ? r - 1 : 0;
 };
-function G({
+function J({
   measurements: r,
   outerSize: l,
   scrollOffset: e,
@@ -549,7 +546,7 @@ function G({
       startIndex: 0,
       endIndex: t
     };
-  let n = N(
+  let n = _(
     0,
     t,
     o,
@@ -573,8 +570,8 @@ function G({
   }
   return { startIndex: n, endIndex: i };
 }
-const F = typeof document < "u" ? S.useLayoutEffect : S.useEffect;
-function J({
+const N = typeof document < "u" ? S.useLayoutEffect : S.useEffect;
+function Q({
   useFlushSync: r = !0,
   ...l
 }) {
@@ -582,48 +579,48 @@ function J({
     ...l,
     onChange: (o, n) => {
       var i;
-      r && n ? D(e) : e(), (i = l.onChange) == null || i.call(l, o, n);
+      r && n ? W(e) : e(), (i = l.onChange) == null || i.call(l, o, n);
     }
   }, [t] = S.useState(
-    () => new K(s)
+    () => new G(s)
   );
-  return t.setOptions(s), F(() => t._didMount(), []), F(() => t._willUpdate()), t;
+  return t.setOptions(s), N(() => t._didMount(), []), N(() => t._willUpdate()), t;
 }
-function Q(r) {
-  return J({
-    observeElementRect: H,
-    observeElementOffset: $,
-    scrollToFn: U,
+function X(r) {
+  return Q({
+    observeElementRect: $,
+    observeElementOffset: q,
+    scrollToFn: K,
     ...r
   });
 }
-const ne = ({
+const oe = ({
   showFlagOnSearch: r,
   showNameOnSearch: l
 }) => {
-  const e = R(null), { termOfSearch: s, countries: t, handleSelectCountry: o } = L(), n = T(() => t.filter(
+  const e = T(null), { termOfSearch: s, countries: t, handleSelectCountry: o } = V(), n = k(() => t.filter(
     (a) => a.name.toLocaleLowerCase().includes(s.toLowerCase())
-  ), [s]), i = Q({
+  ), [s]), i = X({
     count: n.length,
     overscan: 5,
     getScrollElement: () => e.current,
     estimateSize: () => 40
   });
-  return k(() => {
+  return D(() => {
     n.length > 0 && i.scrollToIndex(0);
   }, [s, i]), n.length === 0 ? /* @__PURE__ */ g("div", { className: "overflow-y-auto max-h-60 snap-y snap-mandatory", children: /* @__PURE__ */ g("ul", { className: "relative", children: /* @__PURE__ */ g("li", { className: "w-full flex items-center h-10 select-none px-6", children: /* @__PURE__ */ g(
     O,
     {
       variant: "body2",
       component: "span",
-      className: "flex gap-2 items-center text-left text-slate-800 dark:text-slate-50",
+      className: "flex gap-2 items-center text-left",
       children: "No options"
     }
   ) }) }) }) : /* @__PURE__ */ g(
     "div",
     {
       ref: e,
-      className: "overflow-y-auto max-h-60 snap-y snap-mandatory",
+      className: "overflow-y-auto max-h-60 snap-y snap-mandatory scrollbar",
       children: /* @__PURE__ */ g(
         "ul",
         {
@@ -634,7 +631,16 @@ const ne = ({
             return /* @__PURE__ */ g(
               "li",
               {
-                className: "absolute w-full snap-start snap-always scroll-m-0 flex items-center h-10",
+                className: z(
+                  "absolute",
+                  "w-full",
+                  "snap-start",
+                  "snap-always",
+                  "scroll-m-0",
+                  "flex",
+                  "items-center",
+                  "h-10"
+                ),
                 style: {
                   top: a.start,
                   height: a.size
@@ -642,17 +648,29 @@ const ne = ({
                 children: /* @__PURE__ */ g(
                   "button",
                   {
-                    className: "w-full h-full cursor-pointer px-6 hover:bg-gray-50 transition-colors duration-150 focus-visible:outline-0 hover:outline-gray-100 focus:bg-gray-50 dark:hover:bg-slate-700",
+                    className: z(
+                      "w-full",
+                      "h-full",
+                      "cursor-pointer",
+                      "px-6",
+                      "hover:bg-gray-50",
+                      "transition-colors",
+                      "duration-150",
+                      "focus-visible:outline-0",
+                      "hover:outline-gray-100",
+                      "focus:bg-gray-50",
+                      "dark:hover:bg-metal-700"
+                    ),
                     onClick: () => o(u),
-                    children: /* @__PURE__ */ _(
+                    children: /* @__PURE__ */ R(
                       O,
                       {
                         variant: "body2",
                         component: "span",
-                        className: "flex gap-2 items-center text-left text-slate-800 dark:text-slate-50",
+                        className: "flex gap-2 items-center text-left",
                         children: [
                           r && /* @__PURE__ */ g(c, {}),
-                          l && /* @__PURE__ */ g(W, { text: d, prefix: h })
+                          l && /* @__PURE__ */ g(L, { text: d, prefix: h })
                         ]
                       }
                     )
@@ -668,5 +686,5 @@ const ne = ({
   );
 };
 export {
-  ne as FlagSelectorList
+  oe as FlagSelectorList
 };

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -1,36 +1,60 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useCallback as d } from "react";
-import { Input as c } from "../../../Input/Input.js";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import { Input as d } from "../../../Input/Input.js";
 import { FlagSelectorList as p } from "../FlagSelectorList/FlagSelectorList.js";
-import { usePhoneNumberContext as u } from "../../contexts/phone-number.hook.js";
-const S = ({
-  placeholder: r = "Search",
+import { cn as u } from "../../../../utils/index.js";
+import { usePhoneNumberContext as h } from "../../contexts/phone-number.hook.js";
+const C = ({
+  placeholder: e = "Search",
   showFlagOnSearch: o,
-  showInputFilter: a,
-  showNameOnSearch: t,
-  showPlaceHolder: l = !0
+  showInputFilter: t,
+  showNameOnSearch: a,
+  showPlaceHolder: m = !0
 }) => {
-  const { onChangeTermOfSearch: s } = u(), m = d((n) => {
-    s(n.target.value);
+  const { onChangeTermOfSearch: l } = h(), n = c((i) => {
+    l(i.target.value);
   }, []);
-  return /* @__PURE__ */ i("div", { className: "absolute top-full mt-1.5 animate-in fade-in-0 zoom-in-95 w-full border border-gray-100 bg-white shadow-sm py-2 z-10 rounded-sm dark:bg-slate-800 dark:border-slate-600", children: [
-    a && /* @__PURE__ */ e("div", { className: "px-6 py-2.5", children: /* @__PURE__ */ e(
-      c,
-      {
-        isSearch: !0,
-        placeholder: l ? r : void 0,
-        onChange: m
-      }
-    ) }),
-    /* @__PURE__ */ e(
-      p,
-      {
-        showFlagOnSearch: o,
-        showNameOnSearch: t
-      }
-    )
-  ] });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: u(
+        "absolute",
+        "top-full",
+        "mt-1.5",
+        "animate-in",
+        "fade-in-0",
+        "zoom-in-95",
+        "w-full",
+        "border",
+        "border-gray-100",
+        "bg-white",
+        "shadow-sm",
+        "py-2",
+        "z-10",
+        "rounded-sm",
+        "dark:bg-metal-800",
+        "dark:border-metal-700"
+      ),
+      children: [
+        t && /* @__PURE__ */ r("div", { className: "px-6 py-2.5", children: /* @__PURE__ */ r(
+          d,
+          {
+            isSearch: !0,
+            placeholder: m ? e : void 0,
+            onChange: n
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          p,
+          {
+            showFlagOnSearch: o,
+            showNameOnSearch: a
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  S as FlagSelectorWrapper
+  C as FlagSelectorWrapper
 };