@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/LpSecretField-CfWyHv9m.js

@@ -0,0 +1,316 @@
+import { defineComponent, useModel, computed, ref, watch, onMounted, onBeforeUnmount, useId, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, createCommentVNode, renderSlot, createVNode, normalizeStyle, normalizeClass, createElementVNode, Transition, createElementBlock, toDisplayString, mergeModels } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useScramble } from "../composables/useScramble.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useFieldControl } from "../composables/useField.js";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$5 } from "./FieldWrapper-BiennROB.js";
+import { _ as _sfc_main$3 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
+import { _ as _sfc_main$4 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpPasswordInput-GL2KOFK8.js";
+import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$8 } from "./LpTooltip-Cz8SQwRt.js";
+import { _ as _sfc_main$7 } from "./RevealToggle-C-KzaQGJ.js";
+const _hoisted_1 = ["id", "aria-label"];
+const _hoisted_2 = {
+  key: "empty",
+  class: "block truncate font-sans text-muted"
+};
+const _hoisted_3 = { "aria-hidden": "true" };
+const _hoisted_4 = { class: "sr-only" };
+const _hoisted_5 = {
+  key: "hidden",
+  class: "block truncate tracking-[0.12em] text-muted select-none",
+  "aria-hidden": "true"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "sr-only"
+};
+const _hoisted_7 = ["title"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSecretField",
+  props: /* @__PURE__ */ mergeModels({
+    value: {},
+    modelValue: {},
+    input: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {},
+    placeholder: {},
+    size: { default: "md" },
+    copyable: { type: Boolean, default: true },
+    revealable: { type: Boolean, default: true },
+    autoHide: {},
+    regenerate: {},
+    wrap: { type: Boolean },
+    disabled: { type: Boolean },
+    maskLength: { default: 24 },
+    labels: {}
+  }, {
+    "revealed": { type: Boolean, ...{ default: false } },
+    "revealedModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "copied"], ["update:revealed"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const revealedModel = useModel(__props, "revealed");
+    const revealed = computed({
+      get: () => props.revealable && revealedModel.value,
+      set: (value) => {
+        revealedModel.value = value;
+      }
+    });
+    const text = useLabels(
+      "secretField",
+      {
+        show: "Show",
+        hide: "Hide",
+        regenerate: "Regenerate",
+        hidden: "Hidden",
+        empty: "Not set",
+        hidesIn: "Hides automatically"
+      },
+      () => props.labels
+    );
+    const secret = computed(() => (props.input ? props.modelValue : props.value) ?? "");
+    const control = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
+    const decrypt = useScramble(() => revealed.value ? secret.value : "", { onChange: true, duration: 650 });
+    const mask = computed(() => "•".repeat(props.maskLength));
+    let hideTimer;
+    const run = ref(0);
+    watch(
+      [revealed, () => props.autoHide],
+      ([on, seconds]) => {
+        clearTimeout(hideTimer);
+        if (!on || !seconds) return;
+        run.value++;
+        hideTimer = setTimeout(() => revealed.value = false, seconds * 1e3);
+      },
+      { immediate: true }
+    );
+    watch(secret, () => {
+      if (revealed.value && props.autoHide) {
+        clearTimeout(hideTimer);
+        run.value++;
+        hideTimer = setTimeout(() => revealed.value = false, props.autoHide * 1e3);
+      }
+    });
+    function onVisibility() {
+      if (document.visibilityState === "hidden") revealed.value = false;
+    }
+    onMounted(() => document.addEventListener("visibilitychange", onVisibility));
+    onBeforeUnmount(() => {
+      clearTimeout(hideTimer);
+      document.removeEventListener("visibilitychange", onVisibility);
+    });
+    const field = ref(null);
+    watch(revealed, () => {
+      if (!props.input || prefersReducedMotion()) return;
+      const el = field.value?.$el;
+      const input = el instanceof Element ? el.querySelector("input") : null;
+      input?.animate([{ filter: "blur(4px)", opacity: 0.35 }, { filter: "blur(0)", opacity: 1 }], {
+        duration: 260,
+        easing: "cubic-bezier(0.2, 0, 0, 1)"
+      });
+    });
+    const id = useId();
+    const iconSize = computed(() => props.size === "sm" ? 14 : 16);
+    const copySize = computed(() => props.size === "lg" ? "sm" : "xs");
+    const shell = computed(
+      () => mergeClass(
+        "relative flex w-full items-center gap-1 overflow-hidden rounded-control border bg-surface-soft text-ink transition-colors duration-(--duration-fast)",
+        props.error ? "border-danger" : "border-line",
+        control.value.disabled ? "opacity-55" : "",
+        props.wrap ? "py-1.5" : "",
+        { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size]
+      )
+    );
+    return (_ctx, _cache) => {
+      return __props.input ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+        key: 0,
+        ref_key: "field",
+        ref: field
+      }, _ctx.$attrs, {
+        visible: revealed.value,
+        "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => revealed.value = $event),
+        class: "[&_input]:font-mono",
+        "model-value": __props.modelValue,
+        placeholder: __props.placeholder,
+        disabled: unref(control).disabled,
+        revealable: __props.revealable,
+        label: __props.label,
+        hint: __props.hint,
+        error: __props.error,
+        size: __props.size,
+        labels: { show: unref(text).show, hide: unref(text).hide },
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = (v) => emit("update:modelValue", v))
+      }), createSlots({
+        actions: withCtx(() => [
+          __props.copyable && secret.value ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            value: secret.value,
+            size: "xs",
+            class: "size-7",
+            disabled: unref(control).disabled,
+            onCopied: _cache[0] || (_cache[0] = (t) => emit("copied", t))
+          }, null, 8, ["value", "disabled"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "actions"),
+          __props.regenerate ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 1,
+            variant: "ghost",
+            size: "xs",
+            square: "",
+            class: "size-7",
+            "aria-label": unref(text).regenerate,
+            title: unref(text).regenerate,
+            action: __props.regenerate,
+            disabled: unref(control).disabled
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$4, {
+                name: "lucide:refresh-cw",
+                size: iconSize.value
+              }, null, 8, ["size"])
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "action", "disabled"])) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.leading ? {
+          name: "leading",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "leading")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["visible", "model-value", "placeholder", "disabled", "revealable", "label", "hint", "error", "size", "labels"])) : (openBlock(), createBlock(_sfc_main$5, {
+        key: 1,
+        wrapped: !!(__props.label || __props.hint || __props.error),
+        id: unref(id),
+        label: __props.label,
+        hint: __props.hint,
+        error: __props.error,
+        class: normalizeClass(_ctx.$attrs.class),
+        style: normalizeStyle(_ctx.$attrs.style)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(mergeClass)(shell.value, __props.label || __props.hint || __props.error ? "" : _ctx.$attrs.class)),
+            "data-lp-secret": ""
+          }, [
+            createVNode(_sfc_main$6, {
+              axis: "height",
+              class: "min-w-0 flex-1"
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  id: unref(id),
+                  class: "relative min-w-0 font-mono",
+                  "aria-label": __props.label,
+                  role: "group"
+                }, [
+                  createVNode(Transition, {
+                    mode: "out-in",
+                    "enter-active-class": "transition-[opacity,filter] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+                    "leave-active-class": "transition-[opacity,filter] duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    "enter-from-class": "opacity-0 blur-[4px]",
+                    "leave-to-class": "opacity-0 blur-[4px]"
+                  }, {
+                    default: withCtx(() => [
+                      !secret.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.placeholder ?? unref(text).empty), 1)) : revealed.value ? (openBlock(), createElementBlock("span", {
+                        key: "shown",
+                        class: normalizeClass(["block select-all", __props.wrap ? "break-all whitespace-pre-wrap" : "truncate"])
+                      }, [
+                        createElementVNode("span", _hoisted_3, toDisplayString(unref(decrypt).running.value ? unref(decrypt).text.value : secret.value), 1),
+                        createElementVNode("span", _hoisted_4, toDisplayString(secret.value), 1)
+                      ], 2)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(mask.value), 1))
+                    ]),
+                    _: 1
+                  }),
+                  secret.value && !revealed.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(text).hidden), 1)) : createCommentVNode("", true)
+                ], 8, _hoisted_1)
+              ]),
+              _: 1
+            }),
+            createElementVNode("div", {
+              class: normalizeClass(["flex shrink-0 items-center gap-0.5", __props.wrap ? "self-start" : "self-center"])
+            }, [
+              __props.revealable && secret.value ? (openBlock(), createBlock(_sfc_main$7, {
+                key: 0,
+                modelValue: revealed.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => revealed.value = $event),
+                "icon-size": iconSize.value,
+                "show-label": unref(text).show,
+                "hide-label": unref(text).hide,
+                disabled: unref(control).disabled,
+                controls: unref(id),
+                class: "size-7"
+              }, null, 8, ["modelValue", "icon-size", "show-label", "hide-label", "disabled", "controls"])) : createCommentVNode("", true),
+              __props.copyable && secret.value ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 1,
+                value: secret.value,
+                size: copySize.value,
+                class: "size-7 text-muted hover:text-ink",
+                disabled: unref(control).disabled,
+                onCopied: _cache[4] || (_cache[4] = (t) => emit("copied", t))
+              }, null, 8, ["value", "size", "disabled"])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "actions"),
+              __props.regenerate ? (openBlock(), createBlock(_sfc_main$8, {
+                key: 2,
+                content: unref(text).regenerate,
+                label: ""
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    variant: "ghost",
+                    size: "xs",
+                    square: "",
+                    class: "size-7 text-muted hover:text-ink",
+                    action: __props.regenerate,
+                    disabled: unref(control).disabled
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$4, {
+                        name: "lucide:refresh-cw",
+                        size: iconSize.value
+                      }, null, 8, ["size"])
+                    ]),
+                    _: 1
+                  }, 8, ["action", "disabled"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : createCommentVNode("", true)
+            ], 2),
+            createVNode(Transition, {
+              "enter-active-class": "transition-opacity duration-(--duration-fast)",
+              "leave-active-class": "transition-opacity duration-(--duration-fast)",
+              "enter-from-class": "opacity-0",
+              "leave-to-class": "opacity-0"
+            }, {
+              default: withCtx(() => [
+                revealed.value && __props.autoHide ? (openBlock(), createElementBlock("span", {
+                  key: run.value,
+                  class: "lp-drain pointer-events-none absolute inset-x-0 bottom-0 h-0.5 bg-brand/70",
+                  style: normalizeStyle({ animationDuration: `${__props.autoHide}s` }),
+                  title: unref(text).hidesIn,
+                  "aria-hidden": "true"
+                }, null, 12, _hoisted_7)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["wrapped", "id", "label", "hint", "error", "class", "style"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSection-BmRXe6ZP.js → LpSection-BW4xJ-Li.js}

@@ -1,6 +1,6 @@
 import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = { class: "min-w-0 flex-1 break-words" };
 const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpSegmented-CW3bFHM4.js → LpSegmented-BO99Sr4m.js}

@@ -4,25 +4,16 @@ import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$2 } from "./AttentionDot-DCBf4aWg.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = {
   key: 1,
   class: "relative z-10 inline-flex shrink-0"
 };
 const _hoisted_2 = {
-  key: 0,
-  "aria-hidden": "true",
-  class: "absolute -right-1 -top-0.5 size-2 rounded-full bg-accent"
-};
-const _hoisted_3 = {
   key: 2,
   class: "relative z-10"
 };
-const _hoisted_4 = {
-  key: 3,
-  "aria-hidden": "true",
-  class: "relative z-10 size-1.5 self-start mt-1.5 rounded-full bg-accent"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -104,10 +95,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     name: opt.icon,
                     size: __props.size === "lg" ? 16 : 14
                   }, null, 8, ["name", "size"]),
-                  opt.dot && !opt.label ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true)
+                  opt.dot && !opt.label ? (openBlock(), createBlock(_sfc_main$2, {
+                    key: 0,
+                    corner: ""
+                  })) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true),
-                opt.label ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(opt.label), 1)) : createCommentVNode("", true),
-                opt.dot && opt.label ? (openBlock(), createElementBlock("span", _hoisted_4)) : createCommentVNode("", true)
+                opt.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(opt.label), 1)) : createCommentVNode("", true),
+                opt.dot && opt.label ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 3,
+                  class: "mt-1.5"
+                })) : createCommentVNode("", true)
               ]),
               _: 2
             }, 1032, ["value", "disabled", "aria-label", "class", "onPointerenter"]);