JavaScript helpers

The package exports named functions only, and the list is short on purpose: configuration for the whole design system, and nothing that a component could have done itself.

What is exported

Export	What it does
`setLocale(tag)`	Sets the locale for the whole design system. The FORMATS derive from `Intl` from this tag, whether or not a dictionary matches it.
`registerMessages(tag, dict)`	Registers a dictionary. Partial dictionaries are legitimate: what is missing falls back to English.
`en` · `fr`	The two shipped dictionaries. `en` is always bundled; `fr` is opt-in, and not importing it prunes it.
`setIconResolver(fn)`	Wires a third-party icon library. Consulted BEFORE the built-in registry; return `undefined` to hand over.
`ligatureIconResolver()`	Resolves a name to an icon-font ligature, such as Material Symbols or IcoMoon.
`classIconResolver()`	Resolves a name to a class-driven set: Font Awesome, Phosphor, Bootstrap Icons. Strict by default, so an unmapped name falls back to the built-in SVG rather than to an empty square.
`componentIconResolver()`	Resolves a name to a component from your own library, such as Lucide or Untitled UI.
`toast(options)` · `dismissToast(id)`	Adds and removes a notification. It is the only imperative API in the library, because a toast has no place in the tree that asks for it.

// app entry: module level, never inside a setup()
import {
  fr,
  registerMessages,
  setLocale,
  setIconResolver,
  ligatureIconResolver,
} from 'vectis-ui'

registerMessages('fr', fr)
setLocale('fr-FR')
setIconResolver(ligatureIconResolver())

Everything above writes MODULE-LEVEL state, which is what lets it be called from any .ts file without a plugin or a provider, and what makes already-mounted components re-render when it changes. The same property is the constraint: it belongs to the process rather than to a request, so it is configuration and never anything that varies per visitor.

import { toast } from 'vectis-ui'

// client-side only: the queue is module state, shared by every
// request a server handles
toast({ message: 'Copied to the clipboard', duration: 1600 })

Types are exported alongside them (Messages, MessagesInput, IconSource, IconResolver, ToastOptions), plus one per component whose API needs naming, such as ComboboxOption, DataTableColumn or DatePickerSelection.

The internal helpers, and why they stay internal

The library carries a full set of date, time, file and text helpers, and they are what VDatePicker, VDateInput, VTimePicker and VFilePicker are built on. They are NOT exported, and the reason is stated at the entry point: the internal modules are not part of the public surface, so their signatures stay free to change with the components that use them.

Module	Internal helpers
`utils/date.ts`	`parseISO`, `formatISO`, `addDays`, `addMonths`, `clampISO`, `isWithin`, `isDateAllowed`, `buildMonthGrid`, `firstDayOfWeekFor`, `weekdayNames`, `monthNames`, `formatDateDisplay`, `dateMaskFor`, `parseDateMask`
`utils/time.ts`	`parseTime`, `formatTime`, `to12h`, `to24h`, `withMeridiem`, `hourCycleFor`, `formatTimeDisplay`, `snapMinute`, `timeList`, `timeToMask`, `parseTimeMask`
`utils/file.ts`	`matchesAccept`, `formatBytes`, `screenFiles`
`utils/text.ts` · `number.ts` · `array.ts`	`normalizeText`, `pad2`, `digitsOf`, `clamp`, `toggleValue`
`utils/arrowNav.ts` · `matcher.ts`	`navigableItems`, `arrowNavigate`, `resolveMatcher`
`utils/css.ts` · `vnode.ts` · `env.ts` · `memo.ts`	`px`, `cssSize`, `flattenSlot`, `isDev`, `memo`

Two of them are worth copying rather than importing: hourCycleFor(locale) and firstDayOfWeekFor(locale) answer questions Intl only answers indirectly.

Composables

The same rule covers the composables, usePopover, useFieldPanel, useMaskedField, useFocusoutDismiss, useTextLimit, useRootAttrs, useTimer and their kin: internal, unexported, and documented in their own files. If you find yourself needing one, that is a request for a component.