@leavepulse/ui 0.78.0 → 0.78.2

package/dist/chunks/LpRepeater-Czib3rmv.js

@@ -0,0 +1,193 @@
+import { defineComponent, useModel, ref, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createElementVNode, mergeProps, createElementBlock, toDisplayString, createCommentVNode, createVNode, createTextVNode, TransitionGroup, Fragment, renderList, renderSlot, mergeModels, nextTick } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { useOwnField, mergeDescribedBy } 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$2 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$4 } from "./LpShift-DAgS_d2x.js";
+import '../assets/LpRepeater-C1Cw27hj.css';const _hoisted_1 = ["aria-label", "aria-describedby"];
+const _hoisted_2 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_4 = { class: "min-w-0 flex-1" };
+const _hoisted_5 = {
+  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 },
+    error: {},
+    labels: {}
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, 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", () => ownAttrs());
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createElementVNode("div", mergeProps(unref(rest), {
+            role: "group",
+            "aria-label": __props.label || void 0,
+            "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
+            class: unref(rootClass)
+          }), [
+            createElementVNode("div", _hoisted_2, [
+              __props.label ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+              createVNode(_sfc_main$2, {
+                ref_key: "addButton",
+                ref: addButton,
+                size: "xs",
+                variant: "ghost",
+                disabled: unref(field).disabled,
+                onClick: add
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    name: "lucide:plus",
+                    size: 14
+                  }),
+                  createTextVNode(toDisplayString(unref(text).add), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            createVNode(_sfc_main$4, { 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_4, [
+                            renderSlot(_ctx.$slots, "default", {
+                              item,
+                              index,
+                              disabled: unref(field).disabled,
+                              update: (next) => unref(list).update(index, next),
+                              remove: () => remove(index)
+                            })
+                          ]),
+                          createVNode(_sfc_main$2, {
+                            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$3, {
+                                name: "lucide:x",
+                                size: 14
+                              })
+                            ]),
+                            _: 1
+                          }, 8, ["disabled", "aria-label", "onClick"])
+                        ]);
+                      }), 128)),
+                      !unref(rows).length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                        renderSlot(_ctx.$slots, "empty", {}, () => [
+                          createTextVNode(toDisplayString(unref(text).empty), 1)
+                        ])
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    _: 3
+                  }, 8, ["css"])
+                ], 512)
+              ]),
+              _: 3
+            })
+          ], 16, _hoisted_1)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpScrollArea-ay4Xo_hg.js → LpScrollArea-CqvwfZs2.js}

@@ -1,8 +1,7 @@
 import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, normalizeStyle, createElementVNode, renderSlot } from "vue";
 import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
-import { prefersReducedMotion } from "../composables/easing.js";
 import { nodeWindow } from "../composables/realm.js";
-const barFade = "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]";
+import { SCROLL_HIDE_DELAY_MS, BAR_Y, BAR_FADE, BAR_Y_SIZE, THUMB_Y, THUMB_Y_ROUND, BAR_X, BAR_X_SIZE, THUMB_X, THUMB_X_ROUND, pageToward } from "../components/scrollbar.js";
 const FADE_PX = 14;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpScrollArea",
@@ -29,6 +28,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onViewportBlur() {
       pointerFocus.value = false;
     }
+    const edge = computed(() => props.floating ? "floating" : "wall");
     const dragging = ref(false);
     const atTop = ref(true);
     const atBottom = ref(true);
@@ -100,10 +100,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       event.preventDefault();
       event.stopImmediatePropagation();
       const rect = thumb.getBoundingClientRect();
-      const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left;
-      const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1);
-      const behavior = prefersReducedMotion() ? "auto" : "smooth";
-      el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior });
+      pageToward(el, axis, axis === "y" ? event.clientY < rect.top : event.clientX < rect.left);
     }
     let stopThumbDrag = null;
     function onThumbPointerDown(event) {
@@ -126,20 +123,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ScrollAreaRoot), {
         class: normalizeClass(["relative flex flex-col overflow-hidden", dragging.value ? "select-none" : void 0]),
         type: "hover",
-        "scroll-hide-delay": 500
+        "scroll-hide-delay": unref(SCROLL_HIDE_DELAY_MS)
       }, {
         default: withCtx(() => [
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "vertical",
             "force-mount": "",
-            class: normalizeClass(["group z-1 flex touch-none select-none justify-end pl-2.5", [barFade, __props.floating ? "w-4 py-1 pr-1" : "w-3.5 py-px pr-px"]]),
+            class: normalizeClass(["z-1", [unref(BAR_Y), unref(BAR_FADE), unref(BAR_Y_SIZE)[edge.value]]]),
             style: normalizeStyle(__props.barInsetTop ? { marginTop: __props.barInsetTop } : void 0),
             onPointerdownCapture: _cache[0] || (_cache[0] = ($event) => onTrackPointerDown($event, "y"))
           }, {
             default: withCtx(() => [
               createVNode(unref(ScrollAreaThumb), {
                 "data-lp-thumb": "",
-                class: normalizeClass(["relative min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand", __props.floating ? "rounded-pill" : "rounded-l-pill"]),
+                class: normalizeClass(["relative", [unref(THUMB_Y), unref(THUMB_Y_ROUND)[edge.value]]]),
                 onPointerdown: onThumbPointerDown
               }, null, 8, ["class"])
             ]),
@@ -147,13 +144,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["class", "style"]),
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "horizontal",
-            class: normalizeClass(["group z-1 flex flex-col touch-none select-none justify-end pt-2.5", [barFade, __props.floating ? "h-4 px-1 pb-1" : "h-3.5 px-px pb-px"]]),
+            class: normalizeClass(["z-1", [unref(BAR_X), unref(BAR_FADE), unref(BAR_X_SIZE)[edge.value]]]),
             onPointerdownCapture: _cache[1] || (_cache[1] = ($event) => onTrackPointerDown($event, "x"))
           }, {
             default: withCtx(() => [
               createVNode(unref(ScrollAreaThumb), {
                 "data-lp-thumb": "",
-                class: normalizeClass(["relative min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand", __props.floating ? "rounded-pill" : "rounded-t-pill"]),
+                class: normalizeClass(["relative", [unref(THUMB_X), unref(THUMB_X_ROUND)[edge.value]]]),
                 onPointerdown: onThumbPointerDown
               }, null, 8, ["class"])
             ]),
@@ -182,7 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["class", "style"])
         ]),
         _: 3
-      }, 8, ["class"]);
+      }, 8, ["class", "scroll-hide-delay"]);
     };
   }
 });

package/dist/chunks/{LpSecretField-DBvU6iAw.js → LpSecretField-BtlCk3IH.js}

@@ -8,12 +8,12 @@ import { useFieldControl } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
 import { _ as _sfc_main$5 } from "./FieldWrapper-DnuMTrqW.js";
 import { _ as _sfc_main$3 } from "./LpButton-DSHioIfD.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-sAMvWeLP.js";
 import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
-import { _ as _sfc_main$1 } from "./LpPasswordInput-B-zD6tUS.js";
+import { _ as _sfc_main$1 } from "./LpPasswordInput-Duc_3wPv.js";
 import { _ as _sfc_main$6 } from "./LpShift-DAgS_d2x.js";
-import { _ as _sfc_main$8 } from "./LpTooltip-BJf3lZMq.js";
-import { _ as _sfc_main$7 } from "./RevealToggle-CCPDE8Mv.js";
+import { _ as _sfc_main$8 } from "./LpTooltip-Bz_rrq5S.js";
+import { _ as _sfc_main$7 } from "./RevealToggle-D_iyrB8d.js";
 const _hoisted_1 = ["id", "aria-label"];
 const _hoisted_2 = {
   key: "empty",

package/dist/chunks/LpSegmented-sskrJKJJ.js

@@ -0,0 +1,128 @@
+import { defineComponent, useId, ref, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { isHTMLElement } from "../composables/realm.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { Motion } from "motion-v";
+import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
+import { useOwnField, mergeDescribedBy } from "../composables/useField.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { usePillTransition } from "../composables/usePillTransition.js";
+import { _ as _sfc_main$3 } from "./AttentionDot-DCBf4aWg.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "relative z-10 inline-flex shrink-0"
+};
+const _hoisted_2 = {
+  key: 2,
+  class: "relative z-10"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSegmented",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: {},
+    options: {},
+    size: { default: "md" },
+    block: { type: Boolean, default: false },
+    disabled: { type: Boolean },
+    error: {},
+    hoverFollow: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function onChange(v) {
+      if (typeof v === "string" && v) emit("update:modelValue", v);
+    }
+    const sizeCls = CONTROL_SIZE;
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => [
+      "inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1",
+      sizeCls[props.size],
+      // `w-fit`, not left to the parent: in a column a flex item stretches, and
+      // the options sat on the left of an empty bar (the theme studio met it).
+      props.block ? "flex w-full" : "w-fit"
+    ].join(" "), () => ownAttrs());
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }));
+    const pillId = `lp-segmented-${useId()}`;
+    const pillTransition = usePillTransition();
+    const hovered = ref(null);
+    function onEnter(opt) {
+      if (props.hoverFollow && !opt.disabled && !field.value.disabled) hovered.value = opt.value;
+    }
+    function pillUnder(value) {
+      return hovered.value ? hovered.value === value : value === props.modelValue;
+    }
+    function releaseFocusAfterPointer(event) {
+      const target = event.currentTarget;
+      if (isHTMLElement(target)) target.blur();
+    }
+    usePaletteControl({ disabled: () => field.value.disabled });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(ToggleGroupRoot), mergeProps({
+            "model-value": __props.modelValue,
+            type: "single",
+            disabled: unref(field).disabled,
+            "aria-labelledby": unref(field).labelId,
+            rovingFocus: true,
+            class: unref(rootClass)
+          }, unref(rest), {
+            "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
+            "onUpdate:modelValue": onChange,
+            onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
+          }), {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+                return openBlock(), createBlock(unref(ToggleGroupItem), {
+                  key: opt.value,
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  "aria-label": opt.ariaLabel ?? (opt.label ? void 0 : opt.value),
+                  class: normalizeClass(["relative inline-flex h-full items-center justify-center gap-1.5 rounded-inner font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55", [__props.block ? "flex-1" : "", __props.size === "lg" ? "px-4" : "px-3", hovered.value === opt.value ? "text-ink" : ""]]),
+                  onPointerenter: ($event) => onEnter(opt),
+                  onPointerup: releaseFocusAfterPointer
+                }, {
+                  default: withCtx(() => [
+                    pillUnder(opt.value) ? (openBlock(), createBlock(unref(Motion), {
+                      key: 0,
+                      "layout-id": pillId,
+                      transition: unref(pillTransition),
+                      class: "absolute inset-0 z-0 rounded-inner border border-line bg-surface-raised shadow-sm"
+                    }, null, 8, ["transition"])) : createCommentVNode("", true),
+                    opt.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                      createVNode(_sfc_main$2, {
+                        name: opt.icon,
+                        size: __props.size === "lg" ? 16 : 14
+                      }, null, 8, ["name", "size"]),
+                      opt.dot && !opt.label ? (openBlock(), createBlock(_sfc_main$3, {
+                        key: 0,
+                        corner: ""
+                      })) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true),
+                    opt.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(opt.label), 1)) : createCommentVNode("", true),
+                    opt.dot && opt.label ? (openBlock(), createBlock(_sfc_main$3, {
+                      key: 3,
+                      class: "mt-1.5"
+                    })) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "disabled", "aria-label", "class", "onPointerenter"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 16, ["model-value", "disabled", "aria-labelledby", "class", "aria-describedby"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};