@stachelock/ui 0.6.12 → 0.6.13

package/dist/inputs/PhoneInput.js

@@ -1,4 +1,4 @@
-import { defineComponent as Pe, inject as Le, ref as f, computed as i, toRef as Re, watch as M, nextTick as ie, onMounted as Te, onUnmounted as Ae, createBlock as L, openBlock as C, unref as b, withCtx as R, createElementVNode as u, normalizeClass as I, createVNode as B, createElementBlock as Y, createCommentVNode as D, renderSlot as Me, toDisplayString as W, Teleport as Be, Transition as De, normalizeStyle as Ue, withDirectives as Fe, withModifiers as Z, vModelText as He, Fragment as Ge, renderList as Ke, withKeys as qe } from "vue";
+import { defineComponent as Pe, inject as Le, ref as f, computed as i, toRef as Re, watch as B, nextTick as ie, onMounted as Te, onUnmounted as Ae, createBlock as R, openBlock as C, unref as b, withCtx as T, createElementVNode as u, normalizeClass as I, createVNode as D, createElementBlock as Y, createCommentVNode as U, renderSlot as Me, toDisplayString as W, Teleport as Be, Transition as De, normalizeStyle as Ue, withDirectives as Fe, withModifiers as Z, vModelText as He, Fragment as Ge, renderList as Ke, withKeys as qe } from "vue";
 import { useField as Ye } from "vee-validate";
 import { Listbox as je, ListboxButton as ze, ListboxOptions as $e, ListboxOption as _e } from "@headlessui/vue";
 import { ChevronDownIcon as We, CheckIcon as Ze, ExclamationCircleIcon as Je, CheckCircleIcon as Xe } from "@heroicons/vue/20/solid";
@@ -74,12 +74,12 @@ const E = {
   TR: { code: "TR", name: "Turkey", dialCode: "+90" },
   PK: { code: "PK", name: "Pakistan", dialCode: "+92" }
 }, ue = Object.values(E).sort(
-  (a, s) => a.name.localeCompare(s.name)
+  (a, r) => a.name.localeCompare(r.name)
 );
 function sa(a) {
   return E[a]?.dialCode ?? "+1";
 }
-function T(a, s, v = {}) {
+function V(a, r, v = {}) {
   const { required: l = !1 } = v;
   if (!a || a.trim() === "")
     return l ? {
@@ -101,27 +101,27 @@ function T(a, s, v = {}) {
       errorCode: "TOO_SHORT"
     };
   try {
-    const p = new X(s);
+    const p = new X(r);
     p.input(n);
     const y = p.getNumber();
     if (!y)
       return {
         isValid: !1,
-        errorMessage: `Invalid format for ${E[s]?.name || "selected country"}`,
+        errorMessage: `Invalid format for ${E[r]?.name || "selected country"}`,
         errorCode: "INVALID_FORMAT"
       };
     if (!y.isPossible())
       return {
         isValid: !1,
-        errorMessage: `Not a possible phone number for ${E[s]?.name || "this country"}`,
+        errorMessage: `Not a possible phone number for ${E[r]?.name || "this country"}`,
         errorCode: "NOT_POSSIBLE"
       };
     const w = la(
       y.nationalNumber || n,
-      s
+      r
     );
     if (w) {
-      const S = E[s]?.name || "this country", k = {
+      const S = E[r]?.name || "this country", k = {
         INVALID_COUNTRY: { message: "Invalid country code", code: "INVALID_COUNTRY" },
         TOO_SHORT: { message: `Phone number is too short for ${S}`, code: "TOO_SHORT" },
         INVALID_LENGTH: { message: `Invalid phone number length for ${S}`, code: "INVALID_LENGTH" },
@@ -148,10 +148,10 @@ function T(a, s, v = {}) {
     };
   }
 }
-function ra(a, s = "US") {
+function ra(a, r = "US") {
   if (!a) return "";
   try {
-    const v = new X(s);
+    const v = new X(r);
     v.input(a);
     const l = v.getNumber();
     return l ? l.formatNational() : a.replace(/^\+[0-9]{1,3}/, "").trim();
@@ -159,11 +159,11 @@ function ra(a, s = "US") {
     return console.error("Error formatting phone number:", v), a || "";
   }
 }
-function J(a, s = "US") {
+function J(a, r = "US") {
   if (!a)
     return { formatted: "", numberObject: void 0 };
   try {
-    const v = a.replace(/(?!^\+)[^0-9]/g, ""), l = new X(s), n = l.input(v), h = l.getNumber();
+    const v = a.replace(/(?!^\+)[^0-9]/g, ""), l = new X(r), n = l.input(v), h = l.getNumber();
     return { formatted: n, numberObject: h };
   } catch (v) {
     return console.error("Error formatting phone number:", v), { formatted: a, numberObject: void 0 };
@@ -172,9 +172,9 @@ function J(a, s = "US") {
 function ce(a) {
   if (!(!a || !a.startsWith("+")))
     try {
-      const s = ta(a);
-      if (s?.country)
-        return s.country;
+      const r = ta(a);
+      if (r?.country)
+        return r.country;
     } catch {
     }
 }
@@ -278,10 +278,10 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
     }
   },
   emits: ["update:modelValue", "update:value", "update:country", "update-metadata", "submit", "focus", "blur", "validated"],
-  setup(a, { expose: s, emit: v }) {
-    const l = a, n = v, h = Le("phoneInput", {}), p = f(null), y = f(null), w = f(null), S = f(null), U = f({ top: 0, left: 0 }), k = i(() => ea(l.name)), j = Re(l, "name"), Q = i(() => l.modelValue ?? l.value ?? ""), r = f(
+  setup(a, { expose: r, emit: v }) {
+    const l = a, n = v, h = Le("phoneInput", {}), p = f(null), y = f(null), w = f(null), S = f(null), F = f({ top: 0, left: 0 }), k = i(() => ea(l.name)), j = Re(l, "name"), Q = i(() => l.modelValue ?? l.value ?? ""), s = f(
       l.defaultCountry || h.defaultCountry || "US"
-    ), V = f(""), c = f(""), m = f(""), F = f(""), N = f(!1), ee = f(!1), {
+    ), O = f(""), c = f(""), m = f(""), H = f(""), N = f(!1), ee = f(!1), {
       meta: A,
       errorMessage: me,
       handleBlur: fe,
@@ -289,34 +289,34 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
       setTouched: ve
     } = Ye(j, l.rules, {
       initialValue: Q.value
-    }), le = i(() => E[r.value] || E.US), ge = i(() => l.required ? !1 : aa(l.rules)), z = i({
+    }), le = i(() => E[s.value] || E.US), ge = i(() => l.required ? !1 : aa(l.rules)), z = i({
       get: () => le.value,
       set: (e) => {
-        e && e.code !== r.value && de(e.code);
+        e && e.code !== s.value && de(e.code);
       }
-    }), he = i(() => sa(r.value)), pe = i(() => l.placeholder || da(r.value)), $ = i(() => F.value || me.value), H = i(() => !!$.value && (A.touched || l.showErrors)), Ce = i(() => (H.value || N.value && l.colorfulValidation) && (A.touched || l.showErrors)), te = i(() => N.value && !!c.value && !F.value && l.colorfulValidation), ye = i(() => l.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-600" : H.value ? "sl-ring-red-500 focus-within:sl-ring-red-500" : te.value && l.colorfulValidation ? "sl-ring-green-500 focus-within:sl-ring-green-500" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-primary-600"), be = i(() => ({
-      top: `${U.value.top}px`,
-      left: `${U.value.left}px`
+    }), he = i(() => sa(s.value)), pe = i(() => l.placeholder || da(s.value)), $ = i(() => H.value || me.value), G = i(() => !!$.value && (A.touched || l.showErrors)), Ce = i(() => (G.value || N.value && l.colorfulValidation) && (A.touched || l.showErrors)), te = i(() => N.value && !!c.value && !H.value && l.colorfulValidation), ye = i(() => l.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-600" : G.value ? "sl-ring-red-500 focus-within:sl-ring-red-500" : te.value && l.colorfulValidation ? "sl-ring-green-500 focus-within:sl-ring-green-500" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-primary-600"), be = i(() => ({
+      top: `${F.value.top}px`,
+      left: `${F.value.left}px`
     })), oe = async () => {
       if (await ie(), w.value) {
         const e = w.value.getBoundingClientRect();
-        U.value = {
+        F.value = {
           top: e.bottom + window.scrollY + 4,
           // 4px gap, account for scroll
           left: e.left + window.scrollX
         };
       }
-    }, G = () => {
-      O.value && oe();
-    }, O = f(!1), we = () => {
-      O.value = !O.value, O.value && oe();
+    }, K = () => {
+      P.value && oe();
+    }, P = f(!1), we = () => {
+      P.value = !P.value, P.value && oe();
     };
-    M(z, () => {
-      O.value = !1;
+    B(z, () => {
+      P.value = !1;
     });
     const se = (e) => {
       const o = e.target;
-      w.value && !w.value.contains(o) && !o.closest('[role="listbox"]') && (O.value = !1);
+      w.value && !w.value.contains(o) && !o.closest('[role="listbox"]') && (P.value = !1);
     }, xe = i(() => {
       const e = [];
       return $.value && e.push(`${k.value}-error`), l.hint && e.push(`${k.value}-hint`), e.length > 0 ? e.join(" ") : void 0;
@@ -332,8 +332,8 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
       }
       if (h.excludedCountries?.length && (e = e.filter(
         (t) => !h.excludedCountries.includes(t.code)
-      )), !V.value) return e;
-      const o = V.value.toLowerCase();
+      )), !O.value) return e;
+      const o = O.value.toLowerCase();
       return e.filter(
         (t) => t.name.toLowerCase().includes(o) || t.dialCode.includes(o) || t.code.toLowerCase().includes(o)
       );
@@ -341,22 +341,22 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
       const o = e.target;
       o.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239ca3af"%3E%3Cpath d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/%3E%3C/svg%3E';
     }, de = (e) => {
-      if (r.value = e, V.value = "", n("update:country", e), ee.value && c.value) {
+      if (s.value = e, O.value = "", n("update:country", e), ee.value && c.value) {
         const { formatted: o, numberObject: t } = J(c.value, e);
-        c.value = o, t?.number && (m.value = t.number, P(t.number));
-        const d = T(c.value, e, { required: l.required });
-        K(d);
+        c.value = o, t?.number && (m.value = t.number, L(t.number));
+        const d = V(c.value, e, { required: l.required });
+        M(d);
       }
       ie(() => {
         p.value?.focus();
       });
-    }, K = (e) => {
-      N.value = e.isValid, F.value = e.errorMessage || "", n("validated", e), n("update-metadata", {
+    }, M = (e) => {
+      N.value = e.isValid, H.value = e.errorMessage || "", n("validated", e), n("update-metadata", {
         dirty: A.dirty,
         valid: e.isValid,
         e164: e.e164
       });
-    }, P = (e) => {
+    }, L = (e) => {
       n("update:modelValue", e), n("update:value", e);
     }, Ee = (e) => {
       const o = e.target, t = o.value;
@@ -364,66 +364,70 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
         (q) => q.name.toLowerCase() === t.toLowerCase() || q.code.toLowerCase() === t.toLowerCase()
       )) return;
       if (!t.trim()) {
-        c.value = "", m.value = "", P(""), ae(e);
-        const q = T("", r.value, { required: l.required });
-        K(q);
+        c.value = "", m.value = "", L(""), ae(e);
+        const q = V("", s.value, { required: l.required });
+        M(q);
         return;
       }
-      const { formatted: g, numberObject: x } = J(t, r.value);
-      c.value = g, o.value = g, x?.number ? (m.value = x.number, P(x.number)) : (m.value = "", P(""));
-      const Oe = T(g, r.value, { required: l.required });
-      K(Oe), ae(e);
+      const { formatted: g, numberObject: x } = J(t, s.value);
+      c.value = g, o.value = g, x?.number ? (m.value = x.number, L(x.number)) : (m.value = "", L(""));
+      const Oe = V(g, s.value, { required: l.required });
+      M(Oe), ae(e);
     }, Se = async (e) => {
       e.preventDefault();
       const o = e.clipboardData?.getData("text") || "";
       if (!o) return;
       if (l.autoDetectCountry && o.startsWith("+")) {
         const x = ce(o);
-        x && x !== r.value && (r.value = x, n("update:country", x));
+        x && x !== s.value && (s.value = x, n("update:country", x));
       }
-      const { formatted: t, numberObject: d } = J(o, r.value);
-      c.value = t, p.value && (p.value.value = t), d?.number ? (m.value = d.number, P(d.number)) : (m.value = "", P(""));
-      const g = T(t, r.value, { required: l.required });
-      K(g);
+      const { formatted: t, numberObject: d } = J(o, s.value);
+      c.value = t, p.value && (p.value.value = t), d?.number ? (m.value = d.number, L(d.number)) : (m.value = "", L(""));
+      const g = V(t, s.value, { required: l.required });
+      M(g);
     }, ke = (e) => {
-      fe(e), ve(!0), n("blur");
+      if (fe(e), ve(!0), !c.value.trim()) {
+        const o = V("", s.value, { required: l.required });
+        M(o);
+      }
+      n("blur");
     }, Ne = () => {
       n("focus");
     }, Ve = () => {
       A.valid && N.value && m.value && n("submit");
     }, _ = (e) => {
       if (!e) {
-        c.value = "", m.value = "", N.value = !l.required, F.value = "";
+        c.value = "", m.value = "", N.value = !l.required, H.value = "";
         return;
       }
       if (l.autoDetectCountry && e.startsWith("+")) {
         const d = ce(e);
-        d && (r.value = d, n("update:country", d));
+        d && (s.value = d, n("update:country", d));
       }
-      const o = ra(e, r.value);
+      const o = ra(e, s.value);
       c.value = o, m.value = e.startsWith("+") ? e : "";
-      const t = T(o, r.value, { required: l.required });
+      const t = V(o, s.value, { required: l.required });
       N.value = t.isValid, t.e164 && (m.value = t.e164);
     };
-    return s({
+    return r({
       focus: () => p.value?.focus(),
       blur: () => p.value?.blur(),
-      validate: () => T(c.value, r.value, { required: l.required }),
+      validate: () => V(c.value, s.value, { required: l.required }),
       getE164: () => m.value,
-      getCountry: () => r.value,
+      getCountry: () => s.value,
       setCountry: (e) => de(e)
     }), Te(() => {
-      ee.value = !0, _(Q.value), window.addEventListener("scroll", G, !0), window.addEventListener("resize", G), document.addEventListener("click", se);
+      ee.value = !0, _(Q.value), window.addEventListener("scroll", K, !0), window.addEventListener("resize", K), document.addEventListener("click", se);
     }), Ae(() => {
-      window.removeEventListener("scroll", G, !0), window.removeEventListener("resize", G), document.removeEventListener("click", se);
-    }), M(() => l.modelValue, (e) => {
+      window.removeEventListener("scroll", K, !0), window.removeEventListener("resize", K), document.removeEventListener("click", se);
+    }), B(() => l.modelValue, (e) => {
       e !== m.value && _(e);
-    }, { immediate: !1 }), M(() => l.value, (e) => {
+    }, { immediate: !1 }), B(() => l.value, (e) => {
       e !== m.value && _(e);
-    }, { immediate: !1 }), M(() => l.defaultCountry, (e) => {
-      e && !c.value && (r.value = e);
-    }), M(V, () => {
-    }), (e, o) => (C(), L(Qe, {
+    }, { immediate: !1 }), B(() => l.defaultCountry, (e) => {
+      e && !c.value && (s.value = e);
+    }), B(O, () => {
+    }), (e, o) => (C(), R(Qe, {
       id: k.value,
       name: j.value,
       label: a.label,
@@ -439,27 +443,27 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
       "disabled-message": a.disabledMessage,
       "colorful-validation": a.colorfulValidation
     }, {
-      default: R(() => [
+      default: T(() => [
         u("div", {
           class: I(["sl-flex sl-rounded-md sl-ring-1 sl-ring-inset", [
             ye.value,
             a.disabled ? "sl-bg-gray-50 dark:sl-bg-slate-800 sl-shadow-none" : "sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm focus-within:sl-ring-2 focus-within:sl-ring-inset"
           ]])
         }, [
-          B(b(je), {
+          D(b(je), {
             modelValue: z.value,
             "onUpdate:modelValue": o[3] || (o[3] = (t) => z.value = t),
             disabled: a.disabled,
             as: "div",
             class: "sl-relative sl-flex-shrink-0"
           }, {
-            default: R(() => [
+            default: T(() => [
               u("div", {
                 ref_key: "countryButtonRef",
                 ref: w,
                 class: "sl-h-full"
               }, [
-                B(b(ze), {
+                D(b(ze), {
                   disabled: a.disabled,
                   class: I(["sl-flex sl-items-center sl-gap-1.5 sl-h-full sl-pl-3 sl-pr-2 sl-border-r sl-text-sm focus:sl-outline-none sl-transition-colors", [
                     a.disabled ? "sl-text-gray-400 dark:sl-text-gray-300 sl-cursor-not-allowed sl-border-gray-200 dark:sl-border-slate-600 sl-bg-transparent" : "sl-text-gray-700 dark:sl-text-gray-100 sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 sl-cursor-pointer"
@@ -467,19 +471,19 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
                   "data-testid": "country-selector",
                   onClick: we
                 }, {
-                  default: R(() => [
+                  default: T(() => [
                     u("span", {
                       class: I(["sl-w-5 sl-h-5 sl-rounded-full sl-overflow-hidden sl-flex-shrink-0 sl-shadow-sm", a.disabled ? "sl-opacity-60 sl-bg-gray-200" : "sl-bg-gray-100"])
                     }, [
                       u("img", {
-                        src: ne(r.value),
+                        src: ne(s.value),
                         alt: le.value.name,
                         class: I(["sl-w-full sl-h-full sl-object-cover", { "sl-grayscale sl-opacity-75": a.disabled }]),
                         onError: Ie
                       }, null, 42, ia)
                     ], 2),
                     u("span", ua, W(he.value), 1),
-                    a.disabled ? D("", !0) : (C(), L(b(We), {
+                    a.disabled ? U("", !0) : (C(), R(b(We), {
                       key: 0,
                       class: "sl-h-4 sl-w-4 sl-text-gray-400",
                       "aria-hidden": "true"
@@ -488,8 +492,8 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
                   _: 1
                 }, 8, ["disabled", "class"])
               ], 512),
-              (C(), L(Be, { to: "body" }, [
-                B(De, {
+              (C(), R(Be, { to: "body" }, [
+                D(De, {
                   "enter-active-class": "sl-transition sl-duration-100 sl-ease-out",
                   "enter-from-class": "sl-transform sl-scale-95 sl-opacity-0",
                   "enter-to-class": "sl-transform sl-scale-100 sl-opacity-100",
@@ -497,19 +501,19 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
                   "leave-from-class": "sl-transform sl-scale-100 sl-opacity-100",
                   "leave-to-class": "sl-transform sl-scale-95 sl-opacity-0"
                 }, {
-                  default: R(() => [
-                    B(b($e), {
+                  default: T(() => [
+                    D(b($e), {
                       ref_key: "dropdownRef",
                       ref: S,
                       style: Ue([be.value, { "z-index": "9999" }]),
                       class: "sl-fixed sl-w-72 sl-rounded-lg sl-bg-white dark:sl-bg-slate-800 sl-text-sm sl-shadow-xl sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none sl-overflow-hidden"
                     }, {
-                      default: R(() => [
+                      default: T(() => [
                         u("div", ca, [
                           Fe(u("input", {
                             ref_key: "searchInputRef",
                             ref: y,
-                            "onUpdate:modelValue": o[0] || (o[0] = (t) => V.value = t),
+                            "onUpdate:modelValue": o[0] || (o[0] = (t) => O.value = t),
                             type: "text",
                             class: "sl-w-full sl-px-3 sl-py-1.5 sl-text-sm sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-rounded-md sl-bg-white dark:sl-bg-slate-700 sl-text-gray-900 dark:sl-text-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-500 focus:sl-border-primary-500",
                             placeholder: "Search countries...",
@@ -518,16 +522,16 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
                             onKeydown: o[2] || (o[2] = Z(() => {
                             }, ["stop"]))
                           }, null, 544), [
-                            [He, V.value]
+                            [He, O.value]
                           ])
                         ]),
                         u("div", ma, [
-                          (C(!0), Y(Ge, null, Ke(re.value, (t) => (C(), L(b(_e), {
+                          (C(!0), Y(Ge, null, Ke(re.value, (t) => (C(), R(b(_e), {
                             key: t.code,
                             value: t,
                             as: "template"
                           }, {
-                            default: R(({ active: d, selected: g }) => [
+                            default: T(({ active: d, selected: g }) => [
                               u("li", {
                                 class: I([
                                   "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
@@ -556,16 +560,16 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
                                     d ? "sl-text-white" : "sl-text-primary-600"
                                   ])
                                 }, [
-                                  B(b(Ze), {
+                                  D(b(Ze), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
-                                ], 2)) : D("", !0)
+                                ], 2)) : U("", !0)
                               ], 2)
                             ]),
                             _: 2
                           }, 1032, ["value"]))), 128)),
-                          re.value.length === 0 ? (C(), Y("li", pa, " No countries found ")) : D("", !0)
+                          re.value.length === 0 ? (C(), Y("li", pa, " No countries found ")) : U("", !0)
                         ])
                       ]),
                       _: 1
@@ -590,7 +594,7 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
             enterkeyhint: "go",
             disabled: a.disabled,
             "aria-describedby": xe.value,
-            "aria-invalid": H.value,
+            "aria-invalid": G.value,
             class: I(["sl-block sl-flex-1 sl-min-w-0 sl-border-0 sl-bg-transparent sl-py-1.5 sl-pl-2 sl-pr-3 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
               a.disabled ? "sl-text-gray-400 dark:sl-text-gray-300 sl-cursor-not-allowed placeholder:sl-text-gray-300 dark:placeholder:sl-text-slate-500" : "sl-text-gray-800 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500"
             ]]),
@@ -602,25 +606,25 @@ const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-b
             "data-testid": "phone-input"
           }, null, 42, Ca),
           Ce.value ? (C(), Y("div", ya, [
-            H.value ? (C(), L(b(Je), {
+            G.value ? (C(), R(b(Je), {
               key: 0,
               class: "sl-h-5 sl-w-5 sl-text-red-500",
               "aria-hidden": "true",
               "data-testid": "error-icon"
-            })) : te.value ? (C(), L(b(Xe), {
+            })) : te.value ? (C(), R(b(Xe), {
               key: 1,
               class: "sl-h-5 sl-w-5 sl-text-green-500",
               "aria-hidden": "true",
               "data-testid": "success-icon"
-            })) : D("", !0)
-          ])) : D("", !0),
+            })) : U("", !0)
+          ])) : U("", !0),
           Me(e.$slots, "input-right", {}, void 0, !0)
         ], 2)
       ]),
       _: 3
     }, 8, ["id", "name", "label", "optional", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "tertiary-label", "disabled", "disabled-message", "colorful-validation"]));
   }
-}), Ra = /* @__PURE__ */ oa(ba, [["__scopeId", "data-v-6ecd71b7"]]);
+}), Ra = /* @__PURE__ */ oa(ba, [["__scopeId", "data-v-a2738bc9"]]);
 export {
   Ra as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stachelock/ui",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "A comprehensive Vue 3 UI component library built with Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",