@leavepulse/ui 0.12.0 → 0.14.6

package/dist/chunks/LpNotificationBell-BDy0tQwr.js

@@ -0,0 +1,232 @@
+import { defineComponent, useModel, computed, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createVNode, createTextVNode, mergeModels } from "vue";
+import { _ as _sfc_main$7 } from "./LpBadge-CXzBPnwO.js";
+import { _ as _sfc_main$6 } from "./LpButton-5VXXCjwF.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";
+import { _ as _sfc_main$5 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-K1x-azgY.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" };
+const _hoisted_3 = {
+  key: 0,
+  class: "space-y-1.5 px-2 pb-2"
+};
+const _hoisted_4 = { class: "min-w-0 flex-1" };
+const _hoisted_5 = { class: "flex items-center gap-1.5" };
+const _hoisted_6 = {
+  key: 0,
+  class: "size-1.5 shrink-0 rounded-full bg-brand"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "mt-0.5 line-clamp-2 block text-xs text-muted"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "mt-0.5 block text-[11px] text-muted/70"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpNotificationBell",
+  props: /* @__PURE__ */ mergeModels({
+    items: { default: () => [] },
+    unreadCount: {},
+    loading: { type: Boolean },
+    emptyLabel: {},
+    title: {},
+    maxBadge: { default: 9 },
+    menuItems: {}
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["markRead", "markUnread", "markAllRead", "dismiss", "select"], ["update:open"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const open = useModel(__props, "open");
+    const emit = __emit;
+    const unread = computed(
+      () => props.unreadCount ?? props.items.filter((n) => !n.read).length
+    );
+    const badgeLabel = computed(
+      () => unread.value > props.maxBadge ? `${props.maxBadge}+` : String(unread.value)
+    );
+    const hasUnread = computed(() => unread.value > 0);
+    const contextMenu = computed(
+      () => props.menuItems ?? [
+        {
+          label: "Mark all read",
+          icon: "lucide:check-check",
+          disabled: !hasUnread.value,
+          onSelect: () => emit("markAllRead")
+        }
+      ]
+    );
+    function onSelect(item) {
+      if (!item.read) emit("markRead", item.id);
+      emit("select", item);
+    }
+    function rowMenu(item) {
+      const actions = [];
+      if (item.read) {
+        actions.push({
+          label: "Mark as unread",
+          icon: "lucide:dot",
+          onSelect: () => emit("markUnread", item.id)
+        });
+      } else {
+        actions.push({
+          label: "Mark as read",
+          icon: "lucide:check",
+          onSelect: () => emit("markRead", item.id)
+        });
+      }
+      if (item.link) {
+        actions.push({
+          label: "Open",
+          icon: "lucide:external-link",
+          onSelect: () => emit("select", item)
+        });
+      }
+      actions.push({
+        label: "Dismiss",
+        icon: "lucide:x",
+        danger: true,
+        separatorBefore: true,
+        onSelect: () => emit("dismiss", item.id)
+      });
+      return actions;
+    }
+    function timeAgo(iso) {
+      if (!iso) return "";
+      const then = new Date(iso).getTime();
+      if (Number.isNaN(then)) return "";
+      const secs = Math.max(0, Math.round((Date.now() - then) / 1e3));
+      if (secs < 45) return "just now";
+      const mins = Math.round(secs / 60);
+      if (mins < 60) return `${mins}m`;
+      const hrs = Math.round(mins / 60);
+      if (hrs < 24) return `${hrs}h`;
+      const days = Math.round(hrs / 24);
+      if (days < 7) return `${days}d`;
+      return new Date(then).toLocaleDateString();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        open: open.value,
+        "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+        side: "bottom",
+        align: "end",
+        "side-offset": 8,
+        "panel-class": "w-80 p-0"
+      }, {
+        trigger: withCtx(() => [
+          createVNode(_sfc_main$4, { items: contextMenu.value }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$6, {
+                variant: "ghost",
+                size: "sm",
+                class: "relative",
+                "aria-label": "Notifications",
+                onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$5, {
+                    name: "lucide:bell",
+                    size: 18
+                  }),
+                  hasUnread.value ? (openBlock(), createBlock(_sfc_main$7, {
+                    key: 0,
+                    tone: "danger",
+                    class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(badgeLabel.value), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["items"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("header", _hoisted_1, [
+            createElementVNode("span", _hoisted_2, toDisplayString(__props.title ?? "Notifications"), 1),
+            hasUnread.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("markAllRead"))
+            }, " Mark all read ")) : createCommentVNode("", true)
+          ]),
+          __props.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
+              return createElementVNode("div", {
+                key: i,
+                class: "h-12 animate-pulse rounded-control bg-surface-soft"
+              });
+            }), 64))
+          ])) : !__props.items.length ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            icon: "lucide:bell-off",
+            title: __props.emptyLabel ?? "No notifications",
+            class: "px-3 py-10"
+          }, null, 8, ["title"])) : (openBlock(), createBlock(_sfc_main$3, {
+            key: 2,
+            class: "max-h-96",
+            "content-class": "flex flex-col gap-0.5 px-2 pb-2"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                return openBlock(), createBlock(_sfc_main$4, {
+                  key: item.id,
+                  items: rowMenu(item)
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(), createBlock(resolveDynamicComponent(item.link ? "a" : "button"), {
+                      href: item.link || void 0,
+                      type: item.link ? void 0 : "button",
+                      class: normalizeClass(["group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]", item.read ? "" : "bg-brand-soft/35"]),
+                      onClick: ($event) => onSelect(item)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("span", {
+                          class: normalizeClass(["grid size-7 shrink-0 place-items-center rounded-control", item.read ? "bg-surface-soft text-muted" : "bg-brand-soft text-brand"])
+                        }, [
+                          createVNode(_sfc_main$5, {
+                            name: item.icon || "lucide:bell",
+                            size: 15
+                          }, null, 8, ["name"])
+                        ], 2),
+                        createElementVNode("span", _hoisted_4, [
+                          createElementVNode("span", _hoisted_5, [
+                            createElementVNode("span", {
+                              class: normalizeClass(["truncate text-sm font-medium", item.read ? "text-muted-strong" : "text-ink"])
+                            }, toDisplayString(item.title), 3),
+                            !item.read ? (openBlock(), createElementBlock("span", _hoisted_6)) : createCommentVNode("", true)
+                          ]),
+                          item.body ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.body), 1)) : createCommentVNode("", true),
+                          item.createdAt ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(timeAgo(item.createdAt)), 1)) : createCommentVNode("", true)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["href", "type", "class", "onClick"]))
+                  ]),
+                  _: 2
+                }, 1032, ["items"]);
+              }), 128))
+            ]),
+            _: 1
+          }))
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpNumberField-C5ar-OwE.js

@@ -0,0 +1,55 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from "vue";
+import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpNumberField",
+  props: {
+    modelValue: {},
+    min: {},
+    max: {},
+    step: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NumberFieldRoot), {
+        "model-value": __props.modelValue ?? void 0,
+        min: __props.min,
+        max: __props.max,
+        step: __props.step,
+        disabled: __props.disabled,
+        class: "flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v ?? null))
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(NumberFieldDecrement), { class: "group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:minus",
+                size: 15,
+                class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(unref(NumberFieldInput), { class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" }),
+          createVNode(unref(NumberFieldIncrement), { class: "group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:plus",
+                size: 15,
+                class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["model-value", "min", "max", "step", "disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpOtpInput-DqaT0Z75.js

@@ -0,0 +1,65 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, normalizeClass } from "vue";
+import { PinInputRoot, PinInputInput } from "reka-ui";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpOtpInput",
+  props: {
+    modelValue: {},
+    length: { default: 6 },
+    disabled: { type: Boolean },
+    mask: { type: Boolean },
+    alphanumeric: { type: Boolean, default: false },
+    invalid: { type: Boolean },
+    size: { default: "md" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const cells = computed({
+      get: () => (props.modelValue ?? "").split("").slice(0, props.length),
+      set: (arr) => emit("update:modelValue", arr.join(""))
+    });
+    function onComplete(arr) {
+      emit("complete", arr.join(""));
+    }
+    const cellSize = {
+      sm: "size-9 text-base",
+      md: "size-11 text-lg",
+      lg: "size-13 text-xl"
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PinInputRoot), {
+        modelValue: cells.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => cells.value = $event),
+        type: __props.alphanumeric ? "text" : "number",
+        mask: __props.mask,
+        disabled: __props.disabled,
+        otp: "",
+        class: "flex items-center gap-2",
+        onComplete
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (i) => {
+            return openBlock(), createBlock(unref(PinInputInput), {
+              key: i,
+              index: i - 1,
+              "aria-invalid": __props.invalid || void 0,
+              class: normalizeClass([
+                cellSize[__props.size],
+                "rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand",
+                "outline-none transition-colors duration-[var(--duration-fast)]",
+                "focus:border-brand focus:ring-2 focus:ring-ring",
+                "disabled:cursor-not-allowed disabled:opacity-55",
+                __props.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"
+              ])
+            }, null, 8, ["index", "aria-invalid", "class"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "type", "mask", "disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpPagination-CeGuNe_q.js

@@ -0,0 +1,132 @@
+import { defineComponent, computed, useId, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, Fragment, renderList, createBlock, unref, 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";
+const _hoisted_1 = {
+  class: "flex items-center gap-1.5",
+  "aria-label": "Pagination"
+};
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = {
+  key: 0,
+  class: "flex size-(--size-control-sm) items-center justify-center text-sm text-muted select-none",
+  "aria-hidden": "true"
+};
+const _hoisted_4 = ["disabled", "aria-current", "onClick"];
+const _hoisted_5 = { class: "relative z-10" };
+const _hoisted_6 = ["disabled"];
+const navBase = "relative flex size-(--size-control-sm) items-center justify-center rounded-control text-sm outline-none transition-[color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45 disabled:active:scale-100";
+const navArrow = "border border-line text-muted hover:border-line-strong hover:text-ink disabled:hover:border-line disabled:hover:text-muted";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpPagination",
+  props: {
+    page: { default: 1 },
+    total: {},
+    pageSize: { default: 10 },
+    pageCount: {},
+    siblings: { default: 1 },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:page", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const count = computed(() => {
+      if (props.pageCount != null) return Math.max(1, props.pageCount);
+      if (props.total != null) return Math.max(1, Math.ceil(props.total / props.pageSize));
+      return 1;
+    });
+    const current = computed(() => Math.min(Math.max(1, props.page), count.value));
+    const slots = computed(() => {
+      const c = count.value;
+      const cur = current.value;
+      const inner = props.siblings * 2 + 1;
+      const total = inner + 4;
+      if (c <= total) {
+        return Array.from({ length: c }, (_, i) => ({ kind: "page", page: i + 1 }));
+      }
+      let lo = cur - props.siblings;
+      let hi = cur + props.siblings;
+      if (lo < 3) {
+        hi += 3 - lo;
+        lo = 3;
+      }
+      if (hi > c - 2) {
+        lo -= hi - (c - 2);
+        hi = c - 2;
+      }
+      const out = [{ kind: "page", page: 1 }];
+      out.push(lo > 3 ? { kind: "gap" } : { kind: "page", page: 2 });
+      for (let p = lo; p <= hi; p++) out.push({ kind: "page", page: p });
+      out.push(hi < c - 2 ? { kind: "gap" } : { kind: "page", page: c - 1 });
+      out.push({ kind: "page", page: c });
+      return out;
+    });
+    function go(p) {
+      if (props.disabled) return;
+      const next = Math.min(Math.max(1, p), count.value);
+      if (next === current.value) return;
+      emit("update:page", next);
+      emit("change", next);
+    }
+    const pillId = `lp-page-indicator-${useId()}`;
+    const pillTransition = usePillTransition();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        createElementVNode("button", {
+          type: "button",
+          class: normalizeClass([navBase, navArrow]),
+          disabled: __props.disabled || current.value === 1,
+          "aria-label": "Previous page",
+          onClick: _cache[0] || (_cache[0] = ($event) => go(current.value - 1))
+        }, [
+          createVNode(_sfc_main$1, {
+            name: "lucide:chevron-left",
+            size: 16
+          })
+        ], 10, _hoisted_2),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, i) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: `slot-${i}`
+          }, [
+            slot.kind === "gap" ? (openBlock(), createElementBlock("span", _hoisted_3, "…")) : (openBlock(), createElementBlock("button", {
+              key: 1,
+              type: "button",
+              class: normalizeClass([
+                navBase,
+                "min-w-(--size-control-sm) px-2",
+                slot.page === current.value ? "text-ink-inverse" : "border border-line text-muted hover:border-line-strong hover:text-ink"
+              ]),
+              disabled: __props.disabled,
+              "aria-current": slot.page === current.value ? "page" : void 0,
+              onClick: ($event) => go(slot.page)
+            }, [
+              slot.page === current.value ? (openBlock(), createBlock(unref(Motion), {
+                key: 0,
+                "layout-id": pillId,
+                transition: unref(pillTransition),
+                class: "absolute inset-0 z-0 rounded-control bg-brand"
+              }, null, 8, ["transition"])) : createCommentVNode("", true),
+              createElementVNode("span", _hoisted_5, toDisplayString(slot.page), 1)
+            ], 10, _hoisted_4))
+          ], 64);
+        }), 128)),
+        createElementVNode("button", {
+          type: "button",
+          class: normalizeClass([navBase, navArrow]),
+          disabled: __props.disabled || current.value === count.value,
+          "aria-label": "Next page",
+          onClick: _cache[1] || (_cache[1] = ($event) => go(current.value + 1))
+        }, [
+          createVNode(_sfc_main$1, {
+            name: "lucide:chevron-right",
+            size: 16
+          })
+        ], 10, _hoisted_6)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpPasswordInput-DIHFw4u0.js

@@ -0,0 +1,64 @@
+import { defineComponent, ref, openBlock, createBlock, createSlots, withCtx, createElementVNode, createVNode, renderSlot } from "vue";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpInput-BauZRyzm.js";
+const _hoisted_1 = ["aria-label"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpPasswordInput",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    invalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const visible = ref(false);
+    const inner = ref(null);
+    __expose({
+      focus: (options) => inner.value?.focus(options),
+      blur: () => inner.value?.blur(),
+      select: () => inner.value?.select()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "inner",
+        ref: inner,
+        "model-value": __props.modelValue,
+        type: visible.value ? "text" : "password",
+        placeholder: __props.placeholder,
+        invalid: __props.invalid,
+        disabled: __props.disabled,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
+      }, createSlots({
+        trailing: withCtx(() => [
+          createElementVNode("button", {
+            type: "button",
+            class: "group rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink",
+            "aria-label": visible.value ? "Hide password" : "Show password",
+            onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value)
+          }, [
+            createVNode(_sfc_main$2, {
+              name: visible.value ? "lucide:eye-off" : "lucide:eye",
+              size: 16,
+              class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-90 motion-reduce:group-active:scale-100"
+            }, null, 8, ["name"])
+          ], 8, _hoisted_1)
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.leading ? {
+          name: "leading",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "leading")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["model-value", "type", "placeholder", "invalid", "disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};