@leavepulse/ui 0.12.0 → 0.14.6

package/dist/chunks/LpFormField-Bn-ZwC6z.js

@@ -0,0 +1,47 @@
+import { defineComponent, useId, openBlock, createElementBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { Label } from "reka-ui";
+const _hoisted_1 = { class: "flex flex-col gap-1.5" };
+const _hoisted_2 = {
+  key: 0,
+  class: "text-danger"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "text-xs text-danger"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "text-xs text-muted"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpFormField",
+  props: {
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean }
+  },
+  setup(__props) {
+    const id = useId();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.label ? (openBlock(), createBlock(unref(Label), {
+          key: 0,
+          for: unref(id),
+          class: "text-sm font-medium text-ink"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.label) + " ", 1),
+            __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["for"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", { id: unref(id) }),
+        __props.error ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.error), 1)) : __props.hint ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpIcon-CCnX5_2j.js

@@ -0,0 +1,41 @@
+import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref } from "vue";
+import { addCollection, getIcon, Icon } from "@iconify/vue";
+import lucide from "@iconify-json/lucide/icons.json";
+addCollection(lucide);
+const _hoisted_1 = ["width", "height", "viewBox", "innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpIcon",
+  props: {
+    name: {},
+    size: {}
+  },
+  setup(__props) {
+    const props = __props;
+    function resolve(name) {
+      return name.includes(":") ? name : `lucide:${name}`;
+    }
+    const fullName = computed(() => resolve(props.name));
+    const data = computed(() => getIcon(fullName.value));
+    const dim = computed(() => props.size ?? "1em");
+    return (_ctx, _cache) => {
+      return data.value ? (openBlock(), createElementBlock("svg", {
+        key: 0,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: dim.value,
+        height: dim.value,
+        viewBox: `0 0 ${data.value.width} ${data.value.height}`,
+        "aria-hidden": "true",
+        innerHTML: data.value.body
+      }, null, 8, _hoisted_1)) : (openBlock(), createBlock(unref(Icon), {
+        key: 1,
+        icon: fullName.value,
+        width: dim.value,
+        height: dim.value,
+        "aria-hidden": "true"
+      }, null, 8, ["icon", "width", "height"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpInfraNode-C_PHcthC.js

@@ -0,0 +1,99 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, unref, createElementVNode, toDisplayString, createCommentVNode, createTextVNode } from "vue";
+import { Handle, Position } from "@vue-flow/core";
+const _hoisted_1 = { class: "px-[11px] pb-2.5 pt-[9px]" };
+const _hoisted_2 = { class: "flex items-center gap-[7px]" };
+const _hoisted_3 = { class: "text-[13px] text-[var(--accent)]" };
+const _hoisted_4 = { class: "flex-1 truncate text-[13px] font-semibold text-ink" };
+const _hoisted_5 = { class: "mt-1.5 flex items-center justify-between" };
+const _hoisted_6 = { class: "text-[10px] font-semibold uppercase tracking-wide text-[var(--accent)]" };
+const _hoisted_7 = {
+  key: 0,
+  class: "font-mono text-[10px] text-muted"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "mt-1.5 flex items-center gap-1.5"
+};
+const _hoisted_9 = ["title"];
+const _hoisted_10 = ["title"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpInfraNode",
+  props: {
+    data: {},
+    selected: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const roleVar = {
+      hypervisor: "var(--color-accent)",
+      game: "var(--color-action)",
+      router: "var(--color-muted-strong)",
+      edge: "var(--color-brand)"
+    };
+    const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)");
+    const roleIcon = {
+      hypervisor: "▣",
+      game: "◈",
+      router: "⇄",
+      edge: "☁"
+    };
+    const icon = computed(() => roleIcon[props.data.role] ?? "●");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]", __props.selected ? "border-[var(--accent)]" : "border-line"]),
+        style: normalizeStyle({
+          "--accent": accent.value,
+          opacity: __props.data.dimmed ? 0.3 : __props.data.online === false ? 0.5 : 1,
+          ...__props.selected ? { boxShadow: "0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)" } : {}
+        })
+      }, [
+        createVNode(unref(Handle), {
+          type: "target",
+          position: unref(Position).Left,
+          class: "!size-2 !border-2 !border-[var(--accent)] !bg-surface"
+        }, null, 8, ["position"]),
+        createVNode(unref(Handle), {
+          type: "source",
+          position: unref(Position).Right,
+          class: "!size-2 !border-2 !border-[var(--accent)] !bg-surface"
+        }, null, 8, ["position"]),
+        _cache[2] || (_cache[2] = createElementVNode("div", { class: "h-[3px] bg-[var(--accent)]" }, null, -1)),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("span", _hoisted_3, toDisplayString(icon.value), 1),
+            createElementVNode("span", _hoisted_4, toDisplayString(__props.data.name), 1),
+            __props.data.online !== void 0 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["size-[7px] rounded-full", __props.data.online ? "bg-action shadow-[0_0_6px_var(--color-action)]" : "bg-danger"])
+            }, null, 2)) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createElementVNode("span", _hoisted_6, toDisplayString(__props.data.role), 1),
+            __props.data.overlay ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.data.overlay), 1)) : createCommentVNode("", true)
+          ]),
+          __props.data.firewallCount || __props.data.serviceCount !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            __props.data.firewallCount ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: "inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger",
+              title: `${__props.data.firewallCount} firewall rule(s)`
+            }, [
+              _cache[0] || (_cache[0] = createElementVNode("span", null, "⛨", -1)),
+              createTextVNode(toDisplayString(__props.data.firewallCount), 1)
+            ], 8, _hoisted_9)) : createCommentVNode("", true),
+            __props.data.serviceCount !== void 0 ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: "inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted",
+              title: `${__props.data.serviceCount} service(s)`
+            }, [
+              _cache[1] || (_cache[1] = createElementVNode("span", null, "◇", -1)),
+              createTextVNode(toDisplayString(__props.data.serviceCount), 1)
+            ], 8, _hoisted_10)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpInput-BauZRyzm.js

@@ -0,0 +1,136 @@
+import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, unref } from "vue";
+import { tv } from "tailwind-variants";
+import { useInputFilter } from "../composables/useInputFilter.js";
+import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex shrink-0 items-center text-muted"
+};
+const _hoisted_2 = ["type", "value", "placeholder", "disabled", "aria-invalid"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpInput",
+  props: {
+    modelValue: {},
+    size: { default: "md" },
+    invalid: { type: Boolean },
+    placeholder: {},
+    type: { default: "text" },
+    disabled: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {},
+    icon: {},
+    pattern: {},
+    restrict: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const shell = tv({
+      base: [
+        "flex w-full items-center bg-surface-soft text-ink",
+        "rounded-control border border-line",
+        "transition-colors duration-[var(--duration-fast)]",
+        "focus-within:border-brand focus-within:ring-2 focus-within:ring-ring",
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55"
+      ],
+      variants: {
+        size: {
+          sm: "h-(--size-control-sm) text-xs",
+          md: "h-(--size-control-md) text-sm",
+          lg: "h-(--size-control-lg) text-sm"
+        },
+        invalid: {
+          true: "border-danger focus-within:border-danger focus-within:ring-danger-soft"
+        }
+      },
+      defaultVariants: { size: "md" }
+    });
+    const padX = { sm: "px-2.5", md: "px-3", lg: "px-3.5" };
+    const props = __props;
+    const { isInvalid, onBeforeInput, onPaste } = useInputFilter({
+      pattern: () => props.pattern,
+      restrict: () => props.restrict
+    });
+    const patternInvalid = computed(() => isInvalid(props.modelValue));
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const hasLeading = computed(() => !!slots.leading || !!props.icon);
+    const hasTrailing = computed(() => !!slots.trailing);
+    const hasField = computed(
+      () => !!props.label || !!props.hint || !!props.error
+    );
+    const isInvalidState = computed(
+      () => props.invalid || !!props.error || patternInvalid.value
+    );
+    const shellClass = computed(
+      () => shell({ size: props.size, invalid: isInvalidState.value })
+    );
+    const rootClass = computed(() => attrs.class);
+    const rootStyle = computed(() => attrs.style);
+    const inputAttrs = computed(() => {
+      const { class: _c, style: _s, ...rest } = attrs;
+      return rest;
+    });
+    const inputEl = ref(null);
+    __expose({
+      focus: (options) => inputEl.value?.focus(options),
+      blur: () => inputEl.value?.blur(),
+      select: () => inputEl.value?.select(),
+      input: inputEl
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
+        label: hasField.value ? __props.label : void 0,
+        hint: hasField.value ? __props.hint : void 0,
+        error: hasField.value ? __props.error : void 0,
+        class: normalizeClass(hasField.value ? rootClass.value : void 0),
+        style: normalizeStyle(hasField.value ? rootStyle.value : void 0)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass([shellClass.value, hasLeading.value ? "pl-2.5" : "", hasTrailing.value ? "pr-1.5" : "", hasField.value ? "" : rootClass.value]),
+            style: normalizeStyle(hasField.value ? void 0 : rootStyle.value)
+          }, [
+            hasLeading.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+              renderSlot(_ctx.$slots, "leading", {}, () => [
+                __props.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  name: __props.icon,
+                  size: 16
+                }, null, 8, ["name"])) : createCommentVNode("", true)
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("input", mergeProps({
+              ref_key: "inputEl",
+              ref: inputEl
+            }, inputAttrs.value, {
+              type: __props.type,
+              value: __props.modelValue,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              "aria-invalid": isInvalidState.value || void 0,
+              class: [
+                "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted",
+                hasLeading.value ? "pl-2" : padX[__props.size ?? "md"],
+                hasTrailing.value ? "" : padX[__props.size ?? "md"]
+              ],
+              onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => unref(onBeforeInput) && unref(onBeforeInput)(...args)),
+              onPaste: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(onPaste) && unref(onPaste)(...args)),
+              onInput: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+            }), null, 16, _hoisted_2),
+            renderSlot(_ctx.$slots, "trailing")
+          ], 6)
+        ]),
+        _: 3
+      }, 8, ["label", "hint", "error", "class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpLaneNode-HtnQf2FF.js

@@ -0,0 +1,33 @@
+import { defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpLaneNode",
+  props: {
+    data: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "pointer-events-none rounded-card border border-dashed",
+        style: normalizeStyle({
+          width: `${props.data.width}px`,
+          height: `${props.data.height}px`,
+          borderColor: props.data.accent ?? "var(--color-line)",
+          background: "color-mix(in srgb, " + (props.data.accent ?? "var(--color-line-strong)") + " 6%, transparent)"
+        })
+      }, [
+        createElementVNode("div", {
+          class: "inline-flex translate-y-[-50%] items-center gap-1.5 rounded-pill border bg-surface px-2.5 py-0.5 text-[11px] font-semibold tracking-wide",
+          style: normalizeStyle({
+            borderColor: props.data.accent ?? "var(--color-line)",
+            color: props.data.accent ?? "var(--color-muted-strong)",
+            marginLeft: "14px"
+          })
+        }, toDisplayString(props.data.label), 5)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpLink-DHwOEp4e.js

@@ -0,0 +1,36 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+const _hoisted_1 = ["href", "target", "rel"];
+const revealClass = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpLink",
+  props: {
+    href: {},
+    external: { type: Boolean },
+    muted: { type: Boolean },
+    variant: { default: "default" }
+  },
+  setup(__props) {
+    const props = __props;
+    const rel = computed(() => props.external ? "noopener noreferrer" : void 0);
+    const target = computed(() => props.external ? "_blank" : void 0);
+    const colorClass = computed(
+      () => props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("a", {
+        href: __props.href,
+        target: target.value,
+        rel: rel.value,
+        class: normalizeClass(["inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
+          colorClass.value,
+          __props.variant === "reveal" ? revealClass : "hover:underline"
+        ]])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};