@leavepulse/ui 0.12.0 → 0.14.6

package/dist/chunks/LpStat-CdbEFOvn.js

@@ -0,0 +1,88 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, createCommentVNode, createBlock, toDisplayString, normalizeClass, createVNode, createTextVNode } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_2 = { class: "flex items-center gap-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "size-1.5 rounded-full bg-action"
+};
+const _hoisted_4 = { class: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
+const _hoisted_5 = { class: "flex items-baseline gap-2" };
+const _hoisted_6 = { class: "font-mono text-3xl font-medium tracking-tight text-ink" };
+const _hoisted_7 = {
+  key: 0,
+  class: "text-sm text-muted"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpStat",
+  props: {
+    label: {},
+    value: {},
+    hint: {},
+    icon: {},
+    online: { type: Boolean },
+    delta: {},
+    deltaSuffix: {},
+    trend: { default: "auto" },
+    invertTrend: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const dir = computed(() => {
+      if (props.trend !== "auto") return props.trend;
+      if (typeof props.delta === "number") {
+        if (props.delta > 0) return "up";
+        if (props.delta < 0) return "down";
+      }
+      return "flat";
+    });
+    const trendIcon = computed(
+      () => dir.value === "up" ? "lucide:trending-up" : dir.value === "down" ? "lucide:trending-down" : "lucide:minus"
+    );
+    const trendColor = computed(() => {
+      if (dir.value === "flat") return "text-muted";
+      const good = props.invertTrend ? dir.value === "down" : dir.value === "up";
+      return good ? "text-action" : "text-danger";
+    });
+    const deltaText = computed(() => {
+      if (props.delta == null) return "";
+      if (typeof props.delta === "number") {
+        const sign = props.delta > 0 ? "+" : "";
+        return `${sign}${props.delta}${props.deltaSuffix ?? ""}`;
+      }
+      return props.delta;
+    });
+    const showDelta = computed(() => props.delta != null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          __props.online ? (openBlock(), createElementBlock("span", _hoisted_3)) : createCommentVNode("", true),
+          __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 1,
+            name: __props.icon,
+            size: 14,
+            class: "text-muted"
+          }, null, 8, ["name"])) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1)
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          createElementVNode("span", _hoisted_6, toDisplayString(__props.value), 1),
+          showDelta.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["inline-flex items-center gap-0.5 text-sm font-medium tabular-nums", trendColor.value])
+          }, [
+            createVNode(_sfc_main$1, {
+              name: trendIcon.value,
+              size: 14
+            }, null, 8, ["name"]),
+            createTextVNode(" " + toDisplayString(deltaText.value), 1)
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        __props.hint ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpStepper-5dFTrW21.js

@@ -0,0 +1,53 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, createBlock, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = ["aria-current"];
+const _hoisted_3 = { class: "flex items-center gap-2" };
+const _hoisted_4 = { class: "sr-only" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpStepper",
+  props: {
+    steps: {},
+    current: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ol", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, i) => {
+          return openBlock(), createElementBlock("li", {
+            key: i,
+            class: "flex flex-1 items-center gap-2 last:flex-none",
+            "aria-current": i === __props.current ? "step" : void 0
+          }, [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("span", {
+                class: normalizeClass(["flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors", i < __props.current ? "border-transparent bg-brand text-ink-inverse" : i === __props.current ? "border-brand text-brand" : "border-line text-muted"])
+              }, [
+                i < __props.current ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: "lucide:check",
+                  size: 14
+                })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(i + 1), 1)
+                ], 64))
+              ], 2),
+              createElementVNode("span", {
+                class: normalizeClass(["text-sm", i <= __props.current ? "text-ink" : "text-muted"])
+              }, [
+                createTextVNode(toDisplayString(step.label) + " ", 1),
+                createElementVNode("span", _hoisted_4, toDisplayString(i < __props.current ? "(completed)" : i === __props.current ? "(current step)" : ""), 1)
+              ], 2)
+            ]),
+            i < __props.steps.length - 1 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["h-px flex-1", i < __props.current ? "bg-brand" : "bg-line"])
+            }, null, 2)) : createCommentVNode("", true)
+          ], 8, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpSwitch-v6fnccSM.js

@@ -0,0 +1,28 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSwitch",
+  props: {
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SwitchRoot), {
+        "model-value": __props.modelValue,
+        disabled: __props.disabled,
+        class: "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(SwitchThumb), { class: "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5" })
+        ]),
+        _: 1
+      }, 8, ["model-value", "disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpTable-CJ4Zt1UH.js

@@ -0,0 +1,229 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, withModifiers, renderSlot } from "vue";
+import { _ as _sfc_main$2 } from "./LpCheckbox-BO0zuuPh.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-K1x-azgY.js";
+const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_3 = {
+  key: 0,
+  class: "w-px px-4 py-3"
+};
+const _hoisted_4 = ["aria-sort"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = ["colspan"];
+const _hoisted_8 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTable",
+  props: {
+    columns: {},
+    rows: {},
+    rowKey: {},
+    emptyLabel: { default: "Nothing here yet" },
+    emptyIcon: { default: "lucide:inbox" },
+    selectable: { type: Boolean, default: false },
+    selected: { default: () => [] },
+    sort: { default: null },
+    stickyHeader: { type: Boolean },
+    rowMenu: {}
+  },
+  emits: ["update:selected", "update:sort", "rowClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function keyFor(row, index) {
+      if (typeof props.rowKey === "function") return props.rowKey(row);
+      if (props.rowKey) return row[props.rowKey];
+      return index;
+    }
+    function alignClass(align) {
+      if (align === "right") return "text-right";
+      if (align === "center") return "text-center";
+      return "text-left";
+    }
+    function menuFor(row) {
+      return props.rowMenu?.(row) ?? [];
+    }
+    const displayRows = computed(() => {
+      const s = props.sort;
+      if (!s) return props.rows;
+      const col = props.columns.find((c) => c.key === s.key);
+      if (!col?.sortable) return props.rows;
+      const factor = s.dir === "asc" ? 1 : -1;
+      return [...props.rows].sort((a, b) => compare(a[s.key], b[s.key]) * factor);
+    });
+    function compare(a, b) {
+      if (a == null && b == null) return 0;
+      if (a == null) return -1;
+      if (b == null) return 1;
+      if (typeof a === "number" && typeof b === "number") return a - b;
+      return String(a).localeCompare(String(b), void 0, { numeric: true });
+    }
+    function toggleSort(col) {
+      if (!col.sortable) return;
+      const s = props.sort;
+      let next;
+      if (!s || s.key !== col.key) next = { key: col.key, dir: "asc" };
+      else if (s.dir === "asc") next = { key: col.key, dir: "desc" };
+      else next = null;
+      emit("update:sort", next);
+    }
+    function sortIcon(col) {
+      if (props.sort?.key !== col.key) return "lucide:chevrons-up-down";
+      return props.sort.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
+    }
+    const selectedSet = computed(() => new Set(props.selected));
+    const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)));
+    const allChecked = computed(
+      () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
+    );
+    const someChecked = computed(
+      () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k))
+    );
+    function toggleAll(checked) {
+      emit("update:selected", checked ? [...allKeys.value] : []);
+    }
+    function toggleRow(key, checked) {
+      const next = new Set(selectedSet.value);
+      if (checked) next.add(key);
+      else next.delete(key);
+      emit("update:selected", [...next]);
+    }
+    const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+    const headEl = ref(null);
+    const headHeight = ref(0);
+    let ro;
+    watch(
+      [headEl, () => props.stickyHeader],
+      ([el, sticky]) => {
+        ro?.disconnect();
+        if (!el || !sticky || typeof ResizeObserver === "undefined") {
+          headHeight.value = 0;
+          return;
+        }
+        ro = new ResizeObserver(() => {
+          headHeight.value = el.offsetHeight;
+        });
+        ro.observe(el);
+        headHeight.value = el.offsetHeight;
+      },
+      { immediate: true, flush: "post" }
+    );
+    onBeforeUnmount(() => ro?.disconnect());
+    const barInsetTop = computed(
+      () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        class: "rounded-card border border-line",
+        "bar-inset-top": barInsetTop.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("table", _hoisted_1, [
+            createElementVNode("thead", {
+              ref_key: "headEl",
+              ref: headEl,
+              class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10" : "")
+            }, [
+              createElementVNode("tr", _hoisted_2, [
+                __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
+                  createVNode(_sfc_main$2, {
+                    "model-value": allChecked.value,
+                    indeterminate: someChecked.value,
+                    "onUpdate:modelValue": toggleAll
+                  }, null, 8, ["model-value", "indeterminate"])
+                ])) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+                  return openBlock(), createElementBlock("th", {
+                    key: col.key,
+                    style: normalizeStyle(col.width ? { width: col.width } : void 0),
+                    class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
+                    "aria-sort": __props.sort?.key === col.key ? __props.sort.dir === "asc" ? "ascending" : "descending" : void 0
+                  }, [
+                    col.sortable ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
+                        col.align === "right" ? "flex-row-reverse" : "",
+                        __props.sort?.key === col.key ? "text-ink" : ""
+                      ]]),
+                      onClick: ($event) => toggleSort(col)
+                    }, [
+                      createTextVNode(toDisplayString(col.label) + " ", 1),
+                      createVNode(_sfc_main$3, {
+                        name: sortIcon(col),
+                        size: 13,
+                        class: normalizeClass(["shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]", __props.sort?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"])
+                      }, null, 8, ["name", "class"])
+                    ], 10, _hoisted_5)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString(col.label), 1)
+                    ], 64))
+                  ], 14, _hoisted_4);
+                }), 128))
+              ])
+            ], 2),
+            createElementVNode("tbody", null, [
+              displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+                createElementVNode("td", {
+                  colspan: colSpan.value,
+                  class: "px-4 py-10 text-center text-muted"
+                }, [
+                  createVNode(_sfc_main$3, {
+                    name: __props.emptyIcon,
+                    size: 22,
+                    class: "mx-auto mb-2 opacity-60"
+                  }, null, 8, ["name"]),
+                  createElementVNode("div", null, toDisplayString(__props.emptyLabel), 1)
+                ], 8, _hoisted_7)
+              ])) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
+                return openBlock(), createBlock(_sfc_main$4, {
+                  key: keyFor(row, index),
+                  items: menuFor(row)
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("tr", {
+                      class: normalizeClass(["border-b border-line/60 transition-colors last:border-0 hover:bg-surface-soft/60", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]),
+                      onClick: ($event) => emit("rowClick", row)
+                    }, [
+                      __props.selectable ? (openBlock(), createElementBlock("td", {
+                        key: 0,
+                        class: "w-px px-4 py-3",
+                        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                        }, ["stop"]))
+                      }, [
+                        createVNode(_sfc_main$2, {
+                          "model-value": selectedSet.value.has(keyFor(row, index)),
+                          "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
+                        }, null, 8, ["model-value", "onUpdate:modelValue"])
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+                        return openBlock(), createElementBlock("td", {
+                          key: col.key,
+                          class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                        }, [
+                          renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                            row,
+                            value: row[col.key]
+                          }, () => [
+                            createTextVNode(toDisplayString(row[col.key]), 1)
+                          ])
+                        ], 2);
+                      }), 128))
+                    ], 10, _hoisted_8)
+                  ]),
+                  _: 2
+                }, 1032, ["items"]);
+              }), 128))
+            ])
+          ])
+        ]),
+        _: 3
+      }, 8, ["bar-inset-top"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpTableOfContents-CjvxPMpU.js

@@ -0,0 +1,155 @@
+import { defineComponent, ref, useId, computed, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
+import { Motion } from "motion-v";
+import { usePillTransition } from "../composables/usePillTransition.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { class: "mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
+const _hoisted_3 = ["href", "onClick", "onMouseenter"];
+const _hoisted_4 = {
+  key: 0,
+  class: "flex flex-col gap-0.5"
+};
+const _hoisted_5 = ["href", "onClick", "onMouseenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTableOfContents",
+  props: {
+    links: {},
+    title: { default: "On this page" },
+    offset: { default: 96 }
+  },
+  setup(__props) {
+    const props = __props;
+    const activeId = ref("");
+    const hoveredId = ref(null);
+    const pillId = `lp-toc-${useId()}`;
+    const pillTransition = usePillTransition();
+    const litId = computed(() => hoveredId.value ?? activeId.value);
+    function flatIds(links) {
+      return links.flatMap((l) => [l.id, ...l.children ? flatIds(l.children) : []]);
+    }
+    let observer = null;
+    let spySuppressed = false;
+    let rafId = null;
+    let safetyTimer = null;
+    function setup() {
+      observer?.disconnect();
+      const ids = flatIds(props.links);
+      if (!ids.length) return;
+      const visible = /* @__PURE__ */ new Set();
+      observer = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) visible.add(e.target.id);
+            else visible.delete(e.target.id);
+          }
+          if (spySuppressed) return;
+          const firstVisible = ids.find((id) => visible.has(id));
+          if (firstVisible) activeId.value = firstVisible;
+        },
+        { rootMargin: `-${props.offset}px 0px -70% 0px`, threshold: 0 }
+      );
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      }
+      if (!activeId.value) activeId.value = ids[0] ?? "";
+    }
+    function unfreeze() {
+      spySuppressed = false;
+      if (rafId != null) cancelAnimationFrame(rafId);
+      if (safetyTimer != null) clearTimeout(safetyTimer);
+      rafId = null;
+      safetyTimer = null;
+    }
+    function suppressSpyUntilScrollEnds() {
+      spySuppressed = true;
+      if (rafId != null) cancelAnimationFrame(rafId);
+      if (safetyTimer != null) clearTimeout(safetyTimer);
+      let last = window.scrollY;
+      const tick = () => {
+        const y = window.scrollY;
+        if (y === last) {
+          unfreeze();
+          return;
+        }
+        last = y;
+        rafId = requestAnimationFrame(tick);
+      };
+      rafId = requestAnimationFrame(tick);
+      safetyTimer = setTimeout(unfreeze, 1e3);
+    }
+    function onClick(id, ev) {
+      const el = document.getElementById(id);
+      if (!el) return;
+      ev.preventDefault();
+      activeId.value = id;
+      suppressSpyUntilScrollEnds();
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+      history.replaceState(null, "", `#${id}`);
+    }
+    onMounted(setup);
+    watch(() => props.links, setup, { deep: true });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      unfreeze();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        "aria-label": __props.title,
+        class: "text-sm"
+      }, [
+        createElementVNode("p", _hoisted_2, toDisplayString(__props.title), 1),
+        createElementVNode("ul", {
+          class: "relative flex flex-col gap-0.5 border-l border-line",
+          onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredId.value = null)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
+            return openBlock(), createElementBlock("li", {
+              key: link.id,
+              class: "flex flex-col"
+            }, [
+              createElementVNode("a", {
+                href: `#${link.id}`,
+                class: normalizeClass(["relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === link.id ? "text-brand" : "text-muted hover:text-ink"]),
+                onClick: ($event) => onClick(link.id, $event),
+                onMouseenter: ($event) => hoveredId.value = link.id
+              }, [
+                litId.value === link.id ? (openBlock(), createBlock(unref(Motion), {
+                  key: 0,
+                  "layout-id": pillId,
+                  transition: unref(pillTransition),
+                  class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
+                }, null, 8, ["transition"])) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(link.text), 1)
+              ], 42, _hoisted_3),
+              link.children?.length ? (openBlock(), createElementBlock("ul", _hoisted_4, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(link.children, (child) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: child.id
+                  }, [
+                    createElementVNode("a", {
+                      href: `#${child.id}`,
+                      class: normalizeClass(["relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === child.id ? "text-brand" : "text-muted hover:text-ink"]),
+                      onClick: ($event) => onClick(child.id, $event),
+                      onMouseenter: ($event) => hoveredId.value = child.id
+                    }, [
+                      litId.value === child.id ? (openBlock(), createBlock(unref(Motion), {
+                        key: 0,
+                        "layout-id": pillId,
+                        transition: unref(pillTransition),
+                        class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
+                      }, null, 8, ["transition"])) : createCommentVNode("", true),
+                      createTextVNode(" " + toDisplayString(child.text), 1)
+                    ], 42, _hoisted_5)
+                  ]);
+                }), 128))
+              ])) : createCommentVNode("", true)
+            ]);
+          }), 128))
+        ], 32)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpTabs-D7aTVPOb.js

@@ -0,0 +1,115 @@
+import { defineComponent, useId, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { useReducedMotion, Motion } from "motion-v";
+import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
+import { usePillTransition } from "../composables/usePillTransition.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "relative z-10" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTabs",
+  props: {
+    modelValue: {},
+    items: {},
+    variant: { default: "contained" },
+    accent: { type: Boolean, default: false },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const pillId = `lp-tab-indicator-${useId()}`;
+    const hovered = ref(null);
+    const pillTransition = usePillTransition();
+    const reduceMotion = useReducedMotion();
+    const panelLayoutTransition = computed(
+      () => reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 42, mass: 0.9 }
+    );
+    function pillUnder(value, active) {
+      return hovered.value ? hovered.value === value : active === value;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TabsRoot), {
+        "model-value": __props.modelValue,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(TabsList), {
+            class: normalizeClass(["gap-1", [
+              __props.block ? "flex w-full" : "inline-flex",
+              __props.variant === "contained" ? "rounded-control border border-line bg-surface-soft p-1" : "",
+              __props.variant === "underline" ? "border-b border-line" : ""
+            ]]),
+            onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                return openBlock(), createBlock(unref(TabsTrigger), {
+                  key: item.value,
+                  value: item.value,
+                  class: normalizeClass(["relative inline-flex items-center justify-center gap-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
+                    __props.block ? "flex-1" : "",
+                    __props.variant === "underline" ? "rounded-t-md px-3 pt-1.5 pb-2" : "rounded-md px-3 py-1.5",
+                    __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",
+                    hovered.value === item.value ? "text-ink" : "text-muted"
+                  ]]),
+                  onPointerenter: ($event) => hovered.value = item.value
+                }, {
+                  default: withCtx(() => [
+                    pillUnder(item.value, __props.modelValue) ? (openBlock(), createBlock(unref(Motion), {
+                      key: 0,
+                      "layout-id": pillId,
+                      transition: unref(pillTransition),
+                      class: normalizeClass(__props.variant === "underline" ? [
+                        "absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full",
+                        __props.accent ? "bg-brand" : "bg-ink"
+                      ] : [
+                        "absolute inset-0 z-0 rounded-md shadow-sm",
+                        __props.accent ? "border border-brand/35 bg-brand/12" : "border border-line bg-surface-raised"
+                      ])
+                    }, null, 8, ["transition", "class"])) : createCommentVNode("", true),
+                    item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 1,
+                      name: item.icon,
+                      size: 14,
+                      class: "relative z-10"
+                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                    createElementVNode("span", _hoisted_1, toDisplayString(item.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "class", "onPointerenter"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          _ctx.$slots.panel ? (openBlock(), createBlock(unref(Motion), {
+            key: 0,
+            layout: true,
+            transition: panelLayoutTransition.value,
+            class: "mt-3 overflow-hidden"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                return openBlock(), createBlock(unref(TabsContent), {
+                  key: item.value,
+                  value: item.value,
+                  class: "outline-none data-[state=active]:animate-[tab-in_200ms_var(--ease-emphasized)]"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "panel", {
+                      value: item.value
+                    })
+                  ]),
+                  _: 2
+                }, 1032, ["value"]);
+              }), 128))
+            ]),
+            _: 3
+          }, 8, ["transition"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["model-value"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};