@leavepulse/ui 0.44.0 → 0.45.1

package/src/components/LpDateRangePicker.vue

@@ -0,0 +1,226 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Range field + popover: presets on one side, a range calendar on the other.
+ * The model is `{ start, end }` of ISO days, like LpDatePicker's single day.
+ * Picking the second end or a preset fills the field and closes the popover.
+ * Two months sit side by side where there is room, one on a phone.
+ */
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { useLocale } from "../composables/useLocale"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
+import {
+  clampRange,
+  type DateRange,
+  type DateRangePreset,
+  defaultRangePresets,
+  formatRange,
+  normalizeRange,
+  sameRange,
+} from "./dateRange"
+import { POPOVER_PANEL } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpRangeCalendar, { type RangeChange } from "./LpRangeCalendar.vue"
+
+export interface DateRangePickerLabels extends Record<string, string> {
+  placeholder: string
+  clear: string
+  presets: string
+  today: string
+  last7: string
+  last30: string
+  thisMonth: string
+  lastMonth: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected range (v-model). */
+    modelValue?: DateRange
+    placeholder?: string
+    min?: string
+    max?: string
+    isDisabled?: (iso: string) => boolean
+    isDateUnavailable?: (iso: string) => boolean
+    /** Longest allowed range, in days. */
+    maximumDays?: number
+    /** Shortcut ranges; an empty list hides them. Defaults to the built-in set. */
+    presets?: DateRangePreset[]
+    clearable?: boolean
+    disabled?: boolean
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+    locale?: string
+    /** Intl format for the displayed ends. */
+    format?: Intl.DateTimeFormatOptions
+    labels?: Partial<DateRangePickerLabels>
+  }>(),
+  { size: "md" },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: DateRange | undefined): void
+}>()
+
+const text = useLabels<DateRangePickerLabels>(
+  "dateRangePicker",
+  {
+    placeholder: "Pick a date range",
+    clear: "Clear",
+    presets: "Presets",
+    today: "Today",
+    last7: "Last 7 days",
+    last30: "Last 30 days",
+    thisMonth: "This month",
+    lastMonth: "Last month",
+  },
+  () => props.labels,
+)
+
+const open = ref(false)
+const value = computed(() => normalizeRange(props.modelValue))
+const locale = useLocale(() => props.locale)
+const display = computed(() => (value.value ? formatRange(value.value, locale.value, props.format) : ""))
+
+const presetList = computed<DateRangePreset[]>(() => {
+  return props.presets ?? defaultRangePresets(text.value)
+})
+
+/*
+ * A range picked on the calendar keeps the popover open: the field already
+ * shows it, and the user can still pull either end before clicking away.
+ * Closing on the second click left no moment to adjust. A preset is a whole
+ * answer, so it closes.
+ */
+function pick(range: DateRange, change?: RangeChange) {
+  emit("update:modelValue", range)
+  if (!change) open.value = false
+}
+
+function pickPreset(preset: DateRangePreset) {
+  const range = clampRange(preset.range(), props.min, props.max)
+  if (range) pick(range)
+}
+
+function presetFits(preset: DateRangePreset): boolean {
+  return !!clampRange(preset.range(), props.min, props.max)
+}
+
+const wide = ref(false)
+let query: MediaQueryList | undefined
+const onQuery = () => {
+  wide.value = !!query?.matches
+}
+onMounted(() => {
+  query = window.matchMedia("(min-width: 640px)")
+  onQuery()
+  query.addEventListener("change", onQuery)
+})
+onBeforeUnmount(() => query?.removeEventListener("change", onQuery))
+
+const shellSize = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled)
+</script>
+
+<template>
+  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <PopoverRoot v-model:open="open">
+      <PopoverTrigger as-child>
+        <button
+          v-bind="{ ...attrs, class: undefined, style: undefined }"
+          :id="field.id"
+          type="button"
+          :disabled="field.disabled"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="field.describedBy"
+          class="group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+          :class="[
+            shellSize[size],
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+          ]"
+        >
+          <LpIcon name="lucide:calendar-range" :size="16" class="shrink-0 text-muted" />
+          <LpRollingText
+            :value="display || placeholder || text.placeholder"
+            align="start"
+            class="min-w-0 flex-1"
+            :class="display ? '' : 'text-muted'"
+          />
+          <span v-if="showClear" class="w-[15px] shrink-0" aria-hidden="true" />
+          <LpIcon
+            name="lucide:chevron-down"
+            :size="15"
+            class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180 motion-reduce:transition-none"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          :side-offset="6"
+          align="start"
+          :collision-padding="8"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) flex max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 outline-none sm:flex-row']"
+        >
+          <div
+            v-if="presetList.length"
+            role="group"
+            :aria-label="text.presets"
+            class="flex gap-1 overflow-x-auto border-b border-line p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0"
+          >
+            <button
+              v-for="(preset, i) in presetList"
+              :key="`${i}:${preset.label}`"
+              type="button"
+              :disabled="!presetFits(preset)"
+              :aria-pressed="sameRange(value, preset.range())"
+              class="shrink-0 rounded-control px-2.5 py-1.5 text-left text-sm whitespace-nowrap text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-brand-soft aria-pressed:text-ink"
+              @click="pickPreset(preset)"
+            >
+              {{ preset.label }}
+            </button>
+          </div>
+          <LpRangeCalendar
+            :model-value="value"
+            :min="min"
+            :max="max"
+            :is-disabled="isDisabled"
+            :is-date-unavailable="isDateUnavailable"
+            :maximum-days="maximumDays"
+            :months="wide ? 2 : 1"
+            :locale="locale"
+            class="border-0 bg-transparent"
+            @update:model-value="pick"
+          />
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+    <button
+      v-if="showClear"
+      type="button"
+      :aria-label="text.clear"
+      class="absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+      @click="emit('update:modelValue', undefined)"
+    >
+      <LpIcon name="lucide:x" :size="15" />
+    </button>
+  </div>
+</template>

package/src/components/LpDrawer.vue

@@ -162,7 +162,7 @@ watch(() => props.open, (open) => (open ? claim() : release()), { immediate: tru
 onBeforeUnmount(release)
 
 const contentClass = computed(() => {
-  const surface = frosted.value ? (layer.value.nested ? "lp-glass-overlay--nested" : "lp-glass-overlay") : "bg-surface-raised"
+  const surface = frosted.value ? (layer.value.nested ? "lp-glass-overlay lp-glass-overlay--nested" : "lp-glass-overlay") : "bg-surface-raised"
   const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`
   const map: Record<Direction, string> = {
     left: "inset-y-0 left-0 border-r rounded-r-card",

package/src/components/LpDropdownMenu.vue

@@ -28,6 +28,7 @@ defineProps<{ items: MenuItem[] }>()
     </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
+        :collision-padding="8"
         :side-offset="6"
         align="end"
         :class="[POPOVER_PANEL, 'z-(--z-popover) min-w-44 p-1 outline-none']"

package/src/components/LpFieldNotice.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/*
+ * The floating note from useFieldNotice: anchored under the nearest
+ * `relative` box, over whatever sits below it (usually the hint), so it never
+ * moves the layout. It slides in, slides out, and nudges sideways when the
+ * same note is raised again while showing.
+ */
+import { ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import type { FieldNotice } from "../composables/useFieldNotice"
+import LpIcon from "./LpIcon.vue"
+
+const props = defineProps<{
+  notice: FieldNotice
+  id?: string
+}>()
+
+const el = ref<HTMLElement | null>(null)
+
+watch(
+  () => props.notice.seq.value,
+  (_, before) => {
+    if (before === undefined || !el.value || prefersReducedMotion()) return
+    el.value.animate(
+      [
+        { transform: "translateX(0)" },
+        { transform: "translateX(-3px)" },
+        { transform: "translateX(3px)" },
+        { transform: "translateX(0)" },
+      ],
+      { duration: 240, easing: "ease-out" },
+    )
+  },
+)
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+    leave-active-class="transition-[opacity,translate] duration-fast ease-out motion-reduce:transition-none"
+    enter-from-class="-translate-y-1 opacity-0"
+    leave-to-class="-translate-y-1 opacity-0"
+  >
+    <div
+      v-if="notice.message.value"
+      :id="id"
+      ref="el"
+      role="status"
+      class="pointer-events-none absolute top-full left-0 z-20 mt-1.5 flex max-w-full items-center gap-1.5 rounded-control border px-2 py-1 text-xs shadow-sm"
+      :class="
+        notice.tone.value === 'danger'
+          ? 'border-danger/40 bg-surface-raised bg-[linear-gradient(var(--color-danger-soft),var(--color-danger-soft))] text-danger'
+          : 'border-line bg-surface-raised text-ink'
+      "
+    >
+      <LpIcon
+        :name="notice.tone.value === 'danger' ? 'lucide:circle-alert' : 'lucide:info'"
+        :size="13"
+        class="shrink-0"
+        :class="notice.tone.value === 'danger' ? '' : 'text-muted'"
+      />
+      <span class="truncate">{{ notice.message.value }}</span>
+    </div>
+  </Transition>
+</template>

package/src/components/LpFormField.vue

@@ -17,8 +17,10 @@ export default { inheritAttrs: false }
  */
 import { Label } from "reka-ui"
 import { computed, useId, useSlots } from "vue"
+import LpFieldNotice from "./LpFieldNotice.vue"
 import LpShift from "./LpShift.vue"
 import { fieldMessageId, provideField } from "../composables/useField"
+import { useFieldNotice } from "../composables/useFieldNotice"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = defineProps<{
@@ -37,6 +39,8 @@ const id = computed(() => props.id ?? generated)
 const messageId = computed(() => fieldMessageId(id.value))
 const slots = useSlots()
 const hasMessage = computed(() => !!props.error || !!props.hint || !!slots.hint)
+const notice = useFieldNotice()
+const noticeId = computed(() => `${id.value}-notice`)
 
 // The control inside reads its id, description and states from here, so the
 // label, the message line and aria-invalid stay tied to it without the
@@ -45,13 +49,20 @@ provideField(
   computed(() => ({
     id: id.value,
     labelId: props.label ? `${id.value}-label` : undefined,
-    describedBy: hasMessage.value ? messageId.value : undefined,
+    describedBy:
+      [hasMessage.value ? messageId.value : "", notice.message.value ? noticeId.value : ""]
+        .filter(Boolean)
+        .join(" ") || undefined,
     invalid: !!props.invalid || !!props.error,
     required: !!props.required,
     disabled: !!props.disabled,
+    notify: notice.show,
+    clearNotice: notice.clear,
   })),
 )
 
+defineExpose({ notify: notice.show, clearNotice: notice.clear })
+
 // The field stacks label and control with a fixed gap; a denser form needs that gap smaller.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-w-0 flex-col gap-1.5",
@@ -72,7 +83,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       <span v-if="required" class="text-danger">*</span>
     </Label>
 
-    <slot :id="id" :describedBy="hasMessage ? messageId : undefined" />
+    <!-- The note from `notify` floats from here, over the message line below,
+         so raising one never moves the form; the line fades out under it
+         rather than showing through. -->
+    <div class="relative">
+      <slot :id="id" :describedBy="hasMessage ? messageId : undefined" />
+      <LpFieldNotice :notice="notice" :id="noticeId" />
+    </div>
 
     <!-- Swapping hint→error changes the text but not the height, so the eased
          box only ever moves when a message appears or clears.
@@ -83,12 +100,24 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
          leave every message-less field a row taller than before — and would be
          a step the easing could not cover, since it exists even at height 0. -->
     <LpShift axis="height">
-      <p v-if="error" :id="messageId" class="pt-1.5 text-xs text-danger">{{ error }}</p>
+      <p
+        v-if="error"
+        :id="messageId"
+        class="pt-1.5 text-xs text-danger transition-opacity duration-fast"
+        :class="notice.message.value ? 'opacity-0' : ''"
+      >
+        {{ error }}
+      </p>
       <!-- The hint is a slot as well as a prop: most are a sentence, but some
            carry a link or a unit in <code>, and a prop can only be text. Callers
            had been reaching for `#hint` on the assumption it existed — it
            rendered nothing, so the explanation silently went missing. -->
-      <p v-else-if="hint || $slots.hint" :id="messageId" class="pt-1.5 text-xs text-muted">
+      <p
+        v-else-if="hint || $slots.hint"
+        :id="messageId"
+        class="pt-1.5 text-xs text-muted transition-opacity duration-fast"
+        :class="notice.message.value ? 'opacity-0' : ''"
+      >
         <slot name="hint">{{ hint }}</slot>
       </p>
     </LpShift>

package/src/components/LpIcon.vue

@@ -8,11 +8,13 @@
  * inline <svg> synchronously from getIcon() so the server and client produce
  * identical markup. The <Icon> component only resolves icons after mount, which
  * left empty SSR placeholders and caused hydration mismatches. We fall back to
- * <Icon> only for icons that aren't registered yet (e.g. fetched on demand).
+ * <Icon> only for non-lucide icons that aren't registered (fetched on demand).
+ * A lucide icon outside the kit's own set loads from the bundled collection
+ * (see icons.ts); until then an empty box of the same size holds its place.
  */
-import { computed } from "vue"
+import { computed, watchEffect } from "vue"
 import { Icon, getIcon } from "@iconify/vue"
-import "../icons" // registers the lucide collection offline
+import { iconsVersion, requestIcon } from "../icons"
 
 const props = defineProps<{
   /** iconify name, e.g. "lucide:check". Bare names assume the lucide set. */
@@ -25,7 +27,15 @@ function resolve(name: string): string {
 }
 
 const fullName = computed(() => resolve(props.name))
-const data = computed(() => getIcon(fullName.value))
+const data = computed(() => {
+  void iconsVersion.value
+  return getIcon(fullName.value)
+})
+const lucide = computed(() => fullName.value.startsWith("lucide:"))
+
+watchEffect(() => {
+  if (!data.value && lucide.value) requestIcon(fullName.value)
+})
 const dim = computed(() => props.size ?? "1em")
 </script>
 
@@ -39,6 +49,14 @@ const dim = computed(() => props.size ?? "1em")
     aria-hidden="true"
     v-html="data.body"
   />
+  <svg
+    v-else-if="lucide"
+    xmlns="http://www.w3.org/2000/svg"
+    :width="dim"
+    :height="dim"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  />
   <Icon
     v-else
     :icon="fullName"

package/src/components/LpInput.vue

@@ -7,6 +7,7 @@ import { tv, type VariantProps } from "tailwind-variants"
 import { computed, ref, useAttrs, useSlots } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
+import { DEFAULT_MASK_TOKENS, useInputMask, type MaskSpec, type MaskTokens } from "../composables/useInputMask"
 import { mergeClass } from "../composables/useMergedClass"
 import LpFormField from "./LpFormField.vue"
 import LpIcon from "./LpIcon.vue"
@@ -73,17 +74,56 @@ const props = withDefaults(
      * disallowed input/paste at the source — cursor- and IME-safe.
      */
     restrict?: RegExp
+    /**
+     * Format-as-you-type mask ("+0 (000) 000-00-00", a list, or a function of
+     * the raw value). The model holds the masked text; `update:raw` carries
+     * the accepted characters alone.
+     */
+    mask?: MaskSpec
+    /** Extra or replacement mask tokens, one-character RegExps by key. */
+    maskTokens?: MaskTokens
   }>(),
   { type: "text", size: "md" },
 )
 
-defineEmits<{ (e: "update:modelValue", value: string): void }>()
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  (e: "update:raw", value: string): void
+}>()
 
 const { isInvalid, onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
   pattern: () => props.pattern,
   restrict: () => props.restrict,
 })
 
+const masking = useInputMask({
+  mask: () => props.mask,
+  tokens: () => (props.maskTokens ? { ...DEFAULT_MASK_TOKENS, ...props.maskTokens } : undefined),
+  onChange: (_masked, raw) => emit("update:raw", raw),
+})
+const shown = computed(() => (masking.active.value ? masking.format(props.modelValue).masked : props.modelValue))
+
+function onBefore(event: InputEvent): void {
+  onBeforeInput(event)
+  if (!event.defaultPrevented) masking.onBeforeInput(event)
+  if (event.defaultPrevented && masking.active.value && event.target instanceof HTMLInputElement) {
+    emit("update:modelValue", event.target.value)
+  }
+}
+
+function onInputEvent(event: Event): void {
+  if (masking.active.value) masking.onInput(event)
+  else filterInput(event)
+  emit("update:modelValue", (event.target as HTMLInputElement).value)
+}
+
+function onComposed(event: CompositionEvent): void {
+  if (masking.active.value) {
+    masking.onCompositionEnd(event)
+    emit("update:modelValue", (event.target as HTMLInputElement).value)
+  } else onCompositionEnd(event)
+}
+
 // Pattern failure folds into the same invalid state as the explicit prop/error.
 const patternInvalid = computed(() => isInvalid(props.modelValue))
 
@@ -134,7 +174,7 @@ defineExpose({
     :error="hasField ? error : undefined"
     :required="hasField ? required : undefined"
     :id="hasField ? field.id : undefined"
-    :class="hasField ? rootClass : undefined"
+    :class="hasField ? rootClass : 'contents'"
     :style="hasField ? rootStyle : undefined"
   >
     <div
@@ -150,7 +190,7 @@ defineExpose({
         v-bind="inputAttrs"
         :id="field.id"
         :type="type"
-        :value="modelValue"
+        :value="shown"
         :placeholder="placeholder"
         :disabled="field.disabled"
         :required="field.required || undefined"
@@ -161,10 +201,10 @@ defineExpose({
           hasLeading ? 'pl-2' : padX[size ?? 'md'],
           hasTrailing ? '' : padX[size ?? 'md'],
         ]"
-        @beforeinput="onBeforeInput"
+        @beforeinput="onBefore"
         @paste="onPaste"
-        @compositionend="onCompositionEnd"
-        @input="filterInput($event); $emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        @compositionend="onComposed"
+        @input="onInputEvent"
       />
       <slot name="trailing" />
     </div>