@leavepulse/ui 0.12.0

package/src/components/LpSidebar.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+/*
+ * App-shell side navigation. A vertical rail of icon + label items, optionally
+ * split into labelled sections, with the active item marked by a sliding brand
+ * pill (motion-v shared layoutId — same feel as Tabs/Segmented/Pagination).
+ * Items carry an optional badge count. Header/footer slots hold a logo, a
+ * collapse control, a user chip, etc. Data-driven: bind the active id with
+ * v-model. Each item can route via href (rendered as <a>) or just emit select.
+ *
+ * Phones: set `responsive` and the rail hides below the `mobileBreakpoint` and
+ * is replaced by a swipeable LpDrawer (vaul-vue gives drag-to-close for free).
+ * The host owns the burger button and binds v-model:open; selecting an item
+ * auto-closes the drawer. With `responsive` off the component renders exactly
+ * the static <nav> it always has — existing call sites are unaffected.
+ */
+import { computed, useId } from "vue"
+import LpDrawer from "./LpDrawer.vue"
+import LpSidebarNav from "./LpSidebarNav.vue"
+import type { SidebarItem, SidebarSection } from "./sidebar"
+
+export type { SidebarItem, SidebarSection } from "./sidebar"
+
+const props = withDefaults(
+  defineProps<{
+    /** Active item id (v-model). Ignored when `isActive` is provided. */
+    modelValue?: string
+    /** Flat items, or sections for grouped nav. */
+    items?: SidebarItem[]
+    sections?: SidebarSection[]
+    /**
+     * Custom active test — for router-driven nav where "active" is a path-prefix
+     * match (e.g. /billing vs /billing-details), not a simple id compare. When
+     * given it overrides the modelValue check. The consumer owns the routing.
+     */
+    isActive?: (item: SidebarItem) => boolean
+    /** Show a skeleton placeholder instead of the items. */
+    loading?: boolean
+    /** Skeleton row count while loading. */
+    skeletonRows?: number
+    /** Render the user/header skeleton row too (paired with a #header avatar). */
+    skeletonHeader?: boolean
+    /**
+     * Collapse to a swipeable drawer on phones. Off by default so existing
+     * static-rail usage is unchanged.
+     */
+    responsive?: boolean
+    /** Drawer open state on mobile (v-model:open). Only used when `responsive`. */
+    open?: boolean
+    /** Tailwind breakpoint below which the drawer takes over. */
+    mobileBreakpoint?: "sm" | "md" | "lg" | "xl"
+    /** Let a pull from the left screen edge drag the mobile drawer open. */
+    edgeOpen?: boolean
+    /**
+     * Draw a hairline rule between the #header (logo) and the nav. On by
+     * default — it visually anchors the brand above the items. Pass false for a
+     * flush, header-less look.
+     */
+    divider?: boolean
+  }>(),
+  {
+    skeletonRows: 6,
+    skeletonHeader: true,
+    responsive: false,
+    mobileBreakpoint: "md",
+    divider: true,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", id: string): void
+  (e: "update:open", value: boolean): void
+  (e: "select", item: SidebarItem): void
+}>()
+
+// Normalise both inputs to a single section list.
+const groups = computed<SidebarSection[]>(() =>
+  props.sections ?? (props.items ? [{ items: props.items }] : []),
+)
+
+function itemActive(item: SidebarItem): boolean {
+  return props.isActive ? props.isActive(item) : item.id === props.modelValue
+}
+
+function activate(item: SidebarItem) {
+  if (item.disabled) return
+  emit("update:modelValue", item.id)
+  emit("select", item)
+  // Selecting an item dismisses the mobile drawer; harmless on desktop.
+  if (props.responsive && props.open) emit("update:open", false)
+}
+
+// Each shell (rail vs drawer) gets its own pill layoutId: when responsive they
+// can be mounted at once, and a shared layoutId would make motion-v tug one pill
+// between two live elements.
+const baseId = `lp-sidebar-${useId()}`
+const railPillId = `${baseId}-rail`
+const drawerPillId = `${baseId}-drawer`
+
+// Hide the static rail at/under the breakpoint when responsive; otherwise the
+// rail is always shown and the drawer is never rendered.
+const RAIL_VISIBILITY: Record<NonNullable<typeof props.mobileBreakpoint>, string> = {
+  sm: "hidden sm:flex",
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex",
+}
+const railClass = computed(() =>
+  props.responsive ? RAIL_VISIBILITY[props.mobileBreakpoint] : "flex",
+)
+
+// This component has a fragment root (the desktop <nav> + the mobile drawer), so
+// Vue can't auto-inherit a consumer-passed `class`. Take attrs over manually and
+// land them on the desktop rail (where a layout class like `shrink-0` belongs).
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <!-- Desktop / always-on rail -->
+  <nav
+    class="h-full w-60 flex-col gap-1 border-r border-line bg-surface-raised p-3"
+    :class="railClass"
+    aria-label="Sidebar"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="$slots.header"
+      class="shrink-0"
+      :class="divider ? 'mb-3 border-b border-line pb-3' : 'mb-2'"
+    >
+      <slot name="header" />
+    </div>
+
+    <LpSidebarNav
+      :groups="groups"
+      :pill-id="railPillId"
+      :item-active="itemActive"
+      :loading="loading"
+      :skeleton-rows="skeletonRows"
+      :skeleton-header="skeletonHeader"
+      @activate="activate"
+    >
+      <template v-if="$slots.item" #item="slotProps">
+        <slot name="item" v-bind="slotProps" />
+      </template>
+    </LpSidebarNav>
+
+    <!-- Actions (search, "new …") sit just above the footer, pinned to the
+         bottom of the rail and outside the scroll region — not trailing the
+         nav list. -->
+    <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2">
+      <slot name="actions" />
+    </div>
+
+    <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
+      <slot name="footer" />
+    </div>
+  </nav>
+
+  <!-- Mobile: same nav inside a swipeable drawer (drag-to-close via vaul). -->
+  <LpDrawer
+    v-if="responsive"
+    :open="open"
+    direction="left"
+    size="sm"
+    :edge-open="edgeOpen"
+    @update:open="(v) => emit('update:open', v)"
+  >
+    <div class="flex h-full flex-col gap-1">
+      <div
+        v-if="$slots.header"
+        class="shrink-0"
+        :class="divider ? 'mb-3 border-b border-line pb-3' : 'mb-2'"
+      >
+        <slot name="header" />
+      </div>
+
+      <LpSidebarNav
+        :groups="groups"
+        :pill-id="drawerPillId"
+        :item-active="itemActive"
+        :loading="loading"
+        :skeleton-rows="skeletonRows"
+        :skeleton-header="skeletonHeader"
+        @activate="activate"
+      >
+        <template v-if="$slots.item" #item="slotProps">
+          <slot name="item" v-bind="slotProps" />
+        </template>
+      </LpSidebarNav>
+
+      <div v-if="$slots.actions" class="mt-2 flex shrink-0 flex-col gap-2">
+        <slot name="actions" />
+      </div>
+
+      <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
+        <slot name="footer" />
+      </div>
+    </div>
+  </LpDrawer>
+</template>

package/src/components/LpSidebarNav.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+/*
+ * Inner body of LpSidebar: the section/item list plus the loading skeleton and
+ * the sliding active pill. Split out so LpSidebar can render the exact same nav
+ * in two shells — the static desktop rail and the swipeable mobile drawer —
+ * without duplicating markup. Not exported on its own; an LpSidebar detail.
+ */
+import { Motion } from "motion-v"
+import { usePillTransition } from "../composables/usePillTransition"
+import LpBadge from "./LpBadge.vue"
+import LpContextMenu from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+import type { SidebarItem, SidebarSection } from "./sidebar"
+
+const props = withDefaults(
+  defineProps<{
+    /** Normalised section list (LpSidebar collapses items/sections into this). */
+    groups: SidebarSection[]
+    /** Shared layoutId so the active pill flies between desktop/drawer renders. */
+    pillId: string
+    itemActive: (item: SidebarItem) => boolean
+    loading?: boolean
+    skeletonRows?: number
+    skeletonHeader?: boolean
+  }>(),
+  { skeletonRows: 6, skeletonHeader: true },
+)
+
+const emit = defineEmits<{
+  (e: "activate", item: SidebarItem): void
+}>()
+
+const pillTransition = usePillTransition()
+</script>
+
+<template>
+  <!-- Loading skeleton: an optional identity row + a run of item rows. -->
+  <div v-if="loading" class="flex min-h-0 flex-1 flex-col gap-4">
+    <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
+      <div class="size-10 shrink-0 animate-pulse rounded-pill bg-surface-soft" />
+      <div class="flex-1 space-y-2">
+        <div class="h-3.5 w-24 animate-pulse rounded bg-surface-soft" />
+        <div class="h-3 w-16 animate-pulse rounded bg-surface-soft/60" />
+      </div>
+    </div>
+    <div class="space-y-1">
+      <div
+        v-for="n in skeletonRows"
+        :key="n"
+        class="h-9 animate-pulse rounded-control bg-surface-soft"
+      />
+    </div>
+  </div>
+
+  <!-- min-h-full keeps the content as tall as the viewport so the #actions
+       block's mt-auto can still pin it to the bottom. -->
+  <LpScrollArea v-else class="min-h-0 flex-1" content-class="flex min-h-full flex-col gap-4">
+    <div v-for="(section, si) in groups" :key="si" class="flex flex-col gap-0.5">
+      <p
+        v-if="section.title"
+        class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
+      >
+        {{ section.title }}
+      </p>
+
+      <!-- Optional right-click menu per item; passthrough when item.menu is
+           absent or empty, so the item keeps the native context menu. -->
+      <LpContextMenu
+        v-for="item in section.items"
+        :key="item.id"
+        :items="item.menu ?? []"
+      >
+        <component
+          :is="item.href && !item.disabled ? 'a' : 'button'"
+          :href="item.href && !item.disabled ? item.href : undefined"
+          :type="item.href ? undefined : 'button'"
+          :disabled="item.href ? undefined : item.disabled"
+          :aria-current="itemActive(item) ? 'page' : undefined"
+          :aria-disabled="item.disabled || undefined"
+          class="group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+          :class="item.disabled
+            ? 'cursor-not-allowed text-muted/50'
+            : itemActive(item)
+              ? 'text-ink'
+              : 'text-muted hover:text-ink'"
+          @click="emit('activate', item)"
+        >
+          <!-- Sliding active pill -->
+          <Motion
+            v-if="itemActive(item)"
+            :layout-id="pillId"
+            :transition="pillTransition"
+            class="absolute inset-0 z-0 rounded-control bg-brand-soft"
+          />
+          <!-- #item slot for fully custom rows; falls back to icon+label+badge. -->
+          <slot name="item" :item="item" :active="itemActive(item)">
+            <LpIcon
+              v-if="item.icon"
+              :name="item.icon"
+              :size="17"
+              class="relative z-10 shrink-0 transition-colors"
+              :class="itemActive(item) ? 'text-brand' : ''"
+            />
+            <span class="relative z-10 min-w-0 flex-1 truncate text-left">{{ item.label }}</span>
+            <LpBadge
+              v-if="item.badge != null"
+              :tone="itemActive(item) ? 'brand' : 'neutral'"
+              class="relative z-10 shrink-0"
+            >
+              {{ item.badge }}
+            </LpBadge>
+          </slot>
+        </component>
+      </LpContextMenu>
+    </div>
+  </LpScrollArea>
+</template>

package/src/components/LpSkeleton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// Loading placeholder. Sizing comes from the consumer's classes (w-/h-).
+defineProps<{ rounded?: "control" | "card" | "pill" }>()
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    class="animate-pulse bg-surface-soft"
+    :class="{
+      'rounded-control': rounded === 'control' || !rounded,
+      'rounded-card': rounded === 'card',
+      'rounded-pill': rounded === 'pill',
+    }"
+  />
+</template>

package/src/components/LpSlider.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// Single-value slider (reka Slider). reka models value as an array; we expose
+// a plain number for the common single-thumb case. Themed via tokens.
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    /** Accessible name for the thumb when there's no visible label. */
+    ariaLabel?: string
+  }>(),
+  { modelValue: 0, min: 0, max: 100, step: 1 },
+)
+
+const emit = defineEmits<{
+  // fires live while dragging
+  (e: "update:modelValue", value: number): void
+  // fires once on release (reka valueCommit) — for commit-vs-preview splits
+  (e: "change", value: number): void
+}>()
+
+function onUpdate(v: number[] | undefined) {
+  if (v && v.length) emit("update:modelValue", v[0])
+}
+function onCommit(v: number[] | undefined) {
+  if (v && v.length) emit("change", v[0])
+}
+</script>
+
+<template>
+  <SliderRoot
+    :model-value="[props.modelValue]"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    class="relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55"
+    @update:model-value="onUpdate"
+    @value-commit="onCommit"
+  >
+    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
+      <SliderRange class="absolute h-full rounded-pill bg-brand" />
+    </SliderTrack>
+    <SliderThumb
+      :aria-label="ariaLabel"
+      class="block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
+    />
+  </SliderRoot>
+</template>

package/src/components/LpStat.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+// Stat tile: dot + caps label, big mono value, optional delta/trend badge and a
+// subtitle. A product pattern, fully token-driven — re-skins with the theme.
+import { computed } from "vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    value: string
+    hint?: string
+    icon?: string
+    online?: boolean
+    /** Change vs. a previous period. Renders a coloured arrow + this text. A
+     *  number is shown with a sign; a string is shown verbatim (e.g. "+12%"). */
+    delta?: number | string
+    /** Appended to a numeric delta, e.g. "%". Ignored for string deltas. */
+    deltaSuffix?: string
+    /** Trend direction. "auto" derives it from a numeric delta's sign. */
+    trend?: "auto" | "up" | "down" | "flat"
+    /** For metrics where down is good (latency, errors): swaps the colours so a
+     *  downward trend reads as positive (action) and upward as danger. */
+    invertTrend?: boolean
+  }>(),
+  { trend: "auto" },
+)
+
+// Resolve the trend direction: explicit wins; "auto" reads a numeric delta.
+const dir = computed<"up" | "down" | "flat">(() => {
+  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",
+)
+
+// up = good by default; invertTrend flips good/bad for "lower is better" metrics.
+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"
+})
+
+// Numeric delta gets an explicit sign; string deltas are shown as given.
+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)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-2">
+      <span v-if="online" class="size-1.5 rounded-full bg-action" />
+      <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
+      <span class="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
+        {{ label }}
+      </span>
+    </div>
+    <div class="flex items-baseline gap-2">
+      <span class="font-mono text-3xl font-medium tracking-tight text-ink">
+        {{ value }}
+      </span>
+      <span
+        v-if="showDelta"
+        class="inline-flex items-center gap-0.5 text-sm font-medium tabular-nums"
+        :class="trendColor"
+      >
+        <LpIcon :name="trendIcon" :size="14" />
+        {{ deltaText }}
+      </span>
+    </div>
+    <span v-if="hint" class="text-sm text-muted">{{ hint }}</span>
+  </div>
+</template>

package/src/components/LpStepper.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import LpIcon from "./LpIcon.vue"
+
+export interface Step {
+  label: string
+}
+
+defineProps<{ steps: Step[]; current: number }>()
+</script>
+
+<template>
+  <ol class="flex items-center gap-2">
+    <li
+      v-for="(step, i) in steps"
+      :key="i"
+      class="flex flex-1 items-center gap-2 last:flex-none"
+      :aria-current="i === current ? '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
+            ? 'border-transparent bg-brand text-ink-inverse'
+            : i === current
+              ? 'border-brand text-brand'
+              : 'border-line text-muted'"
+        >
+          <LpIcon v-if="i < current" name="lucide:check" :size="14" />
+          <template v-else>{{ i + 1 }}</template>
+        </span>
+        <span class="text-sm" :class="i <= current ? '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)" : ""
+          }}</span>
+        </span>
+      </div>
+      <span
+        v-if="i < steps.length - 1"
+        class="h-px flex-1"
+        :class="i < current ? 'bg-brand' : 'bg-line'"
+      />
+    </li>
+  </ol>
+</template>

package/src/components/LpSwitch.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from "reka-ui"
+
+defineProps<{ modelValue?: boolean; disabled?: boolean }>()
+defineEmits<{ (e: "update:modelValue", value: boolean): void }>()
+</script>
+
+<template>
+  <SwitchRoot
+    :model-value="modelValue"
+    :disabled="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"
+    @update:model-value="(v) => $emit('update:modelValue', v)"
+  >
+    <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"
+    />
+  </SwitchRoot>
+</template>