@leavepulse/ui 0.12.0

package/src/components/LpNotificationBell.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+/*
+ * Notification bell: an icon button with an unread badge that opens a popover
+ * feed on left-click and a quick-action menu on right-click. Each feed row has
+ * its own right-click menu too. Presentational and data-driven — the consumer
+ * fetches via the SDK, binds `items` / `unread-count` / `v-model:open`, and
+ * reacts to `mark-read` / `mark-unread` / `mark-all-read` / `dismiss` /
+ * `select`. Mirrors the kit convention (cf. LpSidebar): data in, events out,
+ * no data fetching inside.
+ */
+import { computed } from "vue"
+import LpBadge from "./LpBadge.vue"
+import LpButton from "./LpButton.vue"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpEmptyState from "./LpEmptyState.vue"
+import LpIcon from "./LpIcon.vue"
+import LpPopover from "./LpPopover.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+
+export interface NotificationItem {
+  id: string
+  title: string
+  body?: string
+  /** Optional icon name (e.g. "lucide:check-circle"). */
+  icon?: string
+  /** Optional deep link; the row becomes clickable when set. */
+  link?: string
+  /** ISO-8601 creation time; rendered as a relative label. */
+  createdAt?: string
+  /** Whether the notification has been read. */
+  read?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    items?: NotificationItem[]
+    /** Unread count for the badge; falls back to counting unread items. */
+    unreadCount?: number
+    loading?: boolean
+    emptyLabel?: string
+    title?: string
+    /** Cap the badge display (e.g. "9+"). */
+    maxBadge?: number
+    /** Right-click menu items; overrides the built-in quick actions. */
+    menuItems?: ContextMenuItemDef[]
+  }>(),
+  { items: () => [], maxBadge: 9 },
+)
+
+// Popover open state. A defineModel (not a plain `open` prop) gives a local
+// fallback, so the bell still opens when the consumer only listens to
+// @update:open without binding :open — otherwise the popover is stuck in
+// controlled-but-uncontrolled limbo and never opens.
+const open = defineModel<boolean>("open", { default: false })
+
+const emit = defineEmits<{
+  (e: "markRead", id: string): void
+  (e: "markUnread", id: string): void
+  (e: "markAllRead"): void
+  (e: "dismiss", id: string): void
+  (e: "select", item: NotificationItem): void
+}>()
+
+const unread = computed(() =>
+  props.unreadCount ?? props.items.filter((n) => !n.read).length,
+)
+const badgeLabel = computed(() =>
+  unread.value > props.maxBadge ? `${props.maxBadge}+` : String(unread.value),
+)
+const hasUnread = computed(() => unread.value > 0)
+
+// Right-click quick actions on the bell. "Open" is intentionally omitted — a
+// left-click already opens the feed, so the menu only carries actions you
+// can't get from the click itself. Because `open` is a defineModel we open on
+// left-click ourselves (the popover is anchor-only), which frees the trigger
+// button to also host LpContextMenu without the two fighting over the trigger.
+const contextMenu = computed<ContextMenuItemDef[]>(() =>
+  props.menuItems ?? [
+    {
+      label: "Mark all read",
+      icon: "lucide:check-check",
+      disabled: !hasUnread.value,
+      onSelect: () => emit("markAllRead"),
+    },
+  ],
+)
+
+function onSelect(item: NotificationItem) {
+  if (!item.read) emit("markRead", item.id)
+  emit("select", item)
+}
+
+// Per-row right-click actions: toggle read state, open a deep link, dismiss.
+// Producers wire the matching @mark-read / @mark-unread / @dismiss handlers; an
+// action only appears when it makes sense for that row.
+function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
+  const actions: ContextMenuItemDef[] = []
+  if (item.read) {
+    actions.push({
+      label: "Mark as unread",
+      icon: "lucide:dot",
+      onSelect: () => emit("markUnread", item.id),
+    })
+  } else {
+    actions.push({
+      label: "Mark as read",
+      icon: "lucide:check",
+      onSelect: () => emit("markRead", item.id),
+    })
+  }
+  if (item.link) {
+    actions.push({
+      label: "Open",
+      icon: "lucide:external-link",
+      onSelect: () => emit("select", item),
+    })
+  }
+  actions.push({
+    label: "Dismiss",
+    icon: "lucide:x",
+    danger: true,
+    separatorBefore: true,
+    onSelect: () => emit("dismiss", item.id),
+  })
+  return actions
+}
+
+// Compact relative time ("just now", "5m", "3h", "2d"); falls back to a date.
+function timeAgo(iso?: string): string {
+  if (!iso) return ""
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return ""
+  const secs = Math.max(0, Math.round((Date.now() - then) / 1000))
+  if (secs < 45) return "just now"
+  const mins = Math.round(secs / 60)
+  if (mins < 60) return `${mins}m`
+  const hrs = Math.round(mins / 60)
+  if (hrs < 24) return `${hrs}h`
+  const days = Math.round(hrs / 24)
+  if (days < 7) return `${days}d`
+  return new Date(then).toLocaleDateString()
+}
+</script>
+
+<template>
+  <LpPopover
+    v-model:open="open"
+    side="bottom"
+    align="end"
+    :side-offset="8"
+    panel-class="w-80 p-0"
+  >
+    <!-- `open` is controlled via defineModel, so the popover trigger is just an
+         anchor: we toggle open on click ourselves. That frees the button to
+         also be wrapped in LpContextMenu for the right-click quick-actions menu
+         (left-click → feed, right-click → menu) without two triggers clashing. -->
+    <template #trigger>
+      <LpContextMenu :items="contextMenu">
+        <LpButton
+          variant="ghost"
+          size="sm"
+          class="relative"
+          aria-label="Notifications"
+          @click="open = !open"
+        >
+          <LpIcon name="lucide:bell" :size="18" />
+          <LpBadge
+            v-if="hasUnread"
+            tone="danger"
+            class="absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+          >
+            {{ badgeLabel }}
+          </LpBadge>
+        </LpButton>
+      </LpContextMenu>
+    </template>
+
+    <header class="flex items-center justify-between gap-2 px-3 py-2.5">
+      <span class="text-sm font-semibold">{{ title ?? "Notifications" }}</span>
+      <button
+        v-if="hasUnread"
+        type="button"
+        class="rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
+        @click="emit('markAllRead')"
+      >
+        Mark all read
+      </button>
+    </header>
+
+    <div v-if="loading" class="space-y-1.5 px-2 pb-2">
+      <div v-for="i in 4" :key="i" class="h-12 animate-pulse rounded-control bg-surface-soft" />
+    </div>
+
+    <LpEmptyState
+      v-else-if="!items.length"
+      icon="lucide:bell-off"
+      :title="emptyLabel ?? 'No notifications'"
+      class="px-3 py-10"
+    />
+
+    <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
+         hover-lit) instead of full-width strips with hard dividers — lighter and
+         easier to scan. Each row carries its own right-click action menu. -->
+    <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
+      <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
+        <component
+          :is="item.link ? 'a' : 'button'"
+          :href="item.link || undefined"
+          :type="item.link ? undefined : 'button'"
+          class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
+          :class="item.read ? '' : 'bg-brand-soft/35'"
+          @click="onSelect(item)"
+        >
+          <span
+            class="grid size-7 shrink-0 place-items-center rounded-control"
+            :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+          >
+            <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
+          </span>
+          <span class="min-w-0 flex-1">
+            <span class="flex items-center gap-1.5">
+              <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
+                {{ item.title }}
+              </span>
+              <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
+            </span>
+            <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
+              {{ item.body }}
+            </span>
+            <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
+              {{ timeAgo(item.createdAt) }}
+            </span>
+          </span>
+        </component>
+      </LpContextMenu>
+    </LpScrollArea>
+  </LpPopover>
+</template>

package/src/components/LpNumberField.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// Numeric input with stepper buttons (reka NumberField). Themed via tokens.
+import {
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+} from "reka-ui"
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{
+  // null = empty field (reka's native state); consumers that need a number
+  // should default it themselves, the field doesn't invent a value.
+  modelValue?: number | null
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}>()
+
+defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
+</script>
+
+<template>
+  <NumberFieldRoot
+    :model-value="modelValue ?? undefined"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    class="flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+    @update:model-value="(v) => $emit('update:modelValue', v ?? null)"
+  >
+    <NumberFieldDecrement
+      class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+    >
+      <LpIcon
+        name="lucide:minus"
+        :size="15"
+        class="transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+      />
+    </NumberFieldDecrement>
+    <NumberFieldInput
+      class="min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+    />
+    <NumberFieldIncrement
+      class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+    >
+      <LpIcon
+        name="lucide:plus"
+        :size="15"
+        class="transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+      />
+    </NumberFieldIncrement>
+  </NumberFieldRoot>
+</template>

package/src/components/LpOtpInput.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/*
+ * One-time-code input (TOTP / 2FA). A row of single-character cells with the
+ * usual OTP ergonomics — auto-advance, backspace-to-previous, and pasting the
+ * whole code spreads it across the cells — all from reka PinInput.
+ *
+ * The kit-facing model is a single STRING (the joined code), not reka's per-cell
+ * array: `v-model` is "123456", and @complete fires that string once every cell
+ * is filled. Digits-only by default (TOTP); flip `alphanumeric` for backup codes.
+ */
+import { PinInputInput, PinInputRoot } from "reka-ui"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** The code as one string, e.g. "123456". Bind with v-model. */
+    modelValue?: string
+    /** Number of cells. */
+    length?: number
+    disabled?: boolean
+    /** Mask entered characters (•) — for sensitive codes. */
+    mask?: boolean
+    /** Allow letters too (backup codes). Default: digits only (TOTP). */
+    alphanumeric?: boolean
+    /** Error state — tints the cells red (e.g. wrong code). */
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+  }>(),
+  { length: 6, size: "md", alphanumeric: false },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  /** Fired once every cell is filled. Carries the full joined code. */
+  (e: "complete", value: string): void
+}>()
+
+// reka models the value as an array of per-cell strings; we bridge to a single
+// string at the boundary so callers never touch the array shape.
+const cells = computed<string[]>({
+  get: () => (props.modelValue ?? "").split("").slice(0, props.length),
+  set: (arr) => emit("update:modelValue", arr.join("")),
+})
+
+function onComplete(arr: string[]) {
+  emit("complete", arr.join(""))
+}
+
+const cellSize = {
+  sm: "size-9 text-base",
+  md: "size-11 text-lg",
+  lg: "size-13 text-xl",
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-model="cells"
+    :type="alphanumeric ? 'text' : 'number'"
+    :mask="mask"
+    :disabled="disabled"
+    otp
+    class="flex items-center gap-2"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="i in length"
+      :key="i"
+      :index="i - 1"
+      :aria-invalid="invalid || undefined"
+      :class="[
+        cellSize[size],
+        'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
+        'outline-none transition-colors duration-[var(--duration-fast)]',
+        'focus:border-brand focus:ring-2 focus:ring-ring',
+        'disabled:cursor-not-allowed disabled:opacity-55',
+        invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
+      ]"
+    />
+  </PinInputRoot>
+</template>

package/src/components/LpPagination.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+/*
+ * Page navigator. Pairs with LpTable but stands alone.
+ *
+ * Fixed-width window: we always render the SAME number of slots in the SAME
+ * positions — first, an inner run of (2*siblings+1) pages, last, and the two
+ * ellipsis spots. As the page changes only the *labels* in those slots change;
+ * no slot is added or removed, so the row never reflows and nothing jumps.
+ * Because slots are keyed by position (not page number), Vue reuses each node
+ * and just swaps its number — which lets the brand pill glide between slots via
+ * motion-v's shared layoutId with zero list-animation conflicts.
+ */
+import { Motion } from "motion-v"
+import { computed, useId } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Current page, 1-based (v-model:page). */
+    page?: number
+    /** Total item count — used with pageSize to derive the page count. */
+    total?: number
+    pageSize?: number
+    /** Direct page count; wins over total/pageSize when given. */
+    pageCount?: number
+    /** Pages shown on each side of the current one in the inner run. */
+    siblings?: number
+    disabled?: boolean
+  }>(),
+  { page: 1, pageSize: 10, siblings: 1 },
+)
+
+const emit = defineEmits<{
+  (e: "update:page", value: number): void
+  (e: "change", value: number): void
+}>()
+
+const count = computed(() => {
+  if (props.pageCount != null) return Math.max(1, props.pageCount)
+  if (props.total != null) return Math.max(1, Math.ceil(props.total / props.pageSize))
+  return 1
+})
+
+const current = computed(() => Math.min(Math.max(1, props.page), count.value))
+
+// A fixed run of page slots. Each slot is either a real page or a gap ("…").
+// The number of slots is constant for a given `count`, so the row width is
+// stable as the user pages through.
+type Slot = { kind: "page"; page: number } | { kind: "gap" }
+
+const slots = computed<Slot[]>(() => {
+  const c = count.value
+  const cur = current.value
+  const inner = props.siblings * 2 + 1 // pages shown around (and including) current
+  // Total = first + leftGap + inner + rightGap + last. Constant for a given
+  // count, so the row width never changes as you page through.
+  const total = inner + 4
+
+  // Few enough pages to list them all (still a fixed run = count).
+  if (c <= total) {
+    return Array.from({ length: c }, (_, i) => ({ kind: "page", page: i + 1 }))
+  }
+
+  // Inner window [lo..hi] of length `inner`, clamped into [3 .. c-2] so there's
+  // always a slot for first(1)+page 2 on the left and page c-1+last(c) on right.
+  let lo = cur - props.siblings
+  let hi = cur + props.siblings
+  if (lo < 3) {
+    hi += 3 - lo
+    lo = 3
+  }
+  if (hi > c - 2) {
+    lo -= hi - (c - 2)
+    hi = c - 2
+  }
+
+  const out: Slot[] = [{ kind: "page", page: 1 }]
+  // Dedicated gap slots: a gap when the window doesn't already touch the edge,
+  // otherwise the adjacent real page — so the slot COUNT stays fixed either way.
+  out.push(lo > 3 ? { kind: "gap" } : { kind: "page", page: 2 })
+  for (let p = lo; p <= hi; p++) out.push({ kind: "page", page: p })
+  out.push(hi < c - 2 ? { kind: "gap" } : { kind: "page", page: c - 1 })
+  out.push({ kind: "page", page: c })
+  return out
+})
+
+function go(p: number) {
+  if (props.disabled) return
+  const next = Math.min(Math.max(1, p), count.value)
+  if (next === current.value) return
+  emit("update:page", next)
+  emit("change", next)
+}
+
+// Geometry + interaction. No text/bg colour here — the pill paints the active
+// fill, the per-state text colour below sits on top.
+const navBase =
+  "relative flex size-(--size-control-sm) items-center justify-center rounded-control text-sm outline-none transition-[color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45 disabled:active:scale-100"
+
+const navArrow =
+  "border border-line text-muted hover:border-line-strong hover:text-ink disabled:hover:border-line disabled:hover:text-muted"
+
+// The sliding brand pill (shared layoutId) glides under the current page.
+const pillId = `lp-page-indicator-${useId()}`
+const pillTransition = usePillTransition()
+</script>
+
+<template>
+  <nav class="flex items-center gap-1.5" aria-label="Pagination">
+    <button
+      type="button"
+      :class="[navBase, navArrow]"
+      :disabled="disabled || current === 1"
+      aria-label="Previous page"
+      @click="go(current - 1)"
+    >
+      <LpIcon name="lucide:chevron-left" :size="16" />
+    </button>
+
+    <!-- Keyed by POSITION (slot-i), not page number, so Vue reuses each node and
+         only swaps the label — the row never re-creates buttons, so nothing
+         flickers and the pill can travel smoothly between slots. -->
+    <template v-for="(slot, i) in slots" :key="`slot-${i}`">
+      <span
+        v-if="slot.kind === 'gap'"
+        class="flex size-(--size-control-sm) items-center justify-center text-sm text-muted select-none"
+        aria-hidden="true"
+        >…</span
+      >
+      <button
+        v-else
+        type="button"
+        :class="[
+          navBase,
+          'min-w-(--size-control-sm) px-2',
+          slot.page === current
+            ? 'text-ink-inverse'
+            : 'border border-line text-muted hover:border-line-strong hover:text-ink',
+        ]"
+        :disabled="disabled"
+        :aria-current="slot.page === current ? 'page' : undefined"
+        @click="go(slot.page)"
+      >
+        <Motion
+          v-if="slot.page === current"
+          :layout-id="pillId"
+          :transition="pillTransition"
+          class="absolute inset-0 z-0 rounded-control bg-brand"
+        />
+        <span class="relative z-10">{{ slot.page }}</span>
+      </button>
+    </template>
+
+    <button
+      type="button"
+      :class="[navBase, navArrow]"
+      :disabled="disabled || current === count"
+      aria-label="Next page"
+      @click="go(current + 1)"
+    >
+      <LpIcon name="lucide:chevron-right" :size="16" />
+    </button>
+  </nav>
+</template>

package/src/components/LpPasswordInput.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+// Password field = LpInput + a show/hide toggle in its trailing slot.
+// No duplicated field styling — the shell lives in LpInput.
+import { ref } from "vue"
+import LpIcon from "./LpIcon.vue"
+import LpInput from "./LpInput.vue"
+
+defineProps<{ modelValue?: string; placeholder?: string; invalid?: boolean; disabled?: boolean }>()
+defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+const visible = ref(false)
+const inner = ref<InstanceType<typeof LpInput> | null>(null)
+defineExpose({
+  focus: (options?: FocusOptions) => inner.value?.focus(options),
+  blur: () => inner.value?.blur(),
+  select: () => inner.value?.select(),
+})
+</script>
+
+<template>
+  <LpInput
+    ref="inner"
+    :model-value="modelValue"
+    :type="visible ? 'text' : 'password'"
+    :placeholder="placeholder"
+    :invalid="invalid"
+    :disabled="disabled"
+    @update:model-value="(v) => $emit('update:modelValue', v)"
+  >
+    <template v-if="$slots.leading" #leading><slot name="leading" /></template>
+    <template #trailing>
+      <button
+        type="button"
+        class="group rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
+        :aria-label="visible ? 'Hide password' : 'Show password'"
+        @click="visible = !visible"
+      >
+        <LpIcon
+          :name="visible ? 'lucide:eye-off' : 'lucide:eye'"
+          :size="16"
+          class="transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-90 motion-reduce:group-active:scale-100"
+        />
+      </button>
+    </template>
+  </LpInput>
+</template>