@leavepulse/ui 0.44.0 → 0.45.1

package/dist/chunks/{LpNotificationBell-t5yn-siX.js → LpNotificationBell-CCwyJP5C.js}

@@ -1,12 +1,13 @@
-import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createTextVNode, mergeModels } from "vue";
+import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, Transition, mergeModels } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$8 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$7 } from "./LpButton-kqJBHIIb.js";
-import { _ as _sfc_main$5 } from "./LpContextMenu-DQw5dGfG.js";
-import { _ as _sfc_main$3 } from "./LpEmptyState-Dsdqz1Wj.js";
-import { _ as _sfc_main$6 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpPopover-p_e_shN3.js";
-import { _ as _sfc_main$4 } from "./LpScrollArea-D8xyKXcF.js";
+import { _ as _sfc_main$7 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$5 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$3 } from "./LpEmptyState-BJbZXC8D.js";
+import { _ as _sfc_main$6 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$1 } from "./LpPopover-DCKeqiVn.js";
+import { _ as _sfc_main$9 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-Bry1fdOM.js";
 import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
@@ -202,17 +203,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     name: "lucide:bell",
                     size: 18
                   }),
-                  hasUnread.value ? (openBlock(), createBlock(_sfc_main$8, {
-                    key: 0,
-                    "aria-hidden": "true",
-                    tone: "danger",
-                    class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+                  createVNode(Transition, {
+                    "enter-active-class": "animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none",
+                    "leave-active-class": "animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(badgeLabel.value), 1)
+                      hasUnread.value ? (openBlock(), createBlock(_sfc_main$8, {
+                        key: 0,
+                        "aria-hidden": "true",
+                        tone: "danger",
+                        class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$9, {
+                            value: badgeLabel.value,
+                            duration: 220
+                          }, null, 8, ["value"])
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
                     ]),
                     _: 1
-                  })) : createCommentVNode("", true)
+                  })
                 ]),
                 _: 1
               }, 8, ["aria-label"])

package/dist/chunks/{LpNumberField-DWnQKktS.js → LpNumberField-B77O-z28.js}

@@ -1,6 +1,6 @@
 import { defineComponent, useId, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["id"];

package/dist/chunks/{LpPagination-DFngX7Xo.js → LpPagination-BcDlo3r_.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, createVNode, Fragment, renderList, createBlock, createCommentVNode, toDisplayString } from "vue";
 import { Motion } from "motion-v";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = ["aria-label"];

package/dist/chunks/{LpPasswordInput-CWVDuBJ5.js → LpPasswordInput-eKzQhbQP.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, unref, createVNode, renderSlot } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpInput-C0e8y8_d.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$1 } from "./LpInput-D-YGQbEv.js";
 const _hoisted_1 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpPhoneInput-CD-ZTeSd.js → LpPhoneInput-BCbrrhgE.js}

@@ -1,11 +1,14 @@
-import { defineComponent, ref, computed, onMounted, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, createTextVNode, Fragment, renderList, createBlock, withModifiers, mergeProps } from "vue";
+import { defineComponent, ref, computed, shallowRef, onMounted, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, createTextVNode, Fragment, renderList, createBlock, withModifiers, mergeProps, createCommentVNode } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useField, useFieldControl } from "../composables/useField.js";
+import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { matchCountryByValue, filterCountries, loadCountries, flagEmoji } from "../components/countries.js";
 import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$2 } from "./LpFieldNotice-wtieLUTj.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { loadPhoneLib, formatPhone, loadPhoneExamples, digitsBefore, caretAfterDigits, digitsOf } from "../components/phone.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "text-base leading-none" };
 const _hoisted_2 = { class: "border-b border-line p-2" };
@@ -21,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     modelValue: {},
     only: {},
     defaultCountry: {},
-    placeholder: { default: "Phone number" },
+    placeholder: { default: void 0 },
     disabled: { type: Boolean },
     invalid: { type: Boolean },
     size: { default: "md" },
@@ -52,21 +55,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const open = ref(false);
     const query = ref("");
     const filtered = computed(() => filterCountries(countries.value, query.value));
+    const phoneLib = shallowRef();
     function parse(value) {
-      const country = matchCountryByValue(value, countries.value);
-      const digits = value.replace(/[^\d]/g, "");
-      if (country) {
-        return { country, dialCode: country.dial, number: digits.slice(country.dial.length) };
-      }
-      return { country: void 0, dialCode: "", number: digits };
+      const formatted = formatPhone(value, phoneLib.value);
+      const country = (formatted.country && countries.value.find((c) => c.iso2 === formatted.country)) ?? matchCountryByValue(value, countries.value);
+      const digits = digitsOf(formatted.e164);
+      const base = { e164: formatted.e164, possible: formatted.possible, valid: formatted.valid, type: formatted.type };
+      if (country) return { ...base, country, dialCode: country.dial, number: digits.slice(country.dial.length) };
+      return { ...base, country: void 0, dialCode: "", number: digits };
     }
     function setValue(value) {
       emit("update:modelValue", value);
       emit("change", parse(value));
     }
+    const notice = useFieldNotice();
+    const outerField = useField();
+    const ownNotice = computed(() => !outerField?.value.notify);
+    function say(message, options) {
+      if (outerField?.value.notify) outerField.value.notify(message, options);
+      else notice.show(message, options);
+    }
+    function unsay() {
+      if (outerField?.value.clearNotice) outerField.value.clearNotice();
+      else notice.clear();
+    }
+    const flagged = ref(false);
+    const countryName = (iso) => iso && countries.value.find((c) => c.iso2 === iso)?.name || "";
     function onInput(e) {
       filterInput(e);
-      setValue(e.target.value);
+      const el = e.target;
+      const before = digitsBefore(el.value, el.selectionStart ?? el.value.length);
+      const result = formatPhone(el.value, phoneLib.value);
+      if (el.value !== result.display) {
+        el.value = result.display;
+        const caret = caretAfterDigits(result.display, Math.min(before, digitsOf(result.display).length));
+        el.setSelectionRange(caret, caret);
+      }
+      if (flagged.value) {
+        flagged.value = false;
+        unsay();
+      }
+      if (result.dropped) {
+        const name = countryName(result.country);
+        say(
+          (name ? text.value.tooLongFor : text.value.tooLong).replace("{country}", name).replace("{max}", String(digitsOf(result.e164).length - (result.callingCode?.length ?? 0)))
+        );
+      }
+      setValue(result.display);
+    }
+    function onKeyEdit(e) {
+      const el = e.target;
+      const start = el.selectionStart ?? 0;
+      const end = el.selectionEnd ?? 0;
+      const backward = e.inputType === "deleteContentBackward";
+      const forward = e.inputType === "deleteContentForward";
+      if (!backward && !forward || start !== end) return;
+      const value = el.value;
+      const at = backward ? start - 1 : start;
+      if (at < 0 || at >= value.length || /\d/.test(value[at])) return;
+      let i = at;
+      while (i >= 0 && i < value.length && !/\d/.test(value[i])) i += backward ? -1 : 1;
+      if (i < 0 || i >= value.length) return;
+      e.preventDefault();
+      el.value = value.slice(0, i) + value.slice(i + 1);
+      const caret = backward ? i : start;
+      el.setSelectionRange(caret, caret);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    function onBeforeEdit(e) {
+      onKeyEdit(e);
+      if (!e.defaultPrevented) onBeforeInput(e);
     }
     function chooseCountry(c) {
       const detail = parse(props.modelValue ?? "");
@@ -76,14 +134,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       query.value = "";
     }
     onMounted(async () => {
-      allCountries.value = await loadCountries();
+      const [list, phone] = await Promise.all([loadCountries(), loadPhoneLib().catch(() => void 0)]);
+      allCountries.value = list;
+      phoneLib.value = phone;
+      if (phone && props.modelValue) {
+        const display = formatPhone(props.modelValue, phone).display;
+        if (display !== props.modelValue) setValue(display);
+      }
+      if (props.placeholder === void 0) examplesFor.value = await loadPhoneExamples().catch(() => void 0);
+    });
+    const examplesFor = shallowRef();
+    const shownPlaceholder = computed(() => {
+      if (props.placeholder !== void 0) return props.placeholder;
+      const phone = phoneLib.value;
+      const iso = activeCountry.value?.iso2;
+      if (phone && examplesFor.value && iso) {
+        try {
+          return phone.getExampleNumber(iso, examplesFor.value)?.formatInternational() ?? text.value.placeholder;
+        } catch {
+          return text.value.placeholder;
+        }
+      }
+      return text.value.placeholder;
     });
     const seeded = computed(() => fallback.value ? `+${fallback.value.dial} ` : "");
     function onFocus() {
       if (!props.modelValue && seeded.value) setValue(seeded.value);
     }
     function onBlur() {
-      if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) setValue("");
+      if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) {
+        setValue("");
+        return;
+      }
+      const result = phoneLib.value && props.modelValue ? formatPhone(props.modelValue, phoneLib.value) : void 0;
+      if (!result || result.valid || digitsOf(result.e164).length <= (activeCountry.value?.dial.length ?? 0)) return;
+      flagged.value = true;
+      const name = countryName(result.country) || activeCountry.value?.name || "";
+      const reason = result.problem === "too-short" ? name ? text.value.tooShortFor : text.value.tooShort : result.problem === "invalid-country" ? text.value.unknownCountry : text.value.invalidNumber;
+      say(reason.replace("{country}", name), { tone: "danger", duration: 0 });
     }
     const sizeClass = {
       sm: "h-(--size-control-sm) text-xs",
@@ -94,13 +182,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const field = useFieldControl(() => ({
       wrapped: false,
       id: typeof attrs.id === "string" ? attrs.id : void 0,
-      invalid: props.invalid,
+      invalid: props.invalid || flagged.value,
       disabled: props.disabled
     }));
-    const text = useLabels("phoneInput", { selectCountry: "Select country" });
+    const text = useLabels("phoneInput", {
+      selectCountry: "Select country",
+      placeholder: "Phone number",
+      tooLong: "A phone number has at most {max} digits",
+      tooLongFor: "Numbers in {country} have at most {max} digits after the code",
+      tooShort: "This number is too short",
+      tooShortFor: "Too short for {country}",
+      invalidNumber: "Not a valid phone number",
+      unknownCountry: "Unknown country code"
+    });
+    const noticeId = `${field.value.id ?? "lp-phone"}-notice`;
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
-        "flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
+        "relative flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
         sizeClass[props.size],
         field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
         field.value.disabled ? "cursor-not-allowed opacity-55" : ""
@@ -150,6 +248,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(ComboboxPortal), null, {
               default: withCtx(() => [
                 createVNode(unref(ComboboxContent), {
+                  "collision-padding": 8,
                   position: "popper",
                   align: "start",
                   "side-offset": 6,
@@ -208,22 +307,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, inputAttrs.value, {
           id: unref(field).id,
           value: __props.modelValue,
-          placeholder: __props.placeholder,
+          placeholder: shownPlaceholder.value,
           disabled: unref(field).disabled,
           required: unref(field).required || void 0,
           "aria-invalid": unref(field).invalid || void 0,
-          "aria-describedby": unref(field).describedBy,
+          "aria-describedby": [unref(field).describedBy, unref(notice).message.value ? noticeId : ""].filter(Boolean).join(" ") || void 0,
           class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted",
-          onBeforeinput: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => unref(onBeforeInput) && unref(onBeforeInput)(...args)),
-          onPaste: _cache[3] || (_cache[3] = //@ts-ignore
+          onBeforeinput: onBeforeEdit,
+          onPaste: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => unref(onPaste) && unref(onPaste)(...args)),
-          onCompositionend: _cache[4] || (_cache[4] = //@ts-ignore
+          onCompositionend: _cache[3] || (_cache[3] = //@ts-ignore
           (...args) => unref(onCompositionEnd) && unref(onCompositionEnd)(...args)),
           onInput,
           onFocus,
           onBlur
-        }), null, 16, _hoisted_6)
+        }), null, 16, _hoisted_6),
+        ownNotice.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          notice: unref(notice),
+          id: noticeId
+        }, null, 8, ["notice"])) : createCommentVNode("", true)
       ], 6);
     };
   }

package/dist/chunks/{LpPie-BLco31Nx.js → LpPie-BEJ2SfI6.js}

@@ -2,12 +2,12 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { useReveal } from "../composables/useReveal.js";
 import { resolveSlices, arcPath, calloutLabels, formatTick } from "../components/chart.js";
-import { _ as _sfc_main$2 } from "./LpContextMenu-DQw5dGfG.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$2 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$4 } from "./LpNumberFlow-z4WPZcZu.js";
-import { _ as _sfc_main$5 } from "./LpRollingText-CM5gkSeF.js";
+import { _ as _sfc_main$5 } from "./LpRollingText-DB7upf-5.js";
 import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$3 } from "./LpTooltip-CBdzeKNf.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-CXVKcOXT.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = {
@@ -25,7 +25,7 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "text-xs" };
 const _hoisted_5 = { class: "flex flex-wrap items-start gap-x-6 gap-y-3" };
 const _hoisted_6 = { class: "flex items-center gap-1.5" };
-const _hoisted_7 = ["width", "height", "aria-label"];
+const _hoisted_7 = ["viewBox", "aria-label"];
 const _hoisted_8 = { key: 0 };
 const _hoisted_9 = ["id"];
 const _hoisted_10 = ["d"];
@@ -434,13 +434,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 default: withCtx(() => [
                   createElementVNode("div", {
-                    class: "relative shrink-0",
-                    style: normalizeStyle({ width: `${canvasWidth.value}px`, height: `${canvasHeight.value}px` })
+                    class: "relative max-w-full shrink-0 max-sm:mx-auto",
+                    style: normalizeStyle({ width: `${canvasWidth.value}px`, aspectRatio: `${canvasWidth.value} / ${canvasHeight.value}` })
                   }, [
                     (openBlock(), createElementBlock("svg", {
-                      width: canvasWidth.value,
-                      height: canvasHeight.value,
-                      class: "touch-none select-none",
+                      viewBox: `0 0 ${canvasWidth.value} ${canvasHeight.value}`,
+                      class: "block size-full touch-none select-none",
                       role: "img",
                       "aria-label": summary.value,
                       onPointerleave: leaveChart,

package/dist/chunks/{LpPopover-p_e_shN3.js → LpPopover-DCKeqiVn.js}

@@ -31,6 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(PopoverPortal), null, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), {
+                "collision-padding": 8,
                 side: __props.side,
                 align: __props.align,
                 "side-offset": __props.sideOffset,