@leavepulse/ui 0.12.0

package/src/components/LpAutocomplete.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/*
+ * Free-text autocomplete — a text field that suggests as you type but never
+ * forces a choice. Unlike LpSelect (which binds to an option value and requires
+ * picking from the list), the typed text IS the model here: suggestions are
+ * just fill-in helpers. Use it for tags, hostnames, search-with-history, etc.
+ *
+ * Built on reka Combobox so we inherit the accessible listbox wiring (roving
+ * focus, aria-activedescendant, type-ahead). The list is decoupled from the
+ * value: choosing a suggestion only fills the text, and free input always wins.
+ *
+ * `restrict`/`pattern` reuse the same cursor- and IME-safe filter as LpInput.
+ */
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxViewport,
+} from "reka-ui"
+import { computed, ref, watch } from "vue"
+import { useInputFilter } from "../composables/useInputFilter"
+import { CLOSE_ICON, OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+
+export interface AutocompleteOption {
+  value: string
+  label?: string
+  description?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** The free text. This is the model — bind with v-model. */
+    modelValue?: string
+    /** Suggestions. Strings or {value,label,description}. */
+    options?: (AutocompleteOption | string)[]
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    size?: "sm" | "md" | "lg"
+    icon?: string
+    invalid?: boolean
+    emptyText?: string
+    loading?: boolean
+    loadingText?: string
+    /**
+     * Filter suggestions client-side against the typed text. Off when the
+     * parent fetches matches itself (server-side) — then pass the already
+     * narrowed `options` and leave this false.
+     */
+    filter?: boolean
+    /** Min chars before the list opens. 0 = open on focus. */
+    minChars?: number
+    /** Validation RegExp/string for the whole value (see LpInput). */
+    pattern?: RegExp | string
+    /** Allowed-character RegExp; hard-blocks other input (see LpInput). */
+    restrict?: RegExp
+  }>(),
+  {
+    placeholder: "Type…",
+    size: "md",
+    clearable: false,
+    filter: true,
+    minChars: 1,
+    emptyText: "No suggestions",
+    loading: false,
+    loadingText: "Searching…",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  /** Fired when a suggestion is explicitly chosen (not on free typing). */
+  (e: "select", value: string): void
+}>()
+
+const { isInvalid, onBeforeInput, onPaste } = useInputFilter({
+  pattern: () => props.pattern,
+  restrict: () => props.restrict,
+})
+
+const text = computed<string>({
+  get: () => props.modelValue ?? "",
+  set: (v) => emit("update:modelValue", v),
+})
+
+const isInvalidState = computed(() => props.invalid || isInvalid(props.modelValue))
+
+// Normalise string|option to a stable shape.
+const items = computed<AutocompleteOption[]>(() =>
+  (props.options ?? []).map((o) =>
+    typeof o === "string" ? { value: o } : o,
+  ),
+)
+
+const filtered = computed(() => {
+  const q = text.value.trim().toLowerCase()
+  if (!props.filter || !q) return items.value
+  return items.value.filter((o) => {
+    const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase()
+    return hay.includes(q)
+  })
+})
+
+const open = ref(false)
+const focused = ref(false)
+
+// Threshold met AND something to show → the list is allowed to open.
+const canOpen = computed(
+  () =>
+    text.value.length >= props.minChars &&
+    (props.loading || filtered.value.length > 0),
+)
+
+// Drive `open` REACTIVELY from canOpen instead of reading it inside @input — the
+// input event fires before the value round-trips into `text`, so reading canOpen
+// there is one keystroke stale (type one char → nothing; type a second → the
+// list for the first appears). Watching it recomputes after `text` settles.
+//
+// Open-only: once the user is focused and the list has opened we DON'T auto-close
+// it when the text is cleared — it stays up until Esc, blur, or a selection. So
+// we only ever flip `open` to true here, never back to false.
+watch(canOpen, (can) => {
+  if (focused.value && can) open.value = true
+})
+
+const hasValue = computed(() => (props.modelValue ?? "").length > 0)
+
+const anchorSize = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+
+function onFocus() {
+  focused.value = true
+  if (canOpen.value) open.value = true
+}
+
+function choose(opt: AutocompleteOption) {
+  emit("update:modelValue", opt.value)
+  emit("select", opt.value)
+  open.value = false
+}
+
+function clear() {
+  emit("update:modelValue", "")
+  open.value = false
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model:open="open"
+    :ignore-filter="true"
+    :reset-search-term-on-blur="false"
+    :reset-search-term-on-select="false"
+    :disabled="disabled"
+    class="relative"
+  >
+    <ComboboxAnchor
+      class="flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+      :class="[
+        anchorSize[size],
+        isInvalidState
+          ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'
+          : 'border-line focus-within:border-brand',
+      ]"
+    >
+      <LpIcon v-if="icon" :name="icon" :size="16" class="shrink-0 text-muted" />
+      <!--
+        Bind value one-way and update from the raw DOM event, NOT via reka's
+        ComboboxInput v-model: reka defers the value/search update to nextTick
+        when the list is closed (see processInputValue), which makes the first
+        keystroke lag by one char. Reading event.target.value here is synchronous
+        so `text` (and the reactive `open`) track the field exactly.
+      -->
+      <ComboboxInput
+        :model-value="text"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :aria-invalid="isInvalidState || undefined"
+        auto-focus
+        class="min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted"
+        @beforeinput="onBeforeInput"
+        @paste="onPaste"
+        @input="text = ($event.target as HTMLInputElement).value"
+        @focus="onFocus"
+        @blur="focused = false"
+      />
+      <button
+        v-if="clearable && hasValue"
+        type="button"
+        class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
+        aria-label="Clear"
+        @pointerdown.prevent="clear"
+      >
+        <LpIcon
+          name="lucide:x"
+          :size="16"
+          :class="CLOSE_ICON"
+        />
+      </button>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="6"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"
+        @open-auto-focus.prevent
+      >
+        <ComboboxViewport class="max-h-72 overflow-y-auto p-1">
+          <div v-if="loading" class="px-3 py-4 text-center text-sm italic text-muted">
+            {{ loadingText }}
+          </div>
+          <ComboboxEmpty v-else class="px-3 py-4 text-center text-sm italic text-muted">
+            {{ emptyText }}
+          </ComboboxEmpty>
+
+          <ComboboxItem
+            v-for="(opt, i) in filtered"
+            :key="opt.value"
+            :value="opt.value"
+            :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+            :class="[OPTION_ITEM, 'justify-between']"
+            @select.prevent="choose(opt)"
+          >
+            <span class="flex min-w-0 flex-col">
+              <span class="truncate">{{ opt.label ?? opt.value }}</span>
+              <span v-if="opt.description" class="truncate text-xs text-muted">
+                {{ opt.description }}
+              </span>
+            </span>
+          </ComboboxItem>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/src/components/LpAvatar.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+// Opt out of auto attr inheritance: the template has two root branches (menu /
+// no-menu), so fallthrough class/attrs/events are bound explicitly onto
+// AvatarRoot via v-bind="$attrs" in both.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui"
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed, onMounted, ref } from "vue"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+
+const avatar = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-surface-soft font-medium text-muted-strong",
+  variants: {
+    size: {
+      sm: "size-7 text-xs",
+      md: "size-9 text-sm",
+      lg: "size-12 text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+})
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+const props = withDefaults(
+  defineProps<{
+    src?: string
+    alt?: string
+    fallback?: string
+    size?: AvatarVariants["size"]
+    /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
+    menuItems?: ContextMenuItemDef[]
+  }>(),
+  { size: "md" },
+)
+
+const initials = computed(
+  () => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?",
+)
+
+// reka's AvatarImage resolves the image load on the client, so SSR renders the
+// fallback while the client swaps in <img> — a hydration mismatch for every
+// consumer. Gate the image on mount: server and first client render both show
+// the fallback (identical markup), then the image fades in post-hydration. This
+// keeps the fix in one place instead of each call site wrapping us in
+// <ClientOnly>.
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
+</script>
+
+<template>
+  <LpContextMenu v-if="menuItems?.length" :items="menuItems">
+    <AvatarRoot :class="avatar({ size })" v-bind="$attrs">
+      <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
+      <AvatarFallback>{{ initials }}</AvatarFallback>
+    </AvatarRoot>
+  </LpContextMenu>
+  <AvatarRoot v-else :class="avatar({ size })" v-bind="$attrs">
+    <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
+    <AvatarFallback>{{ initials }}</AvatarFallback>
+  </AvatarRoot>
+</template>

package/src/components/LpBadge.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed } from "vue"
+
+const badge = tv({
+  base: "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5 text-xs font-medium",
+  variants: {
+    tone: {
+      neutral: "bg-surface-soft text-muted-strong",
+      brand: "bg-brand-soft text-brand",
+      action: "bg-action/15 text-action",
+      success: "bg-action/15 text-action",
+      danger: "bg-danger-soft text-danger",
+      outline: "border border-line text-ink",
+    },
+  },
+  defaultVariants: { tone: "neutral" },
+})
+
+type BadgeVariants = VariantProps<typeof badge>
+
+const props = defineProps<{ tone?: BadgeVariants["tone"]; dot?: boolean }>()
+
+const classes = computed(() => badge({ tone: props.tone }))
+</script>
+
+<template>
+  <span :class="classes">
+    <span v-if="dot" class="size-1.5 rounded-full bg-current" />
+    <slot />
+  </span>
+</template>

package/src/components/LpBreadcrumbs.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import LpIcon from "./LpIcon.vue"
+
+export interface Crumb {
+  label: string
+  href?: string
+}
+
+defineProps<{ items: Crumb[] }>()
+defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
+</script>
+
+<template>
+  <nav class="flex items-center gap-1.5 text-sm" aria-label="Breadcrumb">
+    <template v-for="(item, i) in items" :key="i">
+      <LpIcon
+        v-if="i > 0"
+        name="lucide:chevron-right"
+        :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"
+        @click="$emit('navigate', item, i)"
+      >
+        {{ item.label }}
+      </a>
+      <span v-else :class="i === items.length - 1 ? 'text-ink' : 'text-muted'">
+        {{ item.label }}
+      </span>
+    </template>
+  </nav>
+</template>

package/src/components/LpButton.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed, type Component } from "vue"
+
+const button = tv({
+  base: [
+    "inline-flex select-none items-center justify-center gap-2 font-semibold",
+    "rounded-control transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
+    // tactile press: dips slightly on click, springs back on release.
+    "active:scale-[0.97] motion-reduce:active:scale-100",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed disabled:opacity-55 aria-disabled:cursor-not-allowed aria-disabled:opacity-55",
+  ],
+  variants: {
+    variant: {
+      solid: "bg-brand text-ink-inverse hover:bg-brand-hover",
+      action:
+        "bg-action text-ink-inverse shadow-[0_14px_28px_color-mix(in_srgb,var(--color-action)_24%,transparent)] hover:bg-action-hover",
+      outline: "border border-line-strong text-ink hover:border-brand hover:bg-white/[0.04]",
+      // raised surface tile with a border — a visible, neutral filled button
+      soft: "border border-line bg-surface-raised/80 text-ink hover:border-line-strong hover:bg-surface-soft",
+      ghost: "text-ink hover:bg-white/[0.06]",
+      muted: "text-muted hover:bg-white/[0.04] hover:text-ink",
+      // high-contrast light fill (e.g. a "download" CTA on a dark hero)
+      light: "border border-white/20 bg-white text-ink-inverse hover:bg-white/90",
+      danger: "bg-danger text-ink-inverse hover:bg-danger-hover",
+    },
+    size: {
+      xs: "h-8 px-2.5 text-xs",
+      sm: "h-(--size-control-sm) px-3 text-xs",
+      md: "h-(--size-control-md) px-4 text-sm",
+      lg: "h-(--size-control-lg) px-5 text-sm",
+    },
+    block: { true: "w-full" },
+    // icon-only square button — equal sides, no horizontal padding
+    square: { true: "aspect-square p-0" },
+    // soft elevation glow keyed to the variant's colour
+    glow: { true: "" },
+  },
+  compoundVariants: [
+    { square: true, size: "xs", class: "size-8" },
+    { square: true, size: "sm", class: "size-(--size-control-sm)" },
+    { square: true, size: "md", class: "size-(--size-control-md)" },
+    { square: true, size: "lg", class: "size-(--size-control-lg)" },
+    {
+      glow: true,
+      variant: "solid",
+      class:
+        "shadow-[0_8px_22px_color-mix(in_srgb,var(--color-brand)_28%,transparent)] hover:shadow-[0_12px_28px_color-mix(in_srgb,var(--color-brand)_36%,transparent)]",
+    },
+    {
+      glow: true,
+      variant: "danger",
+      class:
+        "shadow-[0_8px_22px_color-mix(in_srgb,var(--color-danger)_28%,transparent)] hover:shadow-[0_12px_28px_color-mix(in_srgb,var(--color-danger)_36%,transparent)]",
+    },
+    {
+      glow: true,
+      variant: "light",
+      class:
+        "shadow-[0_8px_18px_rgba(255,255,255,0.2)] hover:shadow-[0_12px_24px_rgba(255,255,255,0.3)]",
+    },
+  ],
+  defaultVariants: { variant: "solid", size: "md" },
+})
+
+type ButtonVariants = VariantProps<typeof button>
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ButtonVariants["variant"]
+    size?: ButtonVariants["size"]
+    block?: boolean
+    square?: boolean
+    glow?: boolean
+    /**
+     * Root element/component. Defaults to a native <button>. Pass a router link
+     * component (e.g. NuxtLink) or "a" to render a link-styled button; the kit
+     * stays DOM-agnostic, the consumer supplies the link component.
+     */
+    as?: string | Component
+    type?: "button" | "submit" | "reset"
+    disabled?: boolean
+  }>(),
+  { as: "button", type: "button" },
+)
+
+const isNativeButton = computed(() => props.as === "button")
+
+const classes = computed(() =>
+  button({
+    variant: props.variant,
+    size: props.size,
+    block: props.block,
+    square: props.square,
+    glow: props.glow,
+  }),
+)
+</script>
+
+<template>
+  <component
+    :is="as"
+    :type="isNativeButton ? type : undefined"
+    :disabled="isNativeButton ? disabled : undefined"
+    :aria-disabled="!isNativeButton && disabled ? 'true' : undefined"
+    :class="classes"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/LpCalendar.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/*
+ * Inline month calendar (reka Calendar). The kit-facing model is an ISO date
+ * STRING ("YYYY-MM-DD"), not reka's DateValue — we convert at the boundary so
+ * callers never touch @internationalized/date. Single-date selection; min/max
+ * bounds and an isDisabled predicate (also taking ISO strings). Themed via
+ * tokens, with the brand pill marking the selected day.
+ */
+import { type DateValue, parseDate, today, getLocalTimeZone } from "@internationalized/date"
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot,
+} from "reka-ui"
+import { computed } from "vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected date as "YYYY-MM-DD" (v-model). */
+    modelValue?: string
+    /** Earliest selectable date, "YYYY-MM-DD". */
+    min?: string
+    /** Latest selectable date, "YYYY-MM-DD". */
+    max?: string
+    /** Predicate to disable specific days; receives the ISO string. */
+    isDisabled?: (iso: string) => boolean
+    weekdayFormat?: "narrow" | "short" | "long"
+  }>(),
+  { weekdayFormat: "short" },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | undefined): void
+}>()
+
+// ISO string ⇄ reka DateValue. parseDate throws on junk, so guard.
+function toDate(iso?: string): DateValue | undefined {
+  if (!iso) return undefined
+  try {
+    return parseDate(iso)
+  } catch {
+    return undefined
+  }
+}
+
+const value = computed<DateValue | undefined>(() => toDate(props.modelValue))
+const minValue = computed(() => toDate(props.min))
+const maxValue = computed(() => toDate(props.max))
+const placeholderValue = computed(() => value.value ?? today(getLocalTimeZone()))
+
+function onUpdate(v: DateValue | undefined) {
+  emit("update:modelValue", v?.toString())
+}
+
+function disabledFor(date: DateValue): boolean {
+  return props.isDisabled?.(date.toString()) ?? false
+}
+
+const navBtn =
+  "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ weekDays, grid }"
+    :model-value="value"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :placeholder="placeholderValue"
+    :weekday-format="weekdayFormat"
+    :is-date-disabled="disabledFor"
+    fixed-weeks
+    class="inline-block rounded-card border border-line bg-surface-raised p-3"
+    @update:model-value="onUpdate"
+  >
+    <CalendarHeader class="mb-2 flex items-center justify-between gap-2">
+      <CalendarPrev :class="navBtn" aria-label="Previous month">
+        <LpIcon name="lucide:chevron-left" :size="16" />
+      </CalendarPrev>
+      <CalendarHeading class="text-sm font-semibold text-ink" />
+      <CalendarNext :class="navBtn" aria-label="Next month">
+        <LpIcon name="lucide:chevron-right" :size="16" />
+      </CalendarNext>
+    </CalendarHeader>
+
+    <CalendarGrid
+      v-for="month in grid"
+      :key="month.value.toString()"
+      class="w-full border-collapse select-none"
+    >
+      <CalendarGridHead>
+        <CalendarGridRow class="mb-1 flex">
+          <CalendarHeadCell
+            v-for="day in weekDays"
+            :key="day"
+            class="w-9 text-center text-[11px] font-medium text-muted"
+          >
+            {{ day }}
+          </CalendarHeadCell>
+        </CalendarGridRow>
+      </CalendarGridHead>
+      <CalendarGridBody>
+        <CalendarGridRow
+          v-for="(weekDates, i) in month.rows"
+          :key="`w-${i}`"
+          class="flex"
+        >
+          <CalendarCell
+            v-for="weekDate in weekDates"
+            :key="weekDate.toString()"
+            :date="weekDate"
+            class="p-0.5"
+          >
+            <CalendarCellTrigger
+              :day="weekDate"
+              :month="month.value"
+              class="flex size-8 items-center justify-center rounded-control text-sm text-ink outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[outside-view]:text-muted/40 data-[today]:font-semibold data-[today]:not-data-[selected]:text-brand data-[selected]:bg-brand data-[selected]:font-semibold data-[selected]:text-ink-inverse data-[selected]:hover:bg-brand-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-35 data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-35"
+            />
+          </CalendarCell>
+        </CalendarGridRow>
+      </CalendarGridBody>
+    </CalendarGrid>
+  </CalendarRoot>
+</template>