@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/LpQuota-DaL8TgNe.js

@@ -0,0 +1,162 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createVNode, Fragment, renderList, normalizeStyle } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useLocale } from "../composables/useLocale.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useRevealedValue } from "../composables/useRevealedValue.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpNumberFlow-Cfyh033Q.js";
+import { _ as _sfc_main$3 } from "./LpRollingText-DiL717LK.js";
+import { METER_HEADER, METER_TRACK } from "../components/meter.js";
+import { quotaState, quotaSegments, formatAmount } from "../components/quota.js";
+import { toneLook } from "../components/tone.js";
+const _hoisted_1 = ["role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "truncate text-ink"
+};
+const _hoisted_3 = { class: "ml-auto shrink-0 font-mono text-xs tabular-nums text-muted" };
+const _hoisted_4 = { class: "flex h-full w-full gap-px overflow-hidden rounded-pill" };
+const _hoisted_5 = {
+  key: 1,
+  class: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted"
+};
+const _hoisted_6 = { class: "font-mono tabular-nums text-muted-strong" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpQuota",
+  props: {
+    used: {},
+    limit: { default: null },
+    label: {},
+    unit: {},
+    parts: {},
+    warnAt: { default: 0.8 },
+    dangerAt: { default: 0.9 },
+    hideLegend: { type: Boolean, default: false },
+    animateOnMount: { type: Boolean, default: true },
+    locale: {},
+    labels: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const text = useLabels(
+      "quota",
+      {
+        left: "{amount} left",
+        over: "{amount} over the limit",
+        unlimited: "No limit",
+        reading: "{used} of {limit} used"
+      },
+      () => props.labels
+    );
+    const locale = useLocale(() => props.locale);
+    const state = computed(() => quotaState(props.used, props.limit, props.warnAt, props.dangerAt));
+    const look = computed(() => toneLook(state.value.tone));
+    const fmt = (v) => formatAmount(v, props.unit, locale.value);
+    const layout = computed(
+      () => quotaSegments(
+        props.parts?.length ? props.parts : [{ label: props.label ?? "", value: props.used, color: look.value.color }],
+        props.limit
+      )
+    );
+    const { el: revealAnchor, revealed, target: shownUsed } = useRevealedValue(() => props.used, {
+      animateOnMount: () => props.animateOnMount
+    });
+    const footer = computed(() => {
+      const s = state.value;
+      if (!s.limited) return text.value.unlimited;
+      if (s.over > 0) return text.value.over.replace("{amount}", fmt(s.over));
+      return text.value.left.replace("{amount}", fmt(s.remaining));
+    });
+    const valueText = computed(
+      () => state.value.limited ? `${text.value.reading.replace("{used}", fmt(props.used)).replace("{limit}", fmt(props.limit))}, ${footer.value}` : `${fmt(props.used)}, ${text.value.unlimited}`
+    );
+    const readingTone = computed(() => state.value.tone === "ok" ? "text-ink" : look.value.text);
+    const { class: rootClass, attrs: rest } = useMergedAttrs("flex w-full flex-col gap-1.5");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref: (el) => revealAnchor.value = el,
+        role: state.value.limited ? "meter" : "group",
+        "aria-valuenow": state.value.limited ? __props.used : void 0,
+        "aria-valuemin": state.value.limited ? 0 : void 0,
+        "aria-valuemax": state.value.limited ? __props.limit : void 0,
+        "aria-valuetext": state.value.limited ? valueText.value : void 0,
+        "aria-label": __props.label,
+        class: unref(rootClass)
+      }, unref(rest)), [
+        createElementVNode("div", {
+          class: normalizeClass([unref(METER_HEADER), "gap-3 text-sm"])
+        }, [
+          __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_3, [
+            createVNode(_sfc_main$1, {
+              value: unref(shownUsed),
+              format: fmt,
+              "animate-on-mount": false,
+              class: normalizeClass(["transition-colors duration-(--duration-medium)", readingTone.value])
+            }, null, 8, ["value", "class"]),
+            state.value.limited ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[0] || (_cache[0] = createElementVNode("span", { class: "px-1" }, "/", -1)),
+              createVNode(_sfc_main$1, {
+                value: __props.limit,
+                format: fmt,
+                "animate-on-mount": false
+              }, null, 8, ["value"])
+            ], 64)) : createCommentVNode("", true)
+          ])
+        ], 2),
+        state.value.limited || __props.parts?.length ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["relative", unref(METER_TRACK)]),
+          "aria-hidden": "true"
+        }, [
+          createElementVNode("div", _hoisted_4, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.segments, (seg) => {
+              return openBlock(), createElementBlock("span", {
+                key: seg.label,
+                class: "h-full shrink-0 transition-[width,background-color] duration-700 ease-(--ease-emphasized) motion-reduce:transition-none",
+                style: normalizeStyle({ width: unref(revealed) ? `${seg.share * 100}%` : "0%", backgroundColor: seg.color })
+              }, null, 4);
+            }), 128))
+          ]),
+          createElementVNode("span", {
+            class: "absolute -inset-y-1 w-0.5 -translate-x-1/2 rounded-pill bg-ink transition-[left,opacity] duration-700 ease-(--ease-emphasized) motion-reduce:transition-none",
+            style: normalizeStyle({ left: `${(layout.value.limitAt ?? 1) * 100}%`, opacity: layout.value.limitAt != null && unref(revealed) ? 1 : 0 })
+          }, null, 4)
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["flex items-center gap-1 text-xs transition-colors duration-(--duration-medium)", state.value.over > 0 ? look.value.text : "text-muted"])
+        }, [
+          createVNode(_sfc_main$2, {
+            name: "lucide:triangle-alert",
+            size: 12,
+            class: normalizeClass(["shrink-0 transition-[opacity,width] duration-(--duration-medium)", state.value.over > 0 ? "w-3 opacity-100" : "w-0 opacity-0"])
+          }, null, 8, ["class"]),
+          createVNode(_sfc_main$3, {
+            value: footer.value,
+            align: "start"
+          }, null, 8, ["value"])
+        ], 2),
+        __props.parts?.length && !__props.hideLegend ? (openBlock(), createElementBlock("ul", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.segments, (seg) => {
+            return openBlock(), createElementBlock("li", {
+              key: seg.label,
+              class: "flex items-center gap-1.5"
+            }, [
+              createElementVNode("span", {
+                class: "size-2 shrink-0 rounded-full",
+                style: normalizeStyle({ backgroundColor: seg.color })
+              }, null, 4),
+              createElementVNode("span", null, toDisplayString(seg.label), 1),
+              createElementVNode("span", _hoisted_6, toDisplayString(fmt(seg.value)), 1)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpRadioGroup-8S5hf8lE.js → LpRadioGroup-CGBr5nIp.js}

@@ -2,7 +2,7 @@ import { defineComponent, useId, openBlock, createBlock, unref, mergeProps, with
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = {
   key: 1,
   class: "flex min-w-0 flex-col"

package/dist/chunks/{LpRangeCalendar-ByQi-WUz.js → LpRangeCalendar-c5qj7YcC.js}

@@ -5,7 +5,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { CALENDAR_LABELS, CALENDAR_NAV, CALENDAR_FRAME } from "../components/calendar.js";
 import { normalizeRange, parseIsoDay, reshapeRange } from "../components/dateRange.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = { class: "flex gap-4" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpRangeSlider-C1yF9-nP.js → LpRangeSlider-Dv6lNvHY.js}

@@ -2,6 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, cr
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useSliderDrag, SLIDER_GLIDE } from "../components/slider.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -33,8 +34,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55"
+      `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`
     );
+    const { dragging, onPointerDown } = useSliderDrag();
     const thumbClass = "group/thumb relative block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100";
     const labelClass = "pointer-events-none absolute bottom-full left-1/2 mb-1.5 -translate-x-1/2 translate-y-0.5 rounded-control bg-surface-raised px-1.5 py-0.5 text-[11px] whitespace-nowrap text-ink tabular-nums opacity-0 shadow-sm transition-[opacity,translate] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-hover/thumb:translate-y-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:translate-y-0 group-focus-visible/thumb:opacity-100 group-active/thumb:translate-y-0 group-active/thumb:opacity-100 motion-reduce:transition-none";
     return (_ctx, _cache) => {
@@ -47,6 +49,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: unref(field).disabled,
         class: unref(rootClass)
       }, unref(rest), {
+        "data-dragging": unref(dragging) || void 0,
+        onPointerdown: unref(onPointerDown),
         "onUpdate:modelValue": onUpdate,
         onValueCommit: onCommit
       }), {
@@ -77,7 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 64))
         ]),
         _: 1
-      }, 16, ["model-value", "min", "max", "step", "min-steps-between-thumbs", "disabled", "class"]);
+      }, 16, ["model-value", "min", "max", "step", "min-steps-between-thumbs", "disabled", "class", "data-dragging", "onPointerdown"]);
     };
   }
 });

package/dist/chunks/LpRelativeTime-yin9uQP7.js

@@ -0,0 +1,73 @@
+import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, mergeProps, unref, createVNode, createElementBlock } from "vue";
+import { useLocale } from "../composables/useLocale.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useNow } from "../composables/useNow.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DiL717LK.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-Cz8SQwRt.js";
+import { formatRelativeTime } from "../components/relativeTime.js";
+import { toEpoch } from "../components/timeSpan.js";
+const _hoisted_1 = ["datetime"];
+const _hoisted_2 = ["datetime", "title"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpRelativeTime",
+  props: {
+    date: {},
+    format: { default: "long" },
+    nowWithin: { default: 45e3 },
+    tooltip: { type: Boolean, default: true },
+    absolute: {},
+    locale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const locale = useLocale(() => props.locale);
+    const at = computed(() => toEpoch(props.date));
+    const options = computed(() => ({ locale: locale.value, style: props.format, nowWithin: props.nowWithin }));
+    const now = useNow(true, {
+      nextIn: (t) => formatRelativeTime(at.value, t, options.value).refreshIn,
+      restartOn: () => [at.value, locale.value, props.format, props.nowWithin]
+    });
+    const reading = computed(() => formatRelativeTime(at.value, now.value, options.value));
+    const exact = computed(() => {
+      if (!Number.isFinite(at.value)) return "";
+      return new Intl.DateTimeFormat(locale.value, props.absolute ?? { dateStyle: "full", timeStyle: "short" }).format(at.value);
+    });
+    const iso = computed(() => Number.isFinite(at.value) ? new Date(at.value).toISOString() : void 0);
+    const { class: rootClass, attrs: rest } = useMergedAttrs("inline-flex whitespace-nowrap tabular-nums");
+    return (_ctx, _cache) => {
+      return __props.tooltip && exact.value ? (openBlock(), createBlock(_sfc_main$1, {
+        key: 0,
+        content: exact.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("time", mergeProps({
+            datetime: iso.value,
+            tabindex: "0",
+            class: [unref(rootClass), "rounded-[3px] outline-none focus-visible:ring-2 focus-visible:ring-ring"]
+          }, unref(rest)), [
+            createVNode(_sfc_main$2, {
+              value: reading.value.text,
+              align: "start"
+            }, null, 8, ["value"])
+          ], 16, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["content"])) : (openBlock(), createElementBlock("time", mergeProps({
+        key: 1,
+        datetime: iso.value,
+        title: exact.value || void 0,
+        class: unref(rootClass)
+      }, unref(rest)), [
+        createVNode(_sfc_main$2, {
+          value: reading.value.text,
+          align: "start"
+        }, null, 8, ["value"])
+      ], 16, _hoisted_2));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpRepeater-D0S7jjwr.js

@@ -0,0 +1,180 @@
+import { defineComponent, useModel, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode, TransitionGroup, Fragment, renderList, renderSlot, mergeModels, nextTick } from "vue";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useRepeater } from "../composables/useRepeater.js";
+import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
+import { _ as _sfc_main$1 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+import '../assets/LpRepeater-C1Cw27hj.css';const _hoisted_1 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_2 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_3 = { class: "min-w-0 flex-1" };
+const _hoisted_4 = {
+  key: "empty",
+  class: "text-xs text-muted"
+};
+const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]';
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "LpRepeater",
+  props: /* @__PURE__ */ mergeModels({
+    createItem: { type: Function },
+    itemKey: { type: Function },
+    label: {},
+    disabled: { type: Boolean },
+    labels: {}
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
+    const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels);
+    const list = useRepeater({
+      value: () => model.value,
+      set: (items) => {
+        model.value = items;
+      },
+      createItem: () => props.createItem(),
+      itemKey: () => props.itemKey,
+      disabled: () => field.value.disabled
+    });
+    const { rows } = list;
+    const rowsHost = ref(null);
+    const reducedMotion = usePrefersReducedMotion();
+    const addButton = ref(null);
+    function focusRow(index) {
+      rowAt(index)?.querySelector(focusable)?.focus({ preventScroll: true });
+    }
+    function rowAt(index) {
+      return Array.from(rowsHost.value?.children ?? []).filter(
+        (node) => node.hasAttribute("data-lp-repeater-row") && !node.hasAttribute("inert")
+      )[index];
+    }
+    function beforeLeave(el) {
+      const row = el;
+      row.style.width = `${row.offsetWidth}px`;
+      row.style.top = `${row.offsetTop}px`;
+      row.setAttribute("inert", "");
+      row.setAttribute("aria-hidden", "true");
+    }
+    function beforeEnter(el) {
+      const row = el;
+      row.removeAttribute("inert");
+      row.removeAttribute("aria-hidden");
+      row.style.removeProperty("top");
+      row.style.removeProperty("width");
+    }
+    async function add() {
+      if (field.value.disabled) return;
+      list.add();
+      await nextTick();
+      focusRow(model.value.length - 1);
+    }
+    async function remove(index) {
+      if (field.value.disabled) return;
+      const row = rowAt(index);
+      const restore = row?.contains(row.ownerDocument.activeElement);
+      list.remove(index);
+      if (!restore) return;
+      await nextTick();
+      if (model.value.length) focusRow(Math.min(index, model.value.length - 1));
+      else addButton.value?.$el?.focus({ preventScroll: true });
+    }
+    __expose({ add, remove, update: list.update });
+    const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(unref(rest), { class: unref(rootClass) }), [
+        createElementVNode("div", _hoisted_1, [
+          __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          createVNode(_sfc_main$1, {
+            ref_key: "addButton",
+            ref: addButton,
+            size: "xs",
+            variant: "ghost",
+            disabled: unref(field).disabled,
+            onClick: add
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:plus",
+                size: 14
+              }),
+              createTextVNode(toDisplayString(unref(text).add), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        createVNode(_sfc_main$3, { axis: "height" }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "rowsHost",
+              ref: rowsHost,
+              class: "relative flex min-w-0 flex-col gap-2"
+            }, [
+              createVNode(TransitionGroup, {
+                name: "lp-repeater",
+                css: !unref(reducedMotion),
+                onBeforeEnter: beforeEnter,
+                onBeforeLeave: beforeLeave
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), ({ item, key }, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key,
+                      "data-lp-repeater-row": "",
+                      class: "flex min-w-0 items-start gap-2"
+                    }, [
+                      createElementVNode("div", _hoisted_3, [
+                        renderSlot(_ctx.$slots, "default", {
+                          item,
+                          index,
+                          disabled: unref(field).disabled,
+                          update: (next) => unref(list).update(index, next),
+                          remove: () => remove(index)
+                        })
+                      ]),
+                      createVNode(_sfc_main$1, {
+                        variant: "ghost",
+                        size: "sm",
+                        square: "",
+                        disabled: unref(field).disabled,
+                        "aria-label": unref(text).remove.replace("{index}", String(index + 1)),
+                        onClick: ($event) => remove(index)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$2, {
+                            name: "lucide:x",
+                            size: 14
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["disabled", "aria-label", "onClick"])
+                    ]);
+                  }), 128)),
+                  !unref(rows).length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "empty", {}, () => [
+                      createTextVNode(toDisplayString(unref(text).empty), 1)
+                    ])
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 3
+              }, 8, ["css"])
+            ], 512)
+          ]),
+          _: 3
+        })
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpRevealOnScroll-DcQjexLy.js

@@ -0,0 +1,76 @@
+import { defineComponent, ref, watch, computed, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { prefersReducedMotion, easingToken } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useReveal } from "../composables/useReveal.js";
+import { revealFrom, revealTo, staggerDelay } from "../components/reveal.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpRevealOnScroll",
+  props: {
+    preset: { default: "rise" },
+    direction: { default: "up" },
+    distance: { default: 16 },
+    delay: { default: 0 },
+    duration: { default: 520 },
+    stagger: { default: 0 },
+    immediate: { type: Boolean, default: false },
+    threshold: { default: 0.15 },
+    as: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { el, revealed } = useReveal({ immediate: () => props.immediate, threshold: props.threshold });
+    const host = ref(null);
+    watch(host, (node) => el.value = node);
+    const { class: classes, attrs: rest } = useMergedAttrs(() => void 0);
+    const played = ref(false);
+    const hidden = computed(() => !played.value && !revealed.value);
+    const running = [];
+    function play(node) {
+      if (props.immediate || prefersReducedMotion() || typeof node.animate !== "function") return;
+      const from = revealFrom(props.preset, props.direction, props.distance);
+      const frames = [from, revealTo(from)];
+      const easing = easingToken("ease-emphasized");
+      const targets = props.stagger > 0 ? Array.from(node.children) : [node];
+      targets.forEach((target, index) => {
+        running.push(
+          target.animate(frames, {
+            duration: props.duration,
+            delay: props.stagger > 0 ? staggerDelay(index, props.delay, props.stagger) : props.delay,
+            easing,
+            fill: "backwards"
+          })
+        );
+      });
+    }
+    watch(
+      revealed,
+      (seen) => {
+        if (!seen || played.value) return;
+        played.value = true;
+        if (host.value) play(host.value);
+      },
+      { flush: "post", immediate: true }
+    );
+    onBeforeUnmount(() => {
+      for (const animation of running) animation.cancel();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "host",
+        ref: host,
+        class: unref(classes),
+        style: hidden.value ? { opacity: 0 } : void 0
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpRollingText-DB7upf-5.js → LpRollingText-DiL717LK.js}

@@ -1,12 +1,13 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
-import '../assets/LpRollingText-BGnE6q9j.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpRollingText-dyOXedGO.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpRollingText",
   props: {
     value: {},
     mode: { default: "slide" },
     direction: { default: "up" },
     duration: { default: 320 },
-    align: { default: "center" }
+    align: { default: "center" },
+    wrap: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -25,7 +26,7 @@ import '../assets/LpRollingText-BGnE6q9j.css';const _sfc_main = /* @__PURE__ */
     }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
-        class: normalizeClass(["lp-roll relative inline-flex overflow-hidden align-bottom", justify.value]),
+        class: normalizeClass(["lp-roll relative inline-flex overflow-hidden align-bottom", [justify.value, __props.wrap && "lp-roll--wrap"]]),
         style: normalizeStyle(style.value)
       }, [
         createVNode(Transition, { name: name.value }, {

package/dist/chunks/LpScramble-TDO5Kdou.js

@@ -0,0 +1,85 @@
+import { defineComponent, watch, onMounted, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, toDisplayString, createVNode, createElementBlock, Fragment, renderList, createTextVNode } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useReveal } from "../composables/useReveal.js";
+import { useScramble } from "../composables/useScramble.js";
+import { _ as _sfc_main$1 } from "./LpShift-DXNsauQZ.js";
+const _hoisted_1 = { class: "sr-only" };
+const _hoisted_2 = {
+  key: 1,
+  class: "lp-scramble__cell relative inline-block"
+};
+const _hoisted_3 = { class: "invisible" };
+const _hoisted_4 = { class: "absolute inset-0 text-center opacity-60" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpScramble",
+  props: {
+    value: {},
+    trigger: { default: "reveal" },
+    duration: { default: 900 },
+    order: { default: "sequential" },
+    glyphs: {},
+    animateChanges: { type: Boolean, default: true },
+    as: { default: "span" }
+  },
+  emits: ["done"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => "lp-scramble inline-block whitespace-pre align-baseline");
+    const masked = (props.trigger === "reveal" || props.trigger === "mount") && !prefersReducedMotion();
+    const { cells, running, play } = useScramble(() => props.value, {
+      duration: () => props.duration,
+      order: () => props.order,
+      glyphs: () => props.glyphs,
+      onChange: () => props.animateChanges,
+      start: masked ? "masked" : "settled",
+      onDone: () => emit("done")
+    });
+    const { el, revealed } = useReveal({ immediate: () => props.trigger !== "reveal" });
+    watch(revealed, (seen) => seen && props.trigger === "reveal" && play());
+    onMounted(() => {
+      if (props.trigger === "mount" || props.trigger === "reveal" && revealed.value) play();
+    });
+    function onEnter() {
+      if (props.trigger === "hover" && !running.value) play();
+    }
+    __expose({ play });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "el",
+        ref: el,
+        class: unref(rootClass)
+      }, unref(rest), { onPointerenter: onEnter }), {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, toDisplayString(__props.value), 1),
+          createVNode(_sfc_main$1, {
+            axis: "width",
+            class: "inline-block align-baseline",
+            "aria-hidden": "true"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(cells), (cell, i) => {
+                return openBlock(), createElementBlock(Fragment, { key: i }, [
+                  cell.settled ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createTextVNode(toDisplayString(cell.char), 1)
+                  ], 64)) : (openBlock(), createElementBlock("span", _hoisted_2, [
+                    createElementVNode("span", _hoisted_3, toDisplayString(cell.sizer), 1),
+                    createElementVNode("span", _hoisted_4, toDisplayString(cell.char), 1)
+                  ]))
+                ], 64);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};