@leavepulse/ui 0.22.22 → 0.24.0

package/src/components/LpBreadcrumbs.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
+import type { Component } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 export interface Crumb {
   label: string
   href?: string
+  /** Destination for router links; passed straight to the `as` component. */
+  to?: string | Record<string, unknown>
+  /** Leading icon, for crumbs that carry a glyph (a home root, a section). */
+  icon?: string
 }
 
-defineProps<{ items: Crumb[] }>()
+withDefaults(
+  defineProps<{
+    items: Crumb[]
+    /**
+     * Root element/component for linked crumbs. Defaults to a native <a>;
+     * pass a router link component to keep client-side navigation.
+     */
+    as?: string | Component
+  }>(),
+  { as: "a" },
+)
 defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
 </script>
 
@@ -19,15 +34,23 @@ defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
         :size="14"
         class="text-muted"
       />
-      <a
-        v-if="item.href && i < items.length - 1"
-        :href="item.href"
-        class="rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+      <component
+        :is="as"
+        v-if="(item.href || item.to) && i < items.length - 1"
+        :href="as === 'a' ? item.href : undefined"
+        :to="as === 'a' ? undefined : item.to"
+        class="inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
         @click="$emit('navigate', item, i)"
       >
+        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
         {{ item.label }}
-      </a>
-      <span v-else :class="i === items.length - 1 ? 'text-ink' : 'text-muted'">
+      </component>
+      <span
+        v-else
+        class="inline-flex items-center gap-1.5"
+        :class="i === items.length - 1 ? 'text-ink' : 'text-muted'"
+      >
+        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
         {{ item.label }}
       </span>
     </template>

package/src/components/LpConfirmDialog.vue

@@ -3,7 +3,7 @@
 import LpButton from "./LpButton.vue"
 import LpModal from "./LpModal.vue"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     open?: boolean
     title?: string
@@ -11,8 +11,15 @@ withDefaults(
     confirmLabel?: string
     cancelLabel?: string
     danger?: boolean
+    /**
+     * The confirm action is in flight: the button disables and swaps to
+     * `loadingLabel`, and confirming no longer closes the dialog — the owner
+     * closes it once the work settles, so a failure can stay on screen.
+     */
+    loading?: boolean
+    loadingLabel?: string
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel" },
+  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…" },
 )
 
 const emit = defineEmits<{
@@ -23,7 +30,9 @@ const emit = defineEmits<{
 
 function confirm() {
   emit("confirm")
-  emit("update:open", false)
+  // An async confirm owns its own dismissal; closing here would tear the
+  // dialog down before the caller knows whether the action succeeded.
+  if (!props.loading) emit("update:open", false)
 }
 function cancel() {
   emit("cancel")
@@ -40,9 +49,15 @@ function cancel() {
   >
     <slot />
     <template #footer>
-      <LpButton variant="ghost" @click="cancel">{{ cancelLabel }}</LpButton>
-      <LpButton :variant="danger ? 'danger' : 'solid'" @click="confirm">
-        {{ confirmLabel }}
+      <LpButton variant="ghost" :disabled="loading" @click="cancel">
+        {{ cancelLabel }}
+      </LpButton>
+      <LpButton
+        :variant="danger ? 'danger' : 'solid'"
+        :disabled="loading"
+        @click="confirm"
+      >
+        {{ loading ? loadingLabel : confirmLabel }}
       </LpButton>
     </template>
   </LpModal>

package/src/components/LpEmptyState.vue

@@ -1,19 +1,32 @@
 <script setup lang="ts">
 import LpIcon from "./LpIcon.vue"
 
-defineProps<{ icon?: string; title: string; description?: string }>()
+defineProps<{
+  icon?: string
+  title: string
+  description?: string
+  /**
+   * Tightens the block for empty states nested inside a card or a panel,
+   * where the full-page padding would dwarf its container.
+   */
+  compact?: boolean
+}>()
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-3 px-6 py-12 text-center">
+  <div
+    class="flex flex-col items-center px-6 text-center"
+    :class="compact ? 'gap-2 py-6' : 'gap-3 py-12'"
+  >
     <div
       v-if="icon"
-      class="flex size-12 items-center justify-center rounded-pill bg-surface-soft text-muted"
+      class="flex items-center justify-center rounded-pill bg-surface-soft text-muted"
+      :class="compact ? 'size-9' : 'size-12'"
     >
-      <LpIcon :name="icon" :size="22" />
+      <LpIcon :name="icon" :size="compact ? 16 : 22" />
     </div>
     <div class="flex flex-col gap-1">
-      <p class="font-semibold text-ink">{{ title }}</p>
+      <p class="font-semibold text-ink" :class="compact ? 'text-sm' : ''">{{ title }}</p>
       <p v-if="description" class="max-w-sm text-sm text-muted">{{ description }}</p>
     </div>
     <div v-if="$slots.default" class="mt-1"><slot /></div>

package/src/components/LpFileTreeNode.vue

@@ -178,8 +178,17 @@ function onActivate() {
         @click.stop="onActivate"
       >
         <!-- Chevron sits in a fixed-width slot so names line up whether or not
-             the row can expand. Leaves get the same gutter, left empty. -->
-        <span class="flex size-4 shrink-0 items-center justify-center">
+             the row can expand. Leaves get the same gutter, left empty.
+
+             It is its own hit target, like the checkbox: opening a folder to
+             see what is in it is a different intent from selecting it, and on
+             a tree that drives a details pane the two must not be the same
+             click. The row as a whole still does both. -->
+        <span
+          class="flex size-4 shrink-0 items-center justify-center"
+          :class="canExpand ? 'cursor-pointer rounded-sm hover:bg-line' : ''"
+          @click.stop="canExpand && !node.disabled ? emit('toggle', node) : undefined"
+        >
           <LpIcon
             v-if="isLoading"
             name="lucide:loader-circle"

package/src/components/LpInput.vue

@@ -54,6 +54,12 @@ const props = withDefaults(
     hint?: string
     error?: string
     icon?: string
+    /**
+     * Marks the label with the required indicator. The attribute still reaches
+     * the underlying <input> for native validation; this only makes the field
+     * read as required.
+     */
+    required?: boolean
     /**
      * RegExp/string the whole value must match to be valid. Validation only —
      * never blocks typing; a non-matching non-empty value shows the invalid
@@ -118,6 +124,7 @@ defineExpose({
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? rootClass : undefined"
     :style="hasField ? rootStyle : undefined"
   >
@@ -136,6 +143,7 @@ defineExpose({
         :value="modelValue"
         :placeholder="placeholder"
         :disabled="disabled"
+        :required="required || undefined"
         :aria-invalid="isInvalidState || undefined"
         :class="[
           'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',

package/src/components/LpLink.vue

@@ -1,28 +1,61 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, type Component } from "vue"
 
 const props = withDefaults(
   defineProps<{
     href?: string
     external?: boolean
+    /** Shorthand for `tone="muted"`. */
     muted?: boolean
+    /**
+     * "brand" — the accent link colour (default).
+     * "ink"   — inherits body text colour; for links that sit inside prose or
+     *   chrome where an accent would shout (breadcrumbs, footers, nav).
+     * "muted" / "soft" — progressively quieter, both resolving to ink on hover.
+     */
+    tone?: "brand" | "ink" | "muted" | "soft"
+    /**
+     * Root element/component. Defaults to a native <a>. Pass a router link
+     * component (e.g. NuxtLink or RouterLink) to keep client-side navigation;
+     * the kit stays DOM-agnostic, the consumer supplies the link component.
+     * Router links take their destination through their own prop (`to`), which
+     * falls through as a plain attribute.
+     */
+    as?: string | Component
     /**
      * "default" — plain hover underline.
+     * "underline" — underlined at rest; for links inside running prose,
+     *   where hover-only underlines leave the link invisible until pointed at.
      * "reveal"  — an underline bar that grows in from the left on hover
      *   (origin-left scale-x 0→1). The LeavePulse landing "monitoring" link feel;
      *   good for inline prose links and nav items that want a bit of motion.
      */
-    variant?: "default" | "reveal"
+    variant?: "default" | "underline" | "reveal"
   }>(),
-  { variant: "default" },
+  { variant: "default", as: "a" },
 )
 
+// A router link component owns its destination through its own prop (`to`),
+// so `href` is only bound when this really renders an anchor. `target`/`rel`
+// stay in play either way — router links honour them for external targets.
+const isAnchor = computed(() => props.as === "a")
+
 const rel = computed(() => (props.external ? "noopener noreferrer" : undefined))
 const target = computed(() => (props.external ? "_blank" : undefined))
 
-const colorClass = computed(() =>
-  props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover",
-)
+const colorClass = computed(() => {
+  const tone = props.tone ?? (props.muted ? "muted" : "brand")
+  switch (tone) {
+    case "ink":
+      return "text-ink"
+    case "muted":
+      return "text-muted-strong hover:text-ink"
+    case "soft":
+      return "text-muted hover:text-ink"
+    default:
+      return "text-brand hover:text-brand-hover"
+  }
+})
 
 // The reveal bar: an ::after pseudo-element pinned to the baseline, full-width
 // but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
@@ -33,16 +66,21 @@ const revealClass =
 </script>
 
 <template>
-  <a
-    :href="href"
+  <component
+    :is="as"
+    :href="isAnchor ? href : undefined"
     :target="target"
     :rel="rel"
     class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
     :class="[
       colorClass,
-      variant === 'reveal' ? revealClass : 'hover:underline',
+      variant === 'reveal'
+        ? revealClass
+        : variant === 'underline'
+          ? 'underline decoration-current/40 hover:decoration-current'
+          : 'hover:underline',
     ]"
   >
     <slot />
-  </a>
+  </component>
 </template>

package/src/components/LpPasswordInput.vue

@@ -9,7 +9,18 @@ import { ref } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 
-defineProps<{ modelValue?: string; placeholder?: string; invalid?: boolean; disabled?: boolean }>()
+defineProps<{
+  modelValue?: string
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+  // Field wrapping mirrors LpInput: passing any of these wraps the control in
+  // LpFormField, so a password field labels itself like every other field.
+  label?: string
+  hint?: string
+  error?: string
+  required?: boolean
+}>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const visible = ref(false)
@@ -29,6 +40,10 @@ defineExpose({
     :placeholder="placeholder"
     :invalid="invalid"
     :disabled="disabled"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
     @update:model-value="(v) => $emit('update:modelValue', v)"
   >
     <template v-if="$slots.leading" #leading><slot name="leading" /></template>

package/src/components/LpStepper.vue

@@ -1,45 +1,85 @@
 <script setup lang="ts">
+import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 export interface Step {
   label: string
+  /** Stable id, for flows whose steps are addressed by name rather than order. */
+  key?: string
+  /** Replaces the step number while the step is pending or current. */
+  icon?: string
 }
 
-defineProps<{ steps: Step[]; current: number }>()
+const props = defineProps<{
+  steps: Step[]
+  /**
+   * The active step: an index, or a step `key` for keyed flows.
+   */
+  current: number | string
+  /**
+   * Which steps count as done. Omit it and everything before `current` is
+   * complete, which is the linear case. Pass keys (or indices) when a flow can
+   * finish steps out of order — a verification that succeeds before its
+   * prerequisite is filled in, say.
+   */
+  completed?: Array<string | number>
+}>()
+
+const currentIndex = computed(() => {
+  if (typeof props.current === "number") return props.current
+  return props.steps.findIndex((s) => s.key === props.current)
+})
+
+function isCompleted(step: Step, i: number): boolean {
+  if (!props.completed) return i < currentIndex.value
+  return props.completed.includes(i) || (!!step.key && props.completed.includes(step.key))
+}
+
+function isCurrent(i: number): boolean {
+  return i === currentIndex.value
+}
 </script>
 
 <template>
   <ol class="flex items-center gap-2">
     <li
       v-for="(step, i) in steps"
-      :key="i"
+      :key="step.key ?? i"
       class="flex flex-1 items-center gap-2 last:flex-none"
-      :aria-current="i === current ? 'step' : undefined"
+      :aria-current="isCurrent(i) ? 'step' : undefined"
     >
       <div class="flex items-center gap-2">
         <span
           class="flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors"
-          :class="i < current
+          :class="isCompleted(step, i)
             ? 'border-transparent bg-brand text-ink-inverse'
-            : i === current
+            : isCurrent(i)
               ? 'border-brand text-brand'
               : 'border-line text-muted'"
         >
-          <LpIcon v-if="i < current" name="lucide:check" :size="14" />
+          <LpIcon v-if="isCompleted(step, i)" name="lucide:check" :size="14" />
+          <LpIcon v-else-if="step.icon" :name="step.icon" :size="14" />
           <template v-else>{{ i + 1 }}</template>
         </span>
-        <span class="text-sm" :class="i <= current ? 'text-ink' : 'text-muted'">
+        <span
+          class="text-sm"
+          :class="isCompleted(step, i) || isCurrent(i) ? 'text-ink' : 'text-muted'"
+        >
           {{ step.label }}
           <!-- Status for screen readers; the colour/check are visual only. -->
           <span class="sr-only">{{
-            i < current ? "(completed)" : i === current ? "(current step)" : ""
+            isCompleted(step, i)
+              ? "(completed)"
+              : isCurrent(i)
+                ? "(current step)"
+                : ""
           }}</span>
         </span>
       </div>
       <span
         v-if="i < steps.length - 1"
         class="h-px flex-1"
-        :class="i < current ? 'bg-brand' : 'bg-line'"
+        :class="isCompleted(step, i) ? 'bg-brand' : 'bg-line'"
       />
     </li>
   </ol>

package/src/components/LpTextarea.vue

@@ -11,6 +11,11 @@ const props = defineProps<{
   label?: string
   hint?: string
   error?: string
+  /**
+   * Marks the label with the required indicator; the attribute still reaches
+   * the <textarea> for native validation.
+   */
+  required?: boolean
 }>()
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
@@ -24,6 +29,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? undefined : 'contents'"
   >
     <textarea
@@ -31,6 +37,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
       :placeholder="placeholder"
       :rows="rows ?? 4"
       :disabled="disabled"
+      :required="required || undefined"
       class="w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
       :class="(invalid || error) ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line'"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"

package/src/theme/presets.ts

@@ -35,7 +35,10 @@ export const dark: TokenSet = {
     brandSoft: "rgba(0, 188, 255, 0.16)",
     action: "#39e58c",
     actionHover: "#4dffa1",
+    actionSoft: "rgba(57, 229, 140, 0.14)",
     accent: "#f0b35a",
+    accentHover: "#f2bf74",
+    accentSoft: "rgba(240, 179, 90, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -64,7 +67,10 @@ export const light: TokenSet = {
     brandSoft: "rgba(0, 134, 199, 0.12)",
     action: "#1f9d5f",
     actionHover: "#23b06b",
+    actionSoft: "rgba(31, 157, 95, 0.12)",
     accent: "#aa6f1d",
+    accentHover: "#b88641",
+    accentSoft: "rgba(170, 111, 29, 0.12)",
     danger: "#c2333b",
     dangerHover: "#d23b44",
     dangerSoft: "rgba(194, 51, 59, 0.12)",
@@ -93,7 +99,10 @@ export const lime: TokenSet = {
     brandSoft: "rgba(196, 240, 66, 0.14)",
     action: "#5fd97a",
     actionHover: "#74e88d",
+    actionSoft: "rgba(95, 217, 122, 0.14)",
     accent: "#ffb84d",
+    accentHover: "#ffc369",
+    accentSoft: "rgba(255, 184, 77, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -148,7 +157,10 @@ export const leavepulse: TokenSet = {
     brandSoft: "rgba(0, 188, 255, 0.2)",
     action: "#44c2ad",
     actionHover: "#56d3be",
+    actionSoft: "rgba(68, 194, 173, 0.14)",
     accent: "#d36a2c",
+    accentHover: "#da824e",
+    accentSoft: "rgba(211, 106, 44, 0.14)",
     danger: "#f87171",
     dangerHover: "#fca5a5",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -181,7 +193,10 @@ export const rose: TokenSet = {
     brandSoft: "rgba(251, 113, 133, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#ef4444",
     dangerHover: "#f56565",
     dangerSoft: "rgba(239, 68, 68, 0.14)",
@@ -210,7 +225,10 @@ export const amber: TokenSet = {
     brandSoft: "rgba(245, 158, 11, 0.14)",
     action: "#4ade80",
     actionHover: "#5cea90",
+    actionSoft: "rgba(74, 222, 128, 0.14)",
     accent: "#38bdf8",
+    accentHover: "#58c8f9",
+    accentSoft: "rgba(56, 189, 248, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -239,7 +257,10 @@ export const violet: TokenSet = {
     brandSoft: "rgba(167, 139, 250, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -268,7 +289,10 @@ export const nord: TokenSet = {
     brandSoft: "rgba(136, 192, 208, 0.16)",
     action: "#a3be8c",
     actionHover: "#b3cb9f",
+    actionSoft: "rgba(163, 190, 140, 0.16)",
     accent: "#ebcb8b",
+    accentHover: "#eed39e",
+    accentSoft: "rgba(235, 203, 139, 0.16)",
     danger: "#bf616a",
     dangerHover: "#cb727b",
     dangerSoft: "rgba(191, 97, 106, 0.16)",

package/src/theme/tokens.ts

@@ -18,7 +18,10 @@ export interface ColorTokens {
   brandSoft: string
   action: string
   actionHover: string
+  actionSoft: string
   accent: string
+  accentHover: string
+  accentSoft: string
   danger: string
   dangerHover: string
   dangerSoft: string
@@ -99,7 +102,10 @@ export const COLOR_VARS: Record<keyof ColorTokens, string> = {
   brandSoft: "--color-brand-soft",
   action: "--color-action",
   actionHover: "--color-action-hover",
+  actionSoft: "--color-action-soft",
   accent: "--color-accent",
+  accentHover: "--color-accent-hover",
+  accentSoft: "--color-accent-soft",
   danger: "--color-danger",
   dangerHover: "--color-danger-hover",
   dangerSoft: "--color-danger-soft",

package/src/tokens/tokens.css

@@ -36,7 +36,10 @@
   --color-brand-soft: rgba(0, 188, 255, 0.16);
   --color-action: #39e58c;
   --color-action-hover: #4dffa1;
+  --color-action-soft: rgba(57, 229, 140, 0.14);
   --color-accent: #f0b35a;
+  --color-accent-hover: #f2bf74;
+  --color-accent-soft: rgba(240, 179, 90, 0.14);
   --color-danger: #ff6f6f;
   --color-danger-hover: #ff8585;
   --color-danger-soft: rgba(255, 111, 111, 0.14);

package/dist/chunks/LpBreadcrumbs-B7Aqatzw.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, normalizeClass } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = {
-  class: "flex items-center gap-1.5 text-sm",
-  "aria-label": "Breadcrumb"
-};
-const _hoisted_2 = ["href", "onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpBreadcrumbs",
-  props: {
-    items: {}
-  },
-  emits: ["navigate"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", _hoisted_1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
-          return openBlock(), createElementBlock(Fragment, { key: i }, [
-            i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 0,
-              name: "lucide:chevron-right",
-              size: 14,
-              class: "text-muted"
-            })) : createCommentVNode("", true),
-            item.href && i < __props.items.length - 1 ? (openBlock(), createElementBlock("a", {
-              key: 1,
-              href: item.href,
-              class: "rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-              onClick: ($event) => _ctx.$emit("navigate", item, i)
-            }, toDisplayString(item.label), 9, _hoisted_2)) : (openBlock(), createElementBlock("span", {
-              key: 2,
-              class: normalizeClass(i === __props.items.length - 1 ? "text-ink" : "text-muted")
-            }, toDisplayString(item.label), 3))
-          ], 64);
-        }), 128))
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpEmptyState-CrfyRJUG.js

@@ -1,47 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "flex flex-col items-center gap-3 px-6 py-12 text-center" };
-const _hoisted_2 = {
-  key: 0,
-  class: "flex size-12 items-center justify-center rounded-pill bg-surface-soft text-muted"
-};
-const _hoisted_3 = { class: "flex flex-col gap-1" };
-const _hoisted_4 = { class: "font-semibold text-ink" };
-const _hoisted_5 = {
-  key: 0,
-  class: "max-w-sm text-sm text-muted"
-};
-const _hoisted_6 = {
-  key: 1,
-  class: "mt-1"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpEmptyState",
-  props: {
-    icon: {},
-    title: {},
-    description: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        __props.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_sfc_main$1, {
-            name: __props.icon,
-            size: 22
-          }, null, 8, ["name"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("p", _hoisted_4, toDisplayString(__props.title), 1),
-          __props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
-        ]),
-        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          renderSlot(_ctx.$slots, "default")
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};