@leavepulse/ui 0.12.0

package/src/components/countries-data.ts

@@ -0,0 +1,207 @@
+import type { Country } from "./countries"
+
+/*
+ * Country dial-code data — split out from countries.ts so it can be code-split
+ * into its own chunk and loaded lazily by LpPhoneInput (see loadCountries).
+ * E.164 calling codes, sorted by name. Not a substitute for full phone parsing.
+ */
+export const COUNTRIES: Country[] = [
+  { iso2: "AF", name: "Afghanistan", dial: "93" },
+  { iso2: "AL", name: "Albania", dial: "355" },
+  { iso2: "DZ", name: "Algeria", dial: "213" },
+  { iso2: "AD", name: "Andorra", dial: "376" },
+  { iso2: "AO", name: "Angola", dial: "244" },
+  { iso2: "AG", name: "Antigua and Barbuda", dial: "1268" },
+  { iso2: "AR", name: "Argentina", dial: "54" },
+  { iso2: "AM", name: "Armenia", dial: "374" },
+  { iso2: "AU", name: "Australia", dial: "61" },
+  { iso2: "AT", name: "Austria", dial: "43" },
+  { iso2: "AZ", name: "Azerbaijan", dial: "994" },
+  { iso2: "BS", name: "Bahamas", dial: "1242" },
+  { iso2: "BH", name: "Bahrain", dial: "973" },
+  { iso2: "BD", name: "Bangladesh", dial: "880" },
+  { iso2: "BB", name: "Barbados", dial: "1246" },
+  { iso2: "BY", name: "Belarus", dial: "375" },
+  { iso2: "BE", name: "Belgium", dial: "32" },
+  { iso2: "BZ", name: "Belize", dial: "501" },
+  { iso2: "BJ", name: "Benin", dial: "229" },
+  { iso2: "BT", name: "Bhutan", dial: "975" },
+  { iso2: "BO", name: "Bolivia", dial: "591" },
+  { iso2: "BA", name: "Bosnia and Herzegovina", dial: "387" },
+  { iso2: "BW", name: "Botswana", dial: "267" },
+  { iso2: "BR", name: "Brazil", dial: "55" },
+  { iso2: "BN", name: "Brunei", dial: "673" },
+  { iso2: "BG", name: "Bulgaria", dial: "359" },
+  { iso2: "BF", name: "Burkina Faso", dial: "226" },
+  { iso2: "BI", name: "Burundi", dial: "257" },
+  { iso2: "KH", name: "Cambodia", dial: "855" },
+  { iso2: "CM", name: "Cameroon", dial: "237" },
+  { iso2: "CA", name: "Canada", dial: "1" },
+  { iso2: "CV", name: "Cape Verde", dial: "238" },
+  { iso2: "CF", name: "Central African Republic", dial: "236" },
+  { iso2: "TD", name: "Chad", dial: "235" },
+  { iso2: "CL", name: "Chile", dial: "56" },
+  { iso2: "CN", name: "China", dial: "86" },
+  { iso2: "CO", name: "Colombia", dial: "57" },
+  { iso2: "KM", name: "Comoros", dial: "269" },
+  { iso2: "CG", name: "Congo", dial: "242" },
+  { iso2: "CD", name: "Congo (DRC)", dial: "243" },
+  { iso2: "CR", name: "Costa Rica", dial: "506" },
+  { iso2: "CI", name: "Côte d’Ivoire", dial: "225" },
+  { iso2: "HR", name: "Croatia", dial: "385" },
+  { iso2: "CU", name: "Cuba", dial: "53" },
+  { iso2: "CY", name: "Cyprus", dial: "357" },
+  { iso2: "CZ", name: "Czechia", dial: "420" },
+  { iso2: "DK", name: "Denmark", dial: "45" },
+  { iso2: "DJ", name: "Djibouti", dial: "253" },
+  { iso2: "DM", name: "Dominica", dial: "1767" },
+  { iso2: "DO", name: "Dominican Republic", dial: "1809" },
+  { iso2: "EC", name: "Ecuador", dial: "593" },
+  { iso2: "EG", name: "Egypt", dial: "20" },
+  { iso2: "SV", name: "El Salvador", dial: "503" },
+  { iso2: "GQ", name: "Equatorial Guinea", dial: "240" },
+  { iso2: "ER", name: "Eritrea", dial: "291" },
+  { iso2: "EE", name: "Estonia", dial: "372" },
+  { iso2: "SZ", name: "Eswatini", dial: "268" },
+  { iso2: "ET", name: "Ethiopia", dial: "251" },
+  { iso2: "FJ", name: "Fiji", dial: "679" },
+  { iso2: "FI", name: "Finland", dial: "358" },
+  { iso2: "FR", name: "France", dial: "33" },
+  { iso2: "GA", name: "Gabon", dial: "241" },
+  { iso2: "GM", name: "Gambia", dial: "220" },
+  { iso2: "GE", name: "Georgia", dial: "995" },
+  { iso2: "DE", name: "Germany", dial: "49" },
+  { iso2: "GH", name: "Ghana", dial: "233" },
+  { iso2: "GR", name: "Greece", dial: "30" },
+  { iso2: "GD", name: "Grenada", dial: "1473" },
+  { iso2: "GT", name: "Guatemala", dial: "502" },
+  { iso2: "GN", name: "Guinea", dial: "224" },
+  { iso2: "GW", name: "Guinea-Bissau", dial: "245" },
+  { iso2: "GY", name: "Guyana", dial: "592" },
+  { iso2: "HT", name: "Haiti", dial: "509" },
+  { iso2: "HN", name: "Honduras", dial: "504" },
+  { iso2: "HK", name: "Hong Kong", dial: "852" },
+  { iso2: "HU", name: "Hungary", dial: "36" },
+  { iso2: "IS", name: "Iceland", dial: "354" },
+  { iso2: "IN", name: "India", dial: "91" },
+  { iso2: "ID", name: "Indonesia", dial: "62" },
+  { iso2: "IR", name: "Iran", dial: "98" },
+  { iso2: "IQ", name: "Iraq", dial: "964" },
+  { iso2: "IE", name: "Ireland", dial: "353" },
+  { iso2: "IL", name: "Israel", dial: "972" },
+  { iso2: "IT", name: "Italy", dial: "39" },
+  { iso2: "JM", name: "Jamaica", dial: "1876" },
+  { iso2: "JP", name: "Japan", dial: "81" },
+  { iso2: "JO", name: "Jordan", dial: "962" },
+  { iso2: "KZ", name: "Kazakhstan", dial: "7" },
+  { iso2: "KE", name: "Kenya", dial: "254" },
+  { iso2: "KI", name: "Kiribati", dial: "686" },
+  { iso2: "KW", name: "Kuwait", dial: "965" },
+  { iso2: "KG", name: "Kyrgyzstan", dial: "996" },
+  { iso2: "LA", name: "Laos", dial: "856" },
+  { iso2: "LV", name: "Latvia", dial: "371" },
+  { iso2: "LB", name: "Lebanon", dial: "961" },
+  { iso2: "LS", name: "Lesotho", dial: "266" },
+  { iso2: "LR", name: "Liberia", dial: "231" },
+  { iso2: "LY", name: "Libya", dial: "218" },
+  { iso2: "LI", name: "Liechtenstein", dial: "423" },
+  { iso2: "LT", name: "Lithuania", dial: "370" },
+  { iso2: "LU", name: "Luxembourg", dial: "352" },
+  { iso2: "MO", name: "Macau", dial: "853" },
+  { iso2: "MG", name: "Madagascar", dial: "261" },
+  { iso2: "MW", name: "Malawi", dial: "265" },
+  { iso2: "MY", name: "Malaysia", dial: "60" },
+  { iso2: "MV", name: "Maldives", dial: "960" },
+  { iso2: "ML", name: "Mali", dial: "223" },
+  { iso2: "MT", name: "Malta", dial: "356" },
+  { iso2: "MH", name: "Marshall Islands", dial: "692" },
+  { iso2: "MR", name: "Mauritania", dial: "222" },
+  { iso2: "MU", name: "Mauritius", dial: "230" },
+  { iso2: "MX", name: "Mexico", dial: "52" },
+  { iso2: "FM", name: "Micronesia", dial: "691" },
+  { iso2: "MD", name: "Moldova", dial: "373" },
+  { iso2: "MC", name: "Monaco", dial: "377" },
+  { iso2: "MN", name: "Mongolia", dial: "976" },
+  { iso2: "ME", name: "Montenegro", dial: "382" },
+  { iso2: "MA", name: "Morocco", dial: "212" },
+  { iso2: "MZ", name: "Mozambique", dial: "258" },
+  { iso2: "MM", name: "Myanmar", dial: "95" },
+  { iso2: "NA", name: "Namibia", dial: "264" },
+  { iso2: "NR", name: "Nauru", dial: "674" },
+  { iso2: "NP", name: "Nepal", dial: "977" },
+  { iso2: "NL", name: "Netherlands", dial: "31" },
+  { iso2: "NZ", name: "New Zealand", dial: "64" },
+  { iso2: "NI", name: "Nicaragua", dial: "505" },
+  { iso2: "NE", name: "Niger", dial: "227" },
+  { iso2: "NG", name: "Nigeria", dial: "234" },
+  { iso2: "KP", name: "North Korea", dial: "850" },
+  { iso2: "MK", name: "North Macedonia", dial: "389" },
+  { iso2: "NO", name: "Norway", dial: "47" },
+  { iso2: "OM", name: "Oman", dial: "968" },
+  { iso2: "PK", name: "Pakistan", dial: "92" },
+  { iso2: "PW", name: "Palau", dial: "680" },
+  { iso2: "PS", name: "Palestine", dial: "970" },
+  { iso2: "PA", name: "Panama", dial: "507" },
+  { iso2: "PG", name: "Papua New Guinea", dial: "675" },
+  { iso2: "PY", name: "Paraguay", dial: "595" },
+  { iso2: "PE", name: "Peru", dial: "51" },
+  { iso2: "PH", name: "Philippines", dial: "63" },
+  { iso2: "PL", name: "Poland", dial: "48" },
+  { iso2: "PT", name: "Portugal", dial: "351" },
+  { iso2: "QA", name: "Qatar", dial: "974" },
+  { iso2: "RO", name: "Romania", dial: "40" },
+  { iso2: "RU", name: "Russia", dial: "7" },
+  { iso2: "RW", name: "Rwanda", dial: "250" },
+  { iso2: "KN", name: "Saint Kitts and Nevis", dial: "1869" },
+  { iso2: "LC", name: "Saint Lucia", dial: "1758" },
+  { iso2: "VC", name: "Saint Vincent and the Grenadines", dial: "1784" },
+  { iso2: "WS", name: "Samoa", dial: "685" },
+  { iso2: "SM", name: "San Marino", dial: "378" },
+  { iso2: "ST", name: "São Tomé and Príncipe", dial: "239" },
+  { iso2: "SA", name: "Saudi Arabia", dial: "966" },
+  { iso2: "SN", name: "Senegal", dial: "221" },
+  { iso2: "RS", name: "Serbia", dial: "381" },
+  { iso2: "SC", name: "Seychelles", dial: "248" },
+  { iso2: "SL", name: "Sierra Leone", dial: "232" },
+  { iso2: "SG", name: "Singapore", dial: "65" },
+  { iso2: "SK", name: "Slovakia", dial: "421" },
+  { iso2: "SI", name: "Slovenia", dial: "386" },
+  { iso2: "SB", name: "Solomon Islands", dial: "677" },
+  { iso2: "SO", name: "Somalia", dial: "252" },
+  { iso2: "ZA", name: "South Africa", dial: "27" },
+  { iso2: "KR", name: "South Korea", dial: "82" },
+  { iso2: "SS", name: "South Sudan", dial: "211" },
+  { iso2: "ES", name: "Spain", dial: "34" },
+  { iso2: "LK", name: "Sri Lanka", dial: "94" },
+  { iso2: "SD", name: "Sudan", dial: "249" },
+  { iso2: "SR", name: "Suriname", dial: "597" },
+  { iso2: "SE", name: "Sweden", dial: "46" },
+  { iso2: "CH", name: "Switzerland", dial: "41" },
+  { iso2: "SY", name: "Syria", dial: "963" },
+  { iso2: "TW", name: "Taiwan", dial: "886" },
+  { iso2: "TJ", name: "Tajikistan", dial: "992" },
+  { iso2: "TZ", name: "Tanzania", dial: "255" },
+  { iso2: "TH", name: "Thailand", dial: "66" },
+  { iso2: "TL", name: "Timor-Leste", dial: "670" },
+  { iso2: "TG", name: "Togo", dial: "228" },
+  { iso2: "TO", name: "Tonga", dial: "676" },
+  { iso2: "TT", name: "Trinidad and Tobago", dial: "1868" },
+  { iso2: "TN", name: "Tunisia", dial: "216" },
+  { iso2: "TR", name: "Turkey", dial: "90" },
+  { iso2: "TM", name: "Turkmenistan", dial: "993" },
+  { iso2: "TV", name: "Tuvalu", dial: "688" },
+  { iso2: "UG", name: "Uganda", dial: "256" },
+  { iso2: "UA", name: "Ukraine", dial: "380" },
+  { iso2: "AE", name: "United Arab Emirates", dial: "971" },
+  { iso2: "GB", name: "United Kingdom", dial: "44" },
+  { iso2: "US", name: "United States", dial: "1" },
+  { iso2: "UY", name: "Uruguay", dial: "598" },
+  { iso2: "UZ", name: "Uzbekistan", dial: "998" },
+  { iso2: "VU", name: "Vanuatu", dial: "678" },
+  { iso2: "VA", name: "Vatican City", dial: "39" },
+  { iso2: "VE", name: "Venezuela", dial: "58" },
+  { iso2: "VN", name: "Vietnam", dial: "84" },
+  { iso2: "YE", name: "Yemen", dial: "967" },
+  { iso2: "ZM", name: "Zambia", dial: "260" },
+  { iso2: "ZW", name: "Zimbabwe", dial: "263" },
+]

package/src/components/countries.ts

@@ -0,0 +1,67 @@
+/*
+ * Lightweight country helpers for LpPhoneInput. The heavy dial-code TABLE lives
+ * in ./countries-data.ts and is loaded lazily via loadCountries() so it lands in
+ * its own chunk — apps that never render a phone field don't pay for it. Only the
+ * type + tiny pure helpers stay here (importing these does not pull the data).
+ */
+export interface Country {
+  /** ISO 3166-1 alpha-2, uppercase (e.g. "US"). Drives the flag. */
+  iso2: string
+  name: string
+  /** Calling code without "+", e.g. "1", "44", "380". */
+  dial: string
+}
+
+/** Turn an ISO2 code into its flag emoji (two regional-indicator symbols). */
+export function flagEmoji(iso2: string): string {
+  if (!/^[A-Za-z]{2}$/.test(iso2)) return ""
+  const base = 0x1f1e6 - 0x41 // regional indicator 'A' minus ASCII 'A'
+  return String.fromCodePoint(
+    ...iso2.toUpperCase().split("").map((c) => base + c.charCodeAt(0)),
+  )
+}
+
+let cache: Country[] | undefined
+
+/**
+ * Load the country table (code-split chunk). Cached after first call, so repeat
+ * calls are synchronous-ish (resolved promise) with no re-import cost.
+ */
+export async function loadCountries(): Promise<Country[]> {
+  if (cache) return cache
+  const mod = await import("./countries-data")
+  cache = mod.COUNTRIES
+  return cache
+}
+
+// Several countries share a dial code (notably NANP "+1" → US, CA, …). Without
+// area-code parsing we can't disambiguate, so we pick a sensible primary per
+// shared code. Anything not listed falls back to the first list match.
+const PRIMARY_BY_DIAL: Record<string, string> = {
+  "1": "US",
+  "7": "RU",
+  "39": "IT",
+}
+
+/**
+ * Best-effort: pick the country whose dial code prefixes the given E.164-ish
+ * value (longest match wins, so "1868" beats "1"). For shared codes the primary
+ * country is preferred. Pass the list (from loadCountries). Undefined if none.
+ */
+export function matchCountryByValue(
+  value: string,
+  list: Country[],
+): Country | undefined {
+  const digits = value.replace(/[^\d]/g, "")
+  if (!digits) return undefined
+  let best: Country | undefined
+  for (const c of list) {
+    if (!digits.startsWith(c.dial)) continue
+    if (!best || c.dial.length > best.dial.length) {
+      best = c
+    } else if (c.dial.length === best.dial.length && PRIMARY_BY_DIAL[c.dial] === c.iso2) {
+      best = c // same length, but this one is the designated primary
+    }
+  }
+  return best
+}

package/src/components/dropdown.ts

@@ -0,0 +1,64 @@
+/*
+ * Shared class strings for floating panels (the dropdown/popover surface) and
+ * their option rows. These were copy-pasted across LpSelect, LpAutocomplete,
+ * LpPhoneInput, LpPopover and LpDropdownMenu — one source of truth means a tweak
+ * to the look or the side-aware enter/exit animation lands everywhere at once.
+ *
+ * The panel is built on different reka primitives per component (Combobox /
+ * Popover / DropdownMenu content), so we share CLASSES, not a wrapper component.
+ * Callers still own per-use bits: width, padding, overflow, and which primitive.
+ *
+ * IMPORTANT: a panel that hosts an option cascade must include `group` (it's in
+ * POPOVER_PANEL) so each OPTION_ITEM can read the panel's data-side and cascade
+ * the right way when the list flips above the trigger.
+ */
+
+/** Enter/exit animation for state-open panels (Select, Popover, Dropdown, …). */
+export const POPOVER_ANIM =
+  "data-[state=open]:animate-[popover-in_140ms_var(--ease-emphasized)] " +
+  "data-[state=closed]:animate-[popover-out_120ms_ease] " +
+  "data-[side=top]:data-[state=open]:animate-[popover-in-up_140ms_var(--ease-emphasized)] " +
+  "data-[side=top]:data-[state=closed]:animate-[popover-out-up_120ms_ease]"
+
+/** Tooltip variant: faster, and reka uses `delayed-open` instead of `open`. */
+export const TOOLTIP_ANIM =
+  "data-[state=delayed-open]:animate-[popover-in_120ms_var(--ease-emphasized)] " +
+  "data-[state=closed]:animate-[popover-out_100ms_ease] " +
+  "data-[side=top]:data-[state=delayed-open]:animate-[popover-in-up_120ms_var(--ease-emphasized)] " +
+  "data-[side=top]:data-[state=closed]:animate-[popover-out-up_100ms_ease]"
+
+/**
+ * The bare floating surface (border, raised overlay fill, blur, shadow) without
+ * any animation — pair with POPOVER_ANIM or TOOLTIP_ANIM. `group` lets option
+ * rows read the panel's data-side for the cascade direction.
+ */
+export const PANEL_SURFACE =
+  "group rounded-control border border-line bg-surface-overlay shadow-panel backdrop-blur"
+
+/**
+ * Surface + the state-open animation. Add width/padding/overflow and the z-layer
+ * at the call-site (z-layer omitted so tooltips can use z-(--z-tooltip) while the
+ * rest use z-(--z-popover)).
+ */
+export const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM
+
+/**
+ * A selectable option row: layout, highlight state, and the staggered cascade.
+ * Cascades downward by default and upward when the panel is flipped above the
+ * trigger (group-data-[side=top]). Pair with an inline animationDelay for the
+ * stagger. `flex` + gap are included; add justify/extra layout if needed.
+ */
+export const OPTION_ITEM =
+  "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-ink outline-none " +
+  "animate-[option-in_180ms_var(--ease-emphasized)_both] " +
+  "group-data-[side=top]:animate-[option-in-up_180ms_var(--ease-emphasized)_both] " +
+  "data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand"
+
+/**
+ * Micro-animation for a close / clear "✕" icon: a quarter-turn on hover and a
+ * dip on press. Put on the <LpIcon>, with `group` on its button. Shared by
+ * Modal, Drawer, Toaster and the Autocomplete clear button.
+ */
+export const CLOSE_ICON =
+  "transition-transform duration-medium ease-[var(--ease-emphasized)] " +
+  "group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"

package/src/components/sidebar.ts

@@ -0,0 +1,26 @@
+/*
+ * Shared sidebar types. Lives in its own module so LpSidebar and its internal
+ * LpSidebarNav body can both import them without a component-to-component cycle.
+ * Re-exported from LpSidebar.vue for back-compat with existing import sites.
+ */
+
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+
+export interface SidebarItem {
+  id: string
+  label: string
+  icon?: string
+  /** Render as a link instead of a button. */
+  href?: string
+  /** Count chip on the right (number or short string). */
+  badge?: number | string
+  disabled?: boolean
+  /** Right-click menu for this item (e.g. "Open in new tab", "Pin"). */
+  menu?: ContextMenuItemDef[]
+}
+
+export interface SidebarSection {
+  /** Optional heading above the group. */
+  title?: string
+  items: SidebarItem[]
+}

package/src/composables/useInputFilter.ts

@@ -0,0 +1,89 @@
+import { computed, type MaybeRefOrGetter, toValue } from "vue"
+
+/*
+ * Cursor- and IME-safe input filtering + pattern validation for native <input>.
+ *
+ * Two orthogonal jobs:
+ *
+ *   restrict — a character class (RegExp matching ONE allowed char, e.g. /[0-9]/)
+ *     that hard-blocks disallowed input. We cancel the offending `beforeinput`
+ *     instead of rewriting `value` after the fact: rewriting moves the caret to
+ *     the end and aborts IME composition. By vetoing the event the browser never
+ *     applies the bad edit, so the caret and any in-flight composition stay put.
+ *
+ *   pattern — a RegExp the WHOLE value must match to be considered valid. This
+ *     never blocks typing; it only drives the invalid state (border + aria), so
+ *     partially-typed values aren't punished mid-entry — the caller decides when
+ *     to surface it.
+ *
+ * A bare string pattern is treated as a full-string match (anchored), mirroring
+ * the native HTML `pattern` attribute.
+ */
+
+export interface UseInputFilterOptions {
+  /** One-char RegExp of allowed characters. Disallowed input is blocked. */
+  restrict?: MaybeRefOrGetter<RegExp | undefined>
+  /** RegExp/string the full value must match to be valid. Validation only. */
+  pattern?: MaybeRefOrGetter<RegExp | string | undefined>
+}
+
+function toAnchored(p: RegExp | string): RegExp {
+  if (p instanceof RegExp) {
+    // Re-anchor so `pattern` validates the whole string, like HTML's attribute.
+    const src = p.source.replace(/^\^/, "").replace(/\$$/, "")
+    return new RegExp(`^(?:${src})$`, p.flags.replace(/[gy]/g, ""))
+  }
+  return new RegExp(`^(?:${p})$`)
+}
+
+/** Does a string contain only restrict-allowed characters? */
+function allAllowed(text: string, charRe: RegExp): boolean {
+  // Strip g/y so lastIndex can't leak state across .test() calls, then reuse
+  // the one instance per char (tested by code point, so surrogate pairs hold).
+  const re = new RegExp(charRe.source, charRe.flags.replace(/[gy]/g, ""))
+  for (const ch of text) {
+    if (!re.test(ch)) return false
+  }
+  return true
+}
+
+export function useInputFilter(options: UseInputFilterOptions = {}) {
+  const restrict = computed(() => toValue(options.restrict))
+  const patternRe = computed(() => {
+    const p = toValue(options.pattern)
+    return p === undefined ? undefined : toAnchored(p)
+  })
+
+  /** True when a non-empty value fails `pattern`. Empty is treated as valid. */
+  function isInvalid(value: string | undefined): boolean {
+    const re = patternRe.value
+    if (!re || !value) return false
+    return !re.test(value)
+  }
+
+  /**
+   * Attach to the input's `beforeinput`. Vetoes edits that would introduce a
+   * disallowed character. No-op while composing (IME) or when no restrict set.
+   */
+  function onBeforeInput(event: InputEvent): void {
+    const re = restrict.value
+    if (!re || event.isComposing) return
+    // Deletions / formatting carry no data to validate; let them through.
+    const data = event.data
+    if (data == null) return
+    if (!allAllowed(data, re)) event.preventDefault()
+  }
+
+  /**
+   * Attach to `paste`. Veto the paste if any pasted char is disallowed, rather
+   * than silently dropping part of it — partial pastes confuse more than help.
+   */
+  function onPaste(event: ClipboardEvent): void {
+    const re = restrict.value
+    if (!re) return
+    const text = event.clipboardData?.getData("text") ?? ""
+    if (text && !allAllowed(text, re)) event.preventDefault()
+  }
+
+  return { isInvalid, onBeforeInput, onPaste, patternRe, restrict }
+}

package/src/composables/usePillTransition.ts

@@ -0,0 +1,19 @@
+import { useReducedMotion } from "motion-v"
+import { computed, type ComputedRef } from "vue"
+
+/*
+ * Shared motion-v transition for the sliding "pill" indicator used by LpTabs,
+ * LpSegmented and LpPagination (a shared layoutId element that flies under the
+ * active item). One spring keeps the feel identical across them; it collapses to
+ * an instant move when the OS prefers reduced motion.
+ */
+export type PillTransition =
+  | { duration: number }
+  | { type: "spring"; stiffness: number; damping: number }
+
+export function usePillTransition(): ComputedRef<PillTransition> {
+  const reduceMotion = useReducedMotion()
+  return computed<PillTransition>(() =>
+    reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40 },
+  )
+}

package/src/composables/useToast.ts

@@ -0,0 +1,92 @@
+import { reactive } from "vue"
+
+export type ToastVariant = "info" | "success" | "warning" | "error"
+
+export interface ToastAction {
+  label: string
+  onClick: () => void | Promise<void>
+}
+
+export interface ToastItem {
+  id: number
+  title?: string
+  message: string
+  variant: ToastVariant
+  duration: number
+  /** Epoch ms when this toast auto-dismisses, or null if it never does. */
+  dismissAt: number | null
+  actions?: ToastAction[]
+  /** Whole-toast click handler (UAProject-style clickable toast). */
+  onClick?: () => void | Promise<void>
+}
+
+export interface ToastOptions {
+  title?: string
+  duration?: number
+  actions?: ToastAction[]
+  onClick?: () => void | Promise<void>
+}
+
+const DEFAULT_DURATION = 4500
+const MAX_ACTIVE = 4
+
+// Pin the queue to a global symbol so the singleton survives module
+// duplication (a barrel import and a deep import can otherwise resolve to two
+// module instances, each with its own state — the toasts-never-show footgun).
+const STATE_KEY = Symbol.for("@leavepulse/ui:toast-queue")
+type GlobalWithQueue = typeof globalThis & {
+  [STATE_KEY]?: { queue: ToastItem[]; nextId: number }
+}
+const g = globalThis as GlobalWithQueue
+const state = (g[STATE_KEY] ??= { queue: reactive<ToastItem[]>([]), nextId: 0 })
+const queue = state.queue
+
+function push(
+  variant: ToastVariant,
+  message: string,
+  options: ToastOptions = {},
+): number {
+  const id = state.nextId++
+  const duration = options.duration ?? DEFAULT_DURATION
+  const item: ToastItem = {
+    id,
+    title: options.title,
+    message,
+    variant,
+    duration,
+    dismissAt: duration > 0 ? Date.now() + duration : null,
+    actions: options.actions,
+    onClick: options.onClick,
+  }
+
+  // Cap the active count: drop the oldest beyond the limit.
+  const overflow = queue.length - (MAX_ACTIVE - 1)
+  if (overflow > 0) queue.splice(0, overflow)
+  queue.push(item)
+
+  return id
+}
+
+function dismiss(id: number): void {
+  const i = queue.findIndex((t) => t.id === id)
+  if (i !== -1) queue.splice(i, 1)
+}
+
+function clear(): void {
+  queue.splice(0, queue.length)
+}
+
+export function useToast() {
+  return {
+    queue,
+    toast: (message: string, o?: ToastOptions) => push("info", message, o),
+    info: (message: string, o?: ToastOptions) => push("info", message, o),
+    success: (message: string, o?: ToastOptions) => push("success", message, o),
+    warning: (message: string, o?: ToastOptions) => push("warning", message, o),
+    error: (message: string, o?: ToastOptions) => push("error", message, o),
+    /** Low-level push for bridges (e.g. @leavepulse/ui-sdk apiError). */
+    push,
+    dismiss,
+    clear,
+  }
+}

package/src/icons.ts

@@ -0,0 +1,11 @@
+import { addCollection } from "@iconify/vue"
+import lucide from "@iconify-json/lucide/icons.json"
+
+/*
+ * Register the lucide collection offline so <LpIcon name="lucide:*"> resolves
+ * without hitting the iconify API (required for Tauri / air-gapped use).
+ *
+ * This pulls the whole lucide set. If bundle size matters in an app, replace
+ * this with a curated subset via addIcon() — the LpIcon API is unchanged.
+ */
+addCollection(lucide as Parameters<typeof addCollection>[0])

package/src/index.css

@@ -0,0 +1,21 @@
+/*
+ * Public CSS entry for @leavepulse/ui — what `@import "@leavepulse/ui"`
+ * resolves to (see the "." export's "style" field and "./css").
+ *
+ * Mirrors how @nuxt/ui ships styles: the consumer owns Tailwind, the kit owns
+ * its tokens + a @source over its own components. So this file deliberately
+ * does NOT `@import "tailwindcss"` — the consuming app does that once, then
+ * imports this. The @source makes the consumer's Tailwind build emit the
+ * utilities our components use (node_modules isn't scanned by default).
+ *
+ * Consumer usage:
+ *   @import "tailwindcss";
+ *   @import "@leavepulse/ui";
+ */
+@import "./tokens/tokens.css";
+@import "./tokens/utilities.css";
+
+@source "./components";
+@source "./composables";
+@source "./layout";
+@source "./theme";