@leavepulse/ui 0.78.0 → 0.78.2

package/dist/chunks/LpAutocomplete-CrZbd0uv.js

@@ -0,0 +1,310 @@
+import { defineComponent, computed, useAttrs, ref, watch, useId, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { _ as _sfc_main$3 } from "./IconCloseButton-COZEsa9u.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
+import { useOwnField, mergeDescribedBy } from "../composables/useField.js";
+import { useInputFilter } from "../composables/useInputFilter.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { COMBOBOX_PANEL, POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$4 } from "./OptionContent-CGb8QlHA.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
+const _hoisted_3 = {
+  key: 0,
+  class: "pointer-events-none absolute inset-0 flex min-w-0 items-center gap-1.5",
+  "aria-hidden": "true"
+};
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
+  key: 0,
+  class: "px-3 py-4 text-center text-sm italic text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpAutocomplete",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: {},
+    options: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    clearable: { type: Boolean, default: false },
+    size: { default: "md" },
+    icon: {},
+    invalid: { type: Boolean },
+    error: {},
+    emptyText: {},
+    loading: { type: Boolean, default: false },
+    loadingText: {},
+    filter: { type: Boolean, default: true },
+    minChars: { default: 1 },
+    pattern: {},
+    restrict: {},
+    selected: {},
+    labels: {}
+  },
+  emits: ["update:modelValue", "select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { isInvalid, onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
+      pattern: () => props.pattern,
+      restrict: () => props.restrict
+    });
+    const text = computed({
+      get: () => props.modelValue ?? "",
+      set: (v) => emit("update:modelValue", v)
+    });
+    const inputAttrs = computed(() => {
+      const { class: _c, style: _s, ...rest } = attrs;
+      return rest;
+    });
+    const attrs = useAttrs();
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }));
+    const isInvalidState = computed(() => field.value.invalid);
+    const labels = useLabels(
+      "autocomplete",
+      { clear: "Clear", placeholder: "Type…", empty: "No suggestions", loading: "Searching…" },
+      () => props.labels
+    );
+    const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
+    const items = computed(
+      () => (props.options ?? []).map(
+        (o) => typeof o === "string" ? { value: o } : o
+      )
+    );
+    const typing = ref(false);
+    const filtered = computed(() => {
+      const q = text.value.trim().toLowerCase();
+      if (!props.filter || !typing.value || !q) return items.value;
+      return items.value.filter((o) => {
+        const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase();
+        return hay.includes(q);
+      });
+    });
+    const open = ref(false);
+    const focused = ref(false);
+    const showSelected = computed(() => !!props.selected?.label && !focused.value);
+    const draft = ref(null);
+    const showImage = computed(() => !!props.selected?.image && (!focused.value || draft.value !== null));
+    watch(
+      () => props.selected?.label,
+      (label) => {
+        if (draft.value !== null) draft.value = label ?? null;
+      }
+    );
+    const selectedId = useId();
+    const describedBy = computed(
+      () => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, showSelected.value ? selectedId : void 0)
+    );
+    const canOpen = computed(
+      () => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
+    );
+    watch(canOpen, (can) => {
+      if (focused.value && can) open.value = true;
+    });
+    function onOpenChange(next) {
+      open.value = next && canOpen.value;
+    }
+    const hasValue = computed(() => (props.modelValue ?? "").length > 0);
+    const anchorSize = CONTROL_SIZE;
+    function onInput(event) {
+      filterInput(event);
+      typing.value = true;
+      draft.value = null;
+      text.value = event.target.value;
+    }
+    let pointerFocus = false;
+    function onPointerDown() {
+      if (!focused.value) pointerFocus = true;
+    }
+    function onFocus(event) {
+      typing.value = false;
+      focused.value = true;
+      const input = event.target;
+      if (props.selected?.label) {
+        draft.value = props.selected.label;
+        if (pointerFocus) input.addEventListener("mouseup", (e) => e.preventDefault(), { once: true });
+        void nextTick(() => input.select());
+      }
+      pointerFocus = false;
+      if (canOpen.value) open.value = true;
+    }
+    function onBlur() {
+      focused.value = false;
+      draft.value = null;
+    }
+    function choose(opt) {
+      typing.value = false;
+      draft.value = null;
+      emit("update:modelValue", opt.value);
+      emit("select", opt.value);
+      open.value = false;
+    }
+    function clear() {
+      if (field.value.disabled) return;
+      typing.value = false;
+      draft.value = null;
+      emit("update:modelValue", "");
+      open.value = false;
+    }
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
+    usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(ComboboxRoot), {
+            open: open.value,
+            "ignore-filter": true,
+            "reset-search-term-on-blur": false,
+            "reset-search-term-on-select": false,
+            disabled: unref(field).disabled,
+            class: normalizeClass(["relative", unref(ownAttrs)() ? unref(attrs).class : void 0]),
+            style: normalizeStyle(unref(ownAttrs)() ? unref(attrs).style : void 0),
+            "onUpdate:open": onOpenChange
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(ComboboxAnchor), {
+                "data-lp-ring-owner": "",
+                class: normalizeClass(["flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", [
+                  unref(anchorSize)[__props.size],
+                  isInvalidState.value ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
+                ]])
+              }, {
+                default: withCtx(() => [
+                  __props.icon || __props.selected?.image ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    class: normalizeClass(["relative grid shrink-0 place-items-center", __props.selected === void 0 ? "size-4" : "size-5"])
+                  }, [
+                    __props.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 0,
+                      name: __props.icon,
+                      size: 16,
+                      class: normalizeClass(["col-start-1 row-start-1 text-muted transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "scale-75 opacity-0" : "opacity-100"])
+                    }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                    __props.selected?.image ? (openBlock(), createElementBlock("img", {
+                      key: 1,
+                      src: __props.selected.image,
+                      alt: "",
+                      class: normalizeClass(["col-start-1 row-start-1 size-5 rounded-full object-cover transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "opacity-100" : "scale-75 opacity-0"])
+                    }, null, 10, _hoisted_1)) : createCommentVNode("", true)
+                  ], 2)) : createCommentVNode("", true),
+                  createElementVNode("div", _hoisted_2, [
+                    createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
+                      id: unref(field).id,
+                      "model-value": draft.value ?? text.value,
+                      placeholder: placeholderText.value,
+                      disabled: unref(field).disabled,
+                      required: unref(field).required || void 0,
+                      "aria-invalid": isInvalidState.value || void 0,
+                      "aria-describedby": describedBy.value,
+                      class: ["lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted", showSelected.value && "text-transparent placeholder:text-transparent"],
+                      onBeforeinput: unref(onBeforeInput),
+                      onPaste: unref(onPaste),
+                      onCompositionend: unref(onCompositionEnd),
+                      onInput,
+                      onPointerdown: onPointerDown,
+                      onFocus,
+                      onBlur
+                    }), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "class", "onBeforeinput", "onPaste", "onCompositionend"]),
+                    createVNode(Transition, {
+                      "enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                      "leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                      "enter-from-class": "opacity-0",
+                      "leave-to-class": "opacity-0"
+                    }, {
+                      default: withCtx(() => [
+                        __props.selected?.label ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                          createElementVNode("span", {
+                            id: unref(selectedId),
+                            class: "sr-only"
+                          }, toDisplayString(__props.selected.hint ? `${__props.selected.label}, ${__props.selected.hint}` : __props.selected.label), 9, _hoisted_4),
+                          createElementVNode("span", {
+                            class: normalizeClass(["max-w-full shrink-0 truncate", showSelected.value ? "" : "invisible"])
+                          }, toDisplayString(__props.selected.label), 3),
+                          __props.selected.hint ? (openBlock(), createElementBlock("span", {
+                            key: 0,
+                            class: normalizeClass(["min-w-0 truncate text-sm text-muted transition-[opacity,translate] duration-[var(--duration-fast)] motion-reduce:transition-none", showSelected.value ? "opacity-100" : "-translate-x-1 opacity-0"])
+                          }, toDisplayString(__props.selected.hint), 3)) : createCommentVNode("", true)
+                        ])) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createBlock(_sfc_main$3, {
+                    key: 1,
+                    inline: "",
+                    label: unref(labels).clear,
+                    onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["prevent"])),
+                    onClick: clear
+                  }, null, 8, ["label"])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
+                default: withCtx(() => [
+                  createVNode(unref(ComboboxContent), mergeProps({
+                    onInteractOutside: unref(guardOutside),
+                    onEscapeKeyDown: unref(guardOutside)
+                  }, unref(COMBOBOX_PANEL), {
+                    class: [unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"],
+                    onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
+                    }, ["prevent"])),
+                    onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+                    }, ["prevent"]))
+                  }), {
+                    default: withCtx(() => [
+                      createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
+                        default: withCtx(() => [
+                          __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText ?? unref(labels).loading), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                            key: 1,
+                            class: "px-3 py-4 text-center text-sm italic text-muted"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(__props.emptyText ?? unref(labels).empty), 1)
+                            ]),
+                            _: 1
+                          })),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (opt, i) => {
+                            return openBlock(), createBlock(unref(ComboboxItem), {
+                              key: opt.value,
+                              value: opt.value,
+                              disabled: opt.disabled,
+                              style: normalizeStyle(unref(optionStagger)(i)),
+                              class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"]),
+                              onSelect: withModifiers(($event) => choose(opt), ["prevent"])
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_sfc_main$4, { option: opt }, null, 8, ["option"])
+                              ]),
+                              _: 2
+                            }, 1032, ["value", "disabled", "style", "class", "onSelect"]);
+                          }), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 16, ["onInteractOutside", "onEscapeKeyDown", "class"])
+                ]),
+                _: 1
+              }, 8, ["to"])
+            ]),
+            _: 1
+          }, 8, ["open", "disabled", "class", "style"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpCheckbox-CCWCwD0y.js

@@ -0,0 +1,129 @@
+import { defineComponent, computed, useId, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createElementVNode, mergeProps, createVNode, normalizeClass, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$3 } from "./LpLoader-Bf1yZwaU.js";
+import { useOwnField, isAttrOn, mergeDescribedBy } from "../composables/useField.js";
+import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex min-w-0 flex-col"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpCheckbox",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: { type: Boolean },
+    indeterminate: { type: Boolean },
+    disabled: { type: Boolean },
+    error: {},
+    label: {},
+    description: {},
+    id: {},
+    name: {},
+    action: {}
+  },
+  emits: ["update:modelValue", "update:indeterminate", "change", "done", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    let wasMixed = false;
+    const { pending, set } = useOptimisticToggle(() => props.action, emit, () => {
+      if (wasMixed) emit("update:indeterminate", true);
+    });
+    function onUpdate(v) {
+      const checked = v === true;
+      if (pending.value) return;
+      wasMixed = !!props.indeterminate;
+      if (wasMixed) emit("update:indeterminate", false);
+      void set(checked);
+      emit("change", checked);
+    }
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => [
+      "group/check inline-flex cursor-pointer gap-2 text-sm text-ink",
+      props.description ? "items-start" : "items-center"
+    ].join(" "), () => ownAttrs());
+    const FOCUS_LISTENER = /^on(Focus|Blur)/;
+    const LISTENER = /^on[A-Z]/;
+    const parts = computed(() => {
+      const label = {};
+      const control = {};
+      for (const [key, value] of Object.entries(rest.value)) {
+        const onLabel = key === "style" || LISTENER.test(key) && !FOCUS_LISTENER.test(key);
+        if (onLabel) label[key] = value;
+        else control[key] = value;
+      }
+      return { label, control };
+    });
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({
+      error: props.error,
+      id: props.id,
+      required: isAttrOn(rest.value.required),
+      disabled: props.disabled
+    }));
+    const descriptionId = `${useId()}-description`;
+    const describedBy = computed(
+      () => mergeDescribedBy(rest.value["aria-describedby"], props.description ? descriptionId : void 0, field.value.describedBy)
+    );
+    usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: void 0, "onUpdate:modelValue": onUpdate, onChange: void 0 }) });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createElementVNode("label", mergeProps({ class: unref(rootClass) }, parts.value.label), [
+            createVNode(unref(CheckboxRoot), mergeProps(parts.value.control, {
+              id: unref(field).id,
+              name: __props.name,
+              "model-value": __props.indeterminate ? "indeterminate" : __props.modelValue,
+              disabled: unref(field).disabled,
+              required: unref(field).required,
+              "aria-describedby": describedBy.value,
+              "aria-busy": unref(pending) || void 0,
+              class: [__props.description ? "mt-px" : "", "relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"],
+              "onUpdate:modelValue": onUpdate
+            }), {
+              default: withCtx(() => [
+                createVNode(unref(CheckboxIndicator), { class: "flex items-center justify-center text-ink-inverse data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)] data-[state=indeterminate]:animate-[indicator-in_140ms_var(--ease-emphasized)]" }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$2, {
+                      name: __props.indeterminate ? "lucide:minus" : "lucide:check",
+                      size: 13,
+                      class: normalizeClass(unref(pending) && "opacity-0")
+                    }, null, 8, ["name", "class"])
+                  ]),
+                  _: 1
+                }),
+                unref(pending) ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
+                  size: "inline",
+                  delay: 0,
+                  "aria-hidden": "true",
+                  class: normalizeClass(["absolute text-[12px]", __props.modelValue ? "text-ink-inverse" : "text-muted"])
+                }, null, 8, ["class"])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 16, ["id", "name", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
+            __props.description ? (openBlock(), createElementBlock("span", _hoisted_1, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString(__props.label), 1)
+              ]),
+              createElementVNode("span", {
+                id: descriptionId,
+                class: "text-xs text-muted"
+              }, toDisplayString(__props.description), 1)
+            ])) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ])
+          ], 16)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpCodeBlock-DuzmnIHl.js → LpCodeBlock-DBqy4RLd.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, createBlock, normalizeStyle, normalizeClass, Fragment, renderList, h } from "vue";
 import { tokenizeLines } from "../components/codeHighlight.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-sAMvWeLP.js";
 import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {

package/dist/chunks/{LpCodeDisplay-CO8fngxa.js → LpCodeDisplay-D59uPwRb.js}

@@ -2,12 +2,12 @@ import { defineComponent, useModel, computed, ref, watch, openBlock, createEleme
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useNow } from "../composables/useNow.js";
-import { _ as _sfc_main$6 } from "./LpCheckbox-D6RuDW4X.js";
-import { _ as _sfc_main$3 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$6 } from "./LpCheckbox-CCWCwD0y.js";
+import { _ as _sfc_main$3 } from "./LpCopyButton-sAMvWeLP.js";
 import { _ as _sfc_main$5 } from "./LpCountdown-DVl7vXI1.js";
 import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$1 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$2 } from "./RevealToggle-CCPDE8Mv.js";
+import { _ as _sfc_main$2 } from "./RevealToggle-D_iyrB8d.js";
 import { groupCode } from "../components/fieldText.js";
 import { toEpoch, formatTime, ceilToSecond, msToNextSecond } from "../components/timeSpan.js";
 const _hoisted_1 = { class: "flex flex-wrap items-center gap-x-2 gap-y-1" };