@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/LpFieldNotice-wtieLUTj.js

@@ -0,0 +1,64 @@
+import { defineComponent, ref, watch, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "truncate" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpFieldNotice",
+  props: {
+    notice: {},
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const el = ref(null);
+    watch(
+      () => props.notice.seq.value,
+      (_, before) => {
+        if (before === void 0 || !el.value || prefersReducedMotion()) return;
+        el.value.animate(
+          [
+            { transform: "translateX(0)" },
+            { transform: "translateX(-3px)" },
+            { transform: "translateX(3px)" },
+            { transform: "translateX(0)" }
+          ],
+          { duration: 240, easing: "ease-out" }
+        );
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        "enter-active-class": "transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+        "leave-active-class": "transition-[opacity,translate] duration-fast ease-out motion-reduce:transition-none",
+        "enter-from-class": "-translate-y-1 opacity-0",
+        "leave-to-class": "-translate-y-1 opacity-0"
+      }, {
+        default: withCtx(() => [
+          __props.notice.message.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: __props.id,
+            ref_key: "el",
+            ref: el,
+            role: "status",
+            class: normalizeClass([
+              "pointer-events-none absolute top-full left-0 z-20 mt-1.5 flex max-w-full items-center gap-1.5 rounded-control border px-2 py-1 text-xs shadow-sm",
+              __props.notice.tone.value === "danger" ? "border-danger/40 bg-surface-raised bg-[linear-gradient(var(--color-danger-soft),var(--color-danger-soft))] text-danger" : "border-line bg-surface-raised text-ink"
+            ])
+          }, [
+            createVNode(_sfc_main$1, {
+              name: __props.notice.tone.value === "danger" ? "lucide:circle-alert" : "lucide:info",
+              size: 13,
+              class: normalizeClass(["shrink-0", __props.notice.tone.value === "danger" ? "" : "text-muted"])
+            }, null, 8, ["name", "class"]),
+            createElementVNode("span", _hoisted_2, toDisplayString(__props.notice.message.value), 1)
+          ], 10, _hoisted_1)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpFileTree-_5vFBgaK.js → LpFileTree-CNurOvkV.js}

@@ -1,9 +1,10 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { computeStats, formatSize, sortNodes, subtreeIds, ancestorIds } from "../components/fileTree.js";
-import { _ as _sfc_main$1 } from "./LpEmptyState-Dsdqz1Wj.js";
-import { _ as _sfc_main$3 } from "./LpFileTreeNode-BdcIYKIE.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
+import { _ as _sfc_main$1 } from "./LpEmptyState-BJbZXC8D.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-D_qRRdsH.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Bry1fdOM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = {
   key: 2,
   class: "flex h-full w-full min-w-0 flex-col"
@@ -30,8 +31,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     iconSize: { default: 15 },
     loading: { type: Boolean, default: false },
     skeletonRows: { default: 8 },
-    emptyLabel: { default: "No files" },
-    emptyDescription: { default: "This folder is empty." }
+    emptyLabel: {},
+    emptyDescription: {},
+    labels: {}
   },
   emits: ["update:selected", "update:expanded", "select", "open", "expand", "collapse", "update:checked", "summary"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -44,6 +46,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (ids) openIds.value = new Set(ids);
       }
     );
+    const text = useLabels(
+      "fileTree",
+      {
+        empty: "No files",
+        emptyDescription: "This folder is empty.",
+        file: "file",
+        files: "files",
+        folder: "folder",
+        folders: "folders"
+      },
+      () => props.labels
+    );
     const loadingSet = computed(() => new Set(props.loadingIds ?? []));
     const checkedIds = ref(new Set(props.checked ?? []));
     watch(
@@ -110,7 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         sizeLabel: sized ? formatSize(bytes) : "—"
       };
     });
-    watch(summary, (value) => emit("summary", value), { deep: false });
+    watch(summary, (value) => emit("summary", value), { immediate: true });
     function setChecked(next) {
       checkedIds.value = next;
       emit("update:checked", [...next]);
@@ -200,6 +214,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function collapse(node) {
       if (!openIds.value.has(node.id)) return;
+      if (node.children === void 0 && !loadingSet.value.has(node.id)) requested.delete(node.id);
       const next = new Set(openIds.value);
       next.delete(node.id);
       setExpanded(next);
@@ -333,8 +348,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ], 16)) : !roots.value.length ? (openBlock(), createBlock(_sfc_main$1, {
         key: 1,
         icon: "lucide:folder-search",
-        title: __props.emptyLabel,
-        description: __props.emptyDescription
+        title: __props.emptyLabel ?? unref(text).empty,
+        description: __props.emptyDescription ?? unref(text).emptyDescription
       }, null, 8, ["title", "description"])) : (openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$2, { class: "min-h-0 w-full min-w-0 flex-1" }, {
           default: withCtx(() => [
@@ -379,9 +394,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }),
         __props.checkable && (_ctx.$slots.summary || summary.value.files || summary.value.dirs) ? (openBlock(), createElementBlock("div", _hoisted_3, [
           renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps(summary.value)), () => [
-            createTextVNode(toDisplayString(summary.value.files) + " " + toDisplayString(summary.value.files === 1 ? "file" : "files"), 1),
+            createTextVNode(toDisplayString(summary.value.files) + " " + toDisplayString(summary.value.files === 1 ? unref(text).file : unref(text).files), 1),
             summary.value.dirs ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              createTextVNode(", " + toDisplayString(summary.value.dirs) + " " + toDisplayString(summary.value.dirs === 1 ? "folder" : "folders"), 1)
+              createTextVNode(", " + toDisplayString(summary.value.dirs) + " " + toDisplayString(summary.value.dirs === 1 ? unref(text).folder : unref(text).folders), 1)
             ], 64)) : createCommentVNode("", true),
             summary.value.bytes !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               createTextVNode(" · " + toDisplayString(summary.value.sizeLabel), 1)

package/dist/chunks/{LpFileTreeNode-BdcIYKIE.js → LpFileTreeNode-D_qRRdsH.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, withModifiers, normalizeStyle, normalizeClass, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, Transition, Fragment, renderList } from "vue";
 import { prefersReducedMotion, easingToken } from "../composables/easing.js";
 import { sortNodes, formatSize, formatModified, fileIcon } from "../components/fileTree.js";
-import { _ as _sfc_main$3 } from "./LpCheckbox-CVccKYaH.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$3 } from "./LpCheckbox-Bkj13CbW.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["aria-level", "aria-selected", "aria-expanded", "aria-disabled"];
 const _hoisted_2 = ["data-node-id", "tabindex"];

package/dist/chunks/LpFormField-CtVYj6tO.js

@@ -0,0 +1,101 @@
+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 "./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 = { class: "relative" };
+const _hoisted_3 = ["id"];
+const _hoisted_4 = ["id"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpFormField",
+  props: {
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean },
+    id: {},
+    invalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  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 : "", notice.message.value ? noticeId.value : ""].filter(Boolean).join(" ") || void 0,
+        invalid: !!props.invalid || !!props.error,
+        required: !!props.required,
+        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"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        __props.label ? (openBlock(), createBlock(unref(Label), {
+          key: 0,
+          id: `${id.value}-label`,
+          for: id.value,
+          class: "text-sm font-medium text-ink"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.label) + " ", 1),
+            __props.required ? (openBlock(), createElementBlock("span", _hoisted_1, "*")) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["id", "for"])) : createCommentVNode("", true),
+        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: 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: 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)
+              ])
+            ], 10, _hoisted_4)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        })
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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-9EXWUM9B.js → LpInput-D-YGQbEv.js}

@@ -1,14 +1,16 @@
-import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementVNode, unref, createElementBlock, renderSlot, createCommentVNode, mergeProps } from "vue";
+import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps } from "vue";
 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-CazBc2-a.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"
 };
-const _hoisted_2 = ["type", "value", "placeholder", "disabled", "required", "aria-invalid"];
+const _hoisted_2 = ["id", "type", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -26,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",
@@ -56,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 { isInvalid, onBeforeInput, onPaste } = useInputFilter({
+    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();
@@ -68,9 +97,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasField = computed(
       () => !!props.label || !!props.hint || !!props.error
     );
-    const isInvalidState = computed(
-      () => props.invalid || !!props.error || patternInvalid.value
-    );
+    const field = useFieldControl(() => ({
+      wrapped: hasField.value,
+      hasMessage: !!props.error || !!props.hint,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid || !!props.error || patternInvalid.value,
+      required: props.required,
+      disabled: props.disabled
+    }));
+    const isInvalidState = computed(() => field.value.invalid);
     const shellClass = computed(
       () => shell({ size: props.size, invalid: isInvalidState.value })
     );
@@ -93,7 +128,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         hint: hasField.value ? __props.hint : void 0,
         error: hasField.value ? __props.error : void 0,
         required: hasField.value ? __props.required : void 0,
-        class: normalizeClass(hasField.value ? rootClass.value : void 0),
+        id: hasField.value ? unref(field).id : void 0,
+        class: normalizeClass(hasField.value ? rootClass.value : "contents"),
         style: normalizeStyle(hasField.value ? rootStyle.value : void 0)
       }, {
         default: withCtx(() => [
@@ -115,28 +151,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref_key: "inputEl",
               ref: inputEl
             }, inputAttrs.value, {
+              id: unref(field).id,
               type: __props.type,
-              value: __props.modelValue,
+              value: shown.value,
               placeholder: __props.placeholder,
-              disabled: __props.disabled,
-              required: __props.required || void 0,
+              disabled: unref(field).disabled,
+              required: unref(field).required || void 0,
               "aria-invalid": isInvalidState.value || void 0,
+              "aria-describedby": unref(field).describedBy,
               class: [
                 "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
                 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)),
-              onInput: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+              onCompositionend: onComposed,
+              onInput: onInputEvent
             }), null, 16, _hoisted_2),
             renderSlot(_ctx.$slots, "trailing")
           ], 6)
         ]),
         _: 3
-      }, 8, ["label", "hint", "error", "required", "class", "style"]);
+      }, 8, ["label", "hint", "error", "required", "id", "class", "style"]);
     };
   }
 });