@leavepulse/ui 0.44.0 → 0.45.1

package/dist/chunks/{LpFormField-CIk5qosh.js → LpFormField-CtVYj6tO.js}

@@ -1,14 +1,17 @@
-import { defineComponent, useId, computed, useSlots, openBlock, createElementBlock, mergeProps, unref, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot, createVNode } from "vue";
+import { defineComponent, useId, computed, useSlots, openBlock, createElementBlock, mergeProps, unref, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, renderSlot, createVNode, normalizeClass } from "vue";
 import { Label } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$1 } from "./LpFieldNotice-wtieLUTj.js";
+import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
 import { fieldMessageId, provideField } from "../composables/useField.js";
+import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
   class: "text-danger"
 };
-const _hoisted_2 = ["id"];
+const _hoisted_2 = { class: "relative" };
 const _hoisted_3 = ["id"];
+const _hoisted_4 = ["id"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -22,23 +25,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     invalid: { type: Boolean },
     disabled: { type: Boolean }
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const generated = useId();
     const id = computed(() => props.id ?? generated);
     const messageId = computed(() => fieldMessageId(id.value));
     const slots = useSlots();
     const hasMessage = computed(() => !!props.error || !!props.hint || !!slots.hint);
+    const notice = useFieldNotice();
+    const noticeId = computed(() => `${id.value}-notice`);
     provideField(
       computed(() => ({
         id: id.value,
         labelId: props.label ? `${id.value}-label` : void 0,
-        describedBy: hasMessage.value ? messageId.value : void 0,
+        describedBy: [hasMessage.value ? messageId.value : "", notice.message.value ? noticeId.value : ""].filter(Boolean).join(" ") || void 0,
         invalid: !!props.invalid || !!props.error,
         required: !!props.required,
-        disabled: !!props.disabled
+        disabled: !!props.disabled,
+        notify: notice.show,
+        clearNotice: notice.clear
       }))
     );
+    __expose({ notify: notice.show, clearNotice: notice.clear });
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex min-w-0 flex-col gap-1.5"
     );
@@ -56,25 +64,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["id", "for"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default", {
-          id: id.value,
-          describedBy: hasMessage.value ? messageId.value : void 0
-        }),
-        createVNode(_sfc_main$1, { axis: "height" }, {
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default", {
+            id: id.value,
+            describedBy: hasMessage.value ? messageId.value : void 0
+          }),
+          createVNode(_sfc_main$1, {
+            notice: unref(notice),
+            id: noticeId.value
+          }, null, 8, ["notice", "id"])
+        ]),
+        createVNode(_sfc_main$2, { axis: "height" }, {
           default: withCtx(() => [
             __props.error ? (openBlock(), createElementBlock("p", {
               key: 0,
               id: messageId.value,
-              class: "pt-1.5 text-xs text-danger"
-            }, toDisplayString(__props.error), 9, _hoisted_2)) : __props.hint || _ctx.$slots.hint ? (openBlock(), createElementBlock("p", {
+              class: normalizeClass(["pt-1.5 text-xs text-danger transition-opacity duration-fast", unref(notice).message.value ? "opacity-0" : ""])
+            }, toDisplayString(__props.error), 11, _hoisted_3)) : __props.hint || _ctx.$slots.hint ? (openBlock(), createElementBlock("p", {
               key: 1,
               id: messageId.value,
-              class: "pt-1.5 text-xs text-muted"
+              class: normalizeClass(["pt-1.5 text-xs text-muted transition-opacity duration-fast", unref(notice).message.value ? "opacity-0" : ""])
             }, [
               renderSlot(_ctx.$slots, "hint", {}, () => [
                 createTextVNode(toDisplayString(__props.hint), 1)
               ])
-            ], 8, _hoisted_3)) : createCommentVNode("", true)
+            ], 10, _hoisted_4)) : createCommentVNode("", true)
           ]),
           _: 3
         })

package/dist/chunks/{LpIcon-CCnX5_2j.js → LpIcon-DYtaid0K.js}

@@ -1,8 +1,8 @@
-import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref } from "vue";
-import { addCollection, getIcon, Icon } from "@iconify/vue";
-import lucide from "@iconify-json/lucide/icons.json";
-addCollection(lucide);
+import { defineComponent, computed, watchEffect, openBlock, createElementBlock, createBlock, unref } from "vue";
+import { getIcon, Icon } from "@iconify/vue";
+import { i as iconsVersion, r as requestIcon } from "./icons-CkA0njzm.js";
 const _hoisted_1 = ["width", "height", "viewBox", "innerHTML"];
+const _hoisted_2 = ["width", "height"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpIcon",
   props: {
@@ -15,7 +15,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return name.includes(":") ? name : `lucide:${name}`;
     }
     const fullName = computed(() => resolve(props.name));
-    const data = computed(() => getIcon(fullName.value));
+    const data = computed(() => {
+      void iconsVersion.value;
+      return getIcon(fullName.value);
+    });
+    const lucide = computed(() => fullName.value.startsWith("lucide:"));
+    watchEffect(() => {
+      if (!data.value && lucide.value) requestIcon(fullName.value);
+    });
     const dim = computed(() => props.size ?? "1em");
     return (_ctx, _cache) => {
       return data.value ? (openBlock(), createElementBlock("svg", {
@@ -26,8 +33,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         viewBox: `0 0 ${data.value.width} ${data.value.height}`,
         "aria-hidden": "true",
         innerHTML: data.value.body
-      }, null, 8, _hoisted_1)) : (openBlock(), createBlock(unref(Icon), {
+      }, null, 8, _hoisted_1)) : lucide.value ? (openBlock(), createElementBlock("svg", {
         key: 1,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: dim.value,
+        height: dim.value,
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true"
+      }, null, 8, _hoisted_2)) : (openBlock(), createBlock(unref(Icon), {
+        key: 2,
         icon: fullName.value,
         width: dim.value,
         height: dim.value,

package/dist/chunks/{LpInput-C0e8y8_d.js → LpInput-D-YGQbEv.js}

@@ -2,9 +2,10 @@ import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBl
 import { tv } from "tailwind-variants";
 import { useFieldControl } from "../composables/useField.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
+import { useInputMask, DEFAULT_MASK_TOKENS } from "../composables/useInputMask.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpFormField-CIk5qosh.js";
-import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpFormField-CtVYj6tO.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-center text-muted"
@@ -27,10 +28,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     icon: {},
     required: { type: Boolean },
     pattern: {},
-    restrict: {}
+    restrict: {},
+    mask: {},
+    maskTokens: {}
   },
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
+  emits: ["update:modelValue", "update:raw"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const shell = tv({
       base: [
         "flex w-full items-center bg-surface-soft text-ink",
@@ -57,10 +60,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const padX = { sm: "px-2.5", md: "px-3", lg: "px-3.5" };
     const props = __props;
+    const emit = __emit;
     const { isInvalid, onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
       pattern: () => props.pattern,
       restrict: () => props.restrict
     });
+    const masking = useInputMask({
+      mask: () => props.mask,
+      tokens: () => props.maskTokens ? { ...DEFAULT_MASK_TOKENS, ...props.maskTokens } : void 0,
+      onChange: (_masked, raw) => emit("update:raw", raw)
+    });
+    const shown = computed(() => masking.active.value ? masking.format(props.modelValue).masked : props.modelValue);
+    function onBefore(event) {
+      onBeforeInput(event);
+      if (!event.defaultPrevented) masking.onBeforeInput(event);
+      if (event.defaultPrevented && masking.active.value && event.target instanceof HTMLInputElement) {
+        emit("update:modelValue", event.target.value);
+      }
+    }
+    function onInputEvent(event) {
+      if (masking.active.value) masking.onInput(event);
+      else filterInput(event);
+      emit("update:modelValue", event.target.value);
+    }
+    function onComposed(event) {
+      if (masking.active.value) {
+        masking.onCompositionEnd(event);
+        emit("update:modelValue", event.target.value);
+      } else onCompositionEnd(event);
+    }
     const patternInvalid = computed(() => isInvalid(props.modelValue));
     const slots = useSlots();
     const attrs = useAttrs();
@@ -101,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         error: hasField.value ? __props.error : void 0,
         required: hasField.value ? __props.required : void 0,
         id: hasField.value ? unref(field).id : void 0,
-        class: normalizeClass(hasField.value ? rootClass.value : void 0),
+        class: normalizeClass(hasField.value ? rootClass.value : "contents"),
         style: normalizeStyle(hasField.value ? rootStyle.value : void 0)
       }, {
         default: withCtx(() => [
@@ -125,7 +153,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, inputAttrs.value, {
               id: unref(field).id,
               type: __props.type,
-              value: __props.modelValue,
+              value: shown.value,
               placeholder: __props.placeholder,
               disabled: unref(field).disabled,
               required: unref(field).required || void 0,
@@ -136,16 +164,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 hasLeading.value ? "pl-2" : padX[__props.size ?? "md"],
                 hasTrailing.value ? "" : padX[__props.size ?? "md"]
               ],
-              onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
-              (...args) => unref(onBeforeInput) && unref(onBeforeInput)(...args)),
-              onPaste: _cache[1] || (_cache[1] = //@ts-ignore
+              onBeforeinput: onBefore,
+              onPaste: _cache[0] || (_cache[0] = //@ts-ignore
               (...args) => unref(onPaste) && unref(onPaste)(...args)),
-              onCompositionend: _cache[2] || (_cache[2] = //@ts-ignore
-              (...args) => unref(onCompositionEnd) && unref(onCompositionEnd)(...args)),
-              onInput: _cache[3] || (_cache[3] = ($event) => {
-                unref(filterInput)($event);
-                _ctx.$emit("update:modelValue", $event.target.value);
-              })
+              onCompositionend: onComposed,
+              onInput: onInputEvent
             }), null, 16, _hoisted_2),
             renderSlot(_ctx.$slots, "trailing")
           ], 6)

package/dist/chunks/{LpLightbox-Mr0W_6HK.js → LpLightbox-DSDahF23.js}

@@ -3,7 +3,7 @@ import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, Di
 import { useLabels } from "../composables/useLpConfig.js";
 import { useZoomPan } from "../composables/useZoomPan.js";
 import { fileNameOf } from "../components/lightbox.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useModalLayer } from "../components/modalDepth.js";
 const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70 [--chrome-from:-8px] animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
 const _hoisted_2 = {