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

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -0,0 +1,109 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const a = t(
+  ["flex", "flex-col", "gap-2", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), r = t(
+  ["flex", "gap-2", "h-15", "items-center", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), s = t(
+  [
+    "flex",
+    "gap-4",
+    "grow",
+    "h-full",
+    "items-center",
+    "px-4",
+    "py-2",
+    "rounded",
+    "border",
+    "bg-white",
+    "border-gray-300",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "kubefirst-dark:bg-slate-800",
+    "kubefirst-dark:border-slate-600"
+  ],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: [
+          "border-red-600",
+          "dark:border-red-500",
+          "kubefirst-dark:border-red-500"
+        ]
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), l = t([
+  "flex",
+  "gap-1",
+  "items-center",
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "text-slate-500",
+  "dark:text-slate-50",
+  "kubefirst-dark:text-slate-50"
+]), d = t(
+  [
+    "text-xs",
+    "leading-5",
+    "text-slate-600",
+    "dark:text-slate-200",
+    "kubefirst-dark:text-slate-200"
+  ],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: [
+          "text-red-700",
+          "dark:text-red-400",
+          "kubefirst-dark:text-red-500"
+        ]
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+);
+export {
+  d as helperTextVariants,
+  a as imageUploadVariants,
+  r as inputContainerVariants,
+  s as inputFieldVariants,
+  l as labelVariants
+};

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

@@ -11,7 +11,8 @@ const a = r(
     "focus-visible:outline-none",
     "focus-visible:ring-1",
     "h-10",
-    "placeholder:text-slate-400",
+    "placeholder:text-zinc-400",
+    "dark:placeholder:text-metal-300",
     "px-2.5",
     "py-2",
     "rounded",
@@ -40,7 +41,14 @@ const a = r(
     variants: {
       variant: {
         default: "",
-        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 pr-8 focus-visible:border-red-600 focus-visible:ring-transparent"
+        error: [
+          "pr-8",
+          "border-red-600",
+          "focus-visible:border-red-600",
+          "focus-visible:ring-transparent",
+          "dark:border-red-500",
+          "kubefirst-dark:border-red-500"
+        ]
       }
     },
     defaultVariants: {

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

@@ -10,10 +10,10 @@ const t = r(
     "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"
+    "dark:border-metal-700",
+    "dark:bg-metal-800",
+    "dark:data-[state=open]:border-metal-700",
+    "dark:focus-within:border-metal-700"
   ],
   {
     variants: {

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

@@ -1,8 +1,9 @@
 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;
+import { cn as s } from "../../../../utils/index.js";
+import { C as l } from "../../../../chevron-up-DrQr2Fwd.js";
+import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
+const u = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = c(), { flag: n } = o;
   return /* @__PURE__ */ r(
     "button",
     {
@@ -12,9 +13,17 @@ const m = () => {
       children: [
         /* @__PURE__ */ e(n, {}),
         /* @__PURE__ */ e(
-          s,
+          l,
           {
-            className: "transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 w-5 h-5 text-slate-400",
+            className: s(
+              "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"
           }
         )
@@ -23,5 +32,5 @@ const m = () => {
   );
 };
 export {
-  m as FlagContent
+  u as FlagContent
 };

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
 };