vectis-ui 0.1.0

package/dist/utils/array.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Adds a value to a selection or takes it out again, depending on whether it is already
+ * there.
+ *
+ * It ALWAYS hands back a new list rather than changing the one it was given. Every
+ * multiple-choice value in the design system works this way: it is the arrival of a new
+ * list, not a change made inside the old one, that tells the surrounding application
+ * something has happened.
+ */
+export declare function toggleValue<T>(list: readonly T[], value: T): T[];

package/dist/utils/array.js

@@ -0,0 +1,8 @@
+//#region src/utils/array.ts
+function e(e, t) {
+	return e.includes(t) ? e.filter((e) => e !== t) : [...e, t];
+}
+//#endregion
+export { e as toggleValue };
+
+//# sourceMappingURL=array.js.map

package/dist/utils/array.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"array.js","names":[],"sources":["../../src/utils/array.ts"],"sourcesContent":["// @core\n/**\n * Adds a value to a selection or takes it out again, depending on whether it is already\n * there.\n *\n * It ALWAYS hands back a new list rather than changing the one it was given. Every\n * multiple-choice value in the design system works this way: it is the arrival of a new\n * list, not a change made inside the old one, that tells the surrounding application\n * something has happened.\n */\nexport function toggleValue<T>(list: readonly T[], value: T): T[] {\n  return list.includes(value) ? list.filter((v) => v !== value) : [...list, value]\n}\n"],"mappings":";AAUA,SAAgB,EAAe,GAAoB,GAAe;CAChE,OAAO,EAAK,SAAS,CAAK,IAAI,EAAK,QAAQ,MAAM,MAAM,CAAK,IAAI,CAAC,GAAG,GAAM,CAAK;AACjF"}

package/dist/utils/arrowNav.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The elements inside a container that the arrows may land on. The selector is the
+ * caller's, and it is the one that leaves out anything disabled.
+ *
+ * Anything hidden is dropped here, and it has to be: the pages hide their neighbours as
+ * the bar gets narrower, and a consumer may hide a tab or a toggle outright. An element
+ * nobody can see must not be given the focus.
+ */
+export declare function navigableItems(container: HTMLElement, selector: string): HTMLElement[];
+/**
+ * Handles the four arrows and the Home and End keys over a list of elements, and moves
+ * the focus.
+ *
+ * It reports whether it took the key. When it did, the browser's own reaction has already
+ * been suppressed; when it did not, the caller is free to do something else with it.
+ *
+ * The ends WRAP: past the last element the focus comes back to the first. When nothing in
+ * the list has the focus yet, any arrow starts at the beginning.
+ *
+ * The left and right arrows point at a physical side of the screen, so in a language
+ * written right to left they are swapped: pressing right must move towards the NEXT item,
+ * which is then to the left. Up and down need no such treatment, since no language
+ * reverses them.
+ */
+export declare function arrowNavigate(event: KeyboardEvent, container: HTMLElement, items: HTMLElement[], options?: {
+    vertical?: boolean;
+}): boolean;

package/dist/utils/arrowNav.js

@@ -0,0 +1,26 @@
+import { isRtl as e } from "./direction.js";
+//#region src/utils/arrowNav.ts
+function t(e, t) {
+	return [...e.querySelectorAll(t)].filter((e) => getComputedStyle(e).display !== "none");
+}
+function n(t, n, r, i = {}) {
+	let a = i.vertical ?? !1;
+	if (!(a ? [
+		"ArrowDown",
+		"ArrowUp",
+		"Home",
+		"End"
+	] : [
+		"ArrowRight",
+		"ArrowLeft",
+		"Home",
+		"End"
+	]).includes(t.key) || r.length === 0) return !1;
+	t.preventDefault();
+	let o = () => a ? t.key === "ArrowDown" : t.key === "ArrowRight" !== e(n), s = r.indexOf(document.activeElement);
+	return r[t.key === "Home" ? 0 : t.key === "End" ? r.length - 1 : s === -1 ? 0 : (s + (o() ? 1 : -1) + r.length) % r.length]?.focus(), !0;
+}
+//#endregion
+export { n as arrowNavigate, t as navigableItems };
+
+//# sourceMappingURL=arrowNav.js.map

package/dist/utils/arrowNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrowNav.js","names":[],"sources":["../../src/utils/arrowNav.ts"],"sourcesContent":["/**\n * Moving through a row or a column of neighbouring controls with the arrow keys.\n *\n * There is code here because the browser offers nothing that walks the focus from one\n * button to the next: the Tab key steps out of the group entirely, and a group of tabs, a\n * set of pages or a menu is expected to be crossed with the arrows.\n *\n * The rule is the same everywhere in the design system, and it is worth stating plainly:\n * the arrow keys and Home and End MOVE the focus and never act on what they land on.\n * Acting on arrival would navigate somewhere the reader did not ask to go, or turn a\n * value on merely because they passed over it. A component that genuinely wants the\n * arrival to select — a row of tabs can be set up that way — arranges that itself.\n *\n * This is the single place that behaviour is written: the pages, the tabs, the toggle\n * group and the menu all use it.\n */\nimport { isRtl } from './direction'\n\n// @keyboard @a11y\n/**\n * The elements inside a container that the arrows may land on. The selector is the\n * caller's, and it is the one that leaves out anything disabled.\n *\n * Anything hidden is dropped here, and it has to be: the pages hide their neighbours as\n * the bar gets narrower, and a consumer may hide a tab or a toggle outright. An element\n * nobody can see must not be given the focus.\n */\nexport function navigableItems(container: HTMLElement, selector: string): HTMLElement[] {\n  return [...container.querySelectorAll<HTMLElement>(selector)].filter(\n    (el) => getComputedStyle(el).display !== 'none',\n  )\n}\n\n// @keyboard @a11y\n/**\n * Handles the four arrows and the Home and End keys over a list of elements, and moves\n * the focus.\n *\n * It reports whether it took the key. When it did, the browser's own reaction has already\n * been suppressed; when it did not, the caller is free to do something else with it.\n *\n * The ends WRAP: past the last element the focus comes back to the first. When nothing in\n * the list has the focus yet, any arrow starts at the beginning.\n *\n * The left and right arrows point at a physical side of the screen, so in a language\n * written right to left they are swapped: pressing right must move towards the NEXT item,\n * which is then to the left. Up and down need no such treatment, since no language\n * reverses them.\n */\nexport function arrowNavigate(\n  event: KeyboardEvent,\n  container: HTMLElement,\n  items: HTMLElement[],\n  options: { vertical?: boolean } = {},\n): boolean {\n  const vertical = options.vertical ?? false\n  const keys = vertical\n    ? ['ArrowDown', 'ArrowUp', 'Home', 'End']\n    : ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n  if (!keys.includes(event.key)) return false\n  if (items.length === 0) return false\n  event.preventDefault()\n\n  // Only the arrow branch asks which way is forward, and only the horizontal axis needs\n  // the writing direction to answer. Keeping it a function rather than a value is what\n  // spares Home and End the style recalculation that reading the direction forces.\n  const forward = () =>\n    vertical ? event.key === 'ArrowDown' : (event.key === 'ArrowRight') !== isRtl(container)\n  const current = items.indexOf(document.activeElement as HTMLElement)\n  const next =\n    event.key === 'Home'\n      ? 0\n      : event.key === 'End'\n        ? items.length - 1\n        : current === -1\n          ? 0\n          : (current + (forward() ? 1 : -1) + items.length) % items.length\n  items[next]?.focus()\n  return true\n}\n"],"mappings":";;AA2BA,SAAgB,EAAe,GAAwB,GAAiC;CACtF,OAAO,CAAC,GAAG,EAAU,iBAA8B,CAAQ,CAAC,CAAC,CAAC,QAC3D,MAAO,iBAAiB,CAAE,CAAC,CAAC,YAAY,MAC3C;AACF;AAkBA,SAAgB,EACd,GACA,GACA,GACA,IAAkC,CAAC,GAC1B;CACT,IAAM,IAAW,EAAQ,YAAY;CAKrC,IADI,EAHS,IACT;EAAC;EAAa;EAAW;EAAQ;CAAK,IACtC;EAAC;EAAc;EAAa;EAAQ;CAAK,EAAA,CACnC,SAAS,EAAM,GAAG,KACxB,EAAM,WAAW,GAAG,OAAO;CAC/B,EAAM,eAAe;CAKrB,IAAM,UACJ,IAAW,EAAM,QAAQ,cAAe,EAAM,QAAQ,iBAAkB,EAAM,CAAS,GACnF,IAAU,EAAM,QAAQ,SAAS,aAA4B;CAUnE,OADA,EAPE,EAAM,QAAQ,SACV,IACA,EAAM,QAAQ,QACZ,EAAM,SAAS,IACf,MAAY,KACV,KACC,KAAW,EAAQ,IAAI,IAAI,MAAM,EAAM,UAAU,EAAM,OACvD,EAAE,MAAM,GACZ;AACT"}

package/dist/utils/chip.d.ts

@@ -0,0 +1,26 @@
+/**
+ * How big a chip should be when it sits INSIDE a text field — the selected values in the
+ * search field, the chosen files in the file field.
+ *
+ * A chip is always one step smaller than the field holding it, so that a row of them fits
+ * without pushing the field taller. There are only three field sizes, and the two
+ * smallest take the smallest chip while the largest takes the next one up. Below the
+ * smallest step of each pair there is no smaller size left, so the extra reduction is
+ * asked for as a "compact" chip instead. A medium field already has room to spare, which
+ * is why its own compact setting does not reach the chips at all.
+ *
+ * The HEIGHT is what earns this module its existence. The field has to force the text
+ * being typed to the same height as the chips beside it, or the natural height of that
+ * text exceeds them and the field grows the moment it is focused — but the chips' height
+ * is decided inside the chip, out of the field's reach. Deriving it here, from the very
+ * same pair of settings that chooses the chip's size, makes the two incapable of drifting
+ * apart.
+ */
+export type ChipFieldSize = 'sm' | 'md' | 'lg';
+export interface ChipScale {
+    size: 'xs' | 'sm';
+    compact: boolean;
+    /** The chips' height, ready to be set on the field so it can match its own text to it. */
+    height: string;
+}
+export declare function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale;

package/dist/utils/chip.js

@@ -0,0 +1,13 @@
+//#region src/utils/chip.ts
+function e(e, t) {
+	let n = e === "lg" ? "sm" : "xs", r = e === "lg" ? t : e === "sm", i = `var(--vectis-control-height-${n})`;
+	return {
+		size: n,
+		compact: r,
+		height: r ? `calc(${i} - var(--vectis-space-1))` : i
+	};
+}
+//#endregion
+export { e as chipScaleFor };
+
+//# sourceMappingURL=chip.js.map

package/dist/utils/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/utils/chip.ts"],"sourcesContent":["// @core\n/**\n * How big a chip should be when it sits INSIDE a text field — the selected values in the\n * search field, the chosen files in the file field.\n *\n * A chip is always one step smaller than the field holding it, so that a row of them fits\n * without pushing the field taller. There are only three field sizes, and the two\n * smallest take the smallest chip while the largest takes the next one up. Below the\n * smallest step of each pair there is no smaller size left, so the extra reduction is\n * asked for as a \"compact\" chip instead. A medium field already has room to spare, which\n * is why its own compact setting does not reach the chips at all.\n *\n * The HEIGHT is what earns this module its existence. The field has to force the text\n * being typed to the same height as the chips beside it, or the natural height of that\n * text exceeds them and the field grows the moment it is focused — but the chips' height\n * is decided inside the chip, out of the field's reach. Deriving it here, from the very\n * same pair of settings that chooses the chip's size, makes the two incapable of drifting\n * apart.\n */\nexport type ChipFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipScale {\n  size: 'xs' | 'sm'\n  compact: boolean\n  /** The chips' height, ready to be set on the field so it can match its own text to it. */\n  height: string\n}\n\nexport function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale {\n  const chipSize = size === 'lg' ? 'sm' : 'xs'\n  const chipCompact = size === 'lg' ? compact : size === 'sm'\n  const base = `var(--vectis-control-height-${chipSize})`\n  return {\n    size: chipSize,\n    compact: chipCompact,\n    height: chipCompact ? `calc(${base} - var(--vectis-space-1))` : base,\n  }\n}\n"],"mappings":";AA4BA,SAAgB,EAAa,GAAqB,GAA6B;CAC7E,IAAM,IAAW,MAAS,OAAO,OAAO,MAClC,IAAc,MAAS,OAAO,IAAU,MAAS,MACjD,IAAO,+BAA+B,EAAS;CACrD,OAAO;EACL,MAAM;EACN,SAAS;EACT,QAAQ,IAAc,QAAQ,EAAK,6BAA6B;CAClE;AACF"}

package/dist/utils/css.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A dimension that is always expressed in pixels: both the number twelve and the text
+ * "12" come out as "12px".
+ *
+ * Anything that is not a number at all yields nothing rather than a value CSS cannot
+ * read. That distinction matters: a nonsensical value would break the geometry outright,
+ * where nothing at all simply lets the component's own default apply.
+ */
+export declare function px(v: number | string | undefined): string | undefined;
+/**
+ * A dimension in whatever unit the caller likes: a bare number is read as pixels, and any
+ * text goes through untouched — a percentage, a fraction of the window, "as wide as the
+ * content".
+ *
+ * The text is deliberately not examined, unlike the pixels-only version above. CSS is
+ * left to judge it, and a value it cannot make sense of falls back to what the component
+ * declares for itself.
+ */
+export declare function cssSize(v: number | string | undefined): string | undefined;

package/dist/utils/css.js

@@ -0,0 +1,13 @@
+//#region src/utils/css.ts
+function e(e) {
+	if (e === void 0) return;
+	let t = typeof e == "number" ? e : Number.parseFloat(e);
+	return Number.isFinite(t) ? `${t}px` : void 0;
+}
+function t(e) {
+	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
+}
+//#endregion
+export { t as cssSize, e as px };
+
+//# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/**\n * A dimension that is always expressed in pixels: both the number twelve and the text\n * \"12\" come out as \"12px\".\n *\n * Anything that is not a number at all yields nothing rather than a value CSS cannot\n * read. That distinction matters: a nonsensical value would break the geometry outright,\n * where nothing at all simply lets the component's own default apply.\n */\nexport function px(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  const n = typeof v === 'number' ? v : Number.parseFloat(v)\n  return Number.isFinite(n) ? `${n}px` : undefined\n}\n\n// @core\n/**\n * A dimension in whatever unit the caller likes: a bare number is read as pixels, and any\n * text goes through untouched — a percentage, a fraction of the window, \"as wide as the\n * content\".\n *\n * The text is deliberately not examined, unlike the pixels-only version above. CSS is\n * left to judge it, and a value it cannot make sense of falls back to what the component\n * declares for itself.\n */\nexport function cssSize(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  return typeof v === 'number' ? `${v}px` : v\n}\n"],"mappings":";AASA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,OAAO,WAAW,CAAC;CACzD,OAAO,OAAO,SAAS,CAAC,IAAI,GAAG,EAAE,MAAM,KAAA;AACzC;AAYA,SAAgB,EAAQ,GAAoD;CACtE,UAAM,KAAA,GACV,OAAO,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;AAC5C"}

package/dist/utils/date.d.ts

@@ -0,0 +1,199 @@
+/**
+ * The date arithmetic behind VDatePicker and VDateInput, written as pure functions:
+ * they read nothing outside their arguments and change nothing around them.
+ *
+ * The whole module speaks one language, the ISO `YYYY-MM-DD` string, and computes
+ * everything in the reader's LOCAL time. Two shortcuts are therefore banned
+ * throughout: `new Date('YYYY-MM-DD')`, which the language interprets as UTC and
+ * which consequently lands on the previous or the next day depending on the time
+ * zone, and `toISOString()`, which formats in UTC for the same reason. `Date`
+ * objects exist here only as an intermediate step, built with `new Date(y, m, d)` —
+ * local midnight — and turned back into text by concatenation.
+ *
+ * The names of months and days come from `Intl`, which is available on the server as
+ * well as in the browser. They are formatted from REFERENCE dates pinned to
+ * `timeZone: 'UTC'`, so that the resulting label never depends on the time zone of
+ * the machine doing the rendering.
+ */
+/**
+ * Tells whether a value is a real `YYYY-MM-DD` date. The shape alone is not enough:
+ * `2026-02-31` matches the pattern, so the check goes through a parse and a
+ * reformat, and only a value that survives the round trip unchanged is accepted.
+ */
+export declare function isValidISO(iso: unknown): iso is string;
+/**
+ * Turns an ISO string into a `Date` set at local midnight, or returns `null` when
+ * the string is not one. Every caller here has to handle that `null`: the bounds a
+ * consumer passes are raw strings and may be anything.
+ */
+export declare function parseISO(iso: string | null | undefined): Date | null;
+/**
+ * Writes a `Date` as an ISO string, reading its LOCAL components. This manual
+ * concatenation is what `toISOString()` cannot do, since that one formats in UTC.
+ */
+export declare function formatISO(date: Date): string;
+/**
+ * Builds an ISO string from separate values. The month is 0-indexed, as everywhere
+ * in the language: 0 is January.
+ */
+export declare function isoOf(year: number, month0: number, day: number): string;
+/**
+ * Moves a date by a number of days, forwards or backwards. Crossing into another
+ * month or year is handled by `Date` itself.
+ */
+export declare function addDays(iso: string, n: number): string;
+/**
+ * Moves a date by a number of months, keeping the day of the month where possible.
+ * When the target month is too short the day is brought back to its last one: 31
+ * January plus one month gives 28 or 29 February, and never spills over into March
+ * the way a naive addition would.
+ */
+export declare function addMonths(iso: string, n: number): string;
+/**
+ * How many days the given month holds, leap years included. Day 0 of the following
+ * month is the last day of this one, which is what makes the leap year rule the
+ * language's problem rather than ours.
+ */
+export declare function daysInMonth(year: number, month0: number): number;
+/**
+ * Compares two dates chronologically, returning the usual -1, 0 or 1. Because the
+ * `YYYY-MM-DD` format puts its most significant part first, comparing the strings as
+ * text already gives the chronological order: no parsing is needed.
+ */
+export declare function compareISO(a: string, b: string): number;
+/**
+ * Whether two dates are the same day, with a null on either side counting as no
+ * date at all rather than as a match.
+ */
+export declare const isSameISO: (a: string | null, b: string | null) => boolean;
+/**
+ * Brings a date back inside the allowed interval, returning the bound it exceeded.
+ * Both bounds are optional, and an absent one means unbounded on that side.
+ */
+export declare function clampISO(iso: string, min?: string, max?: string): string;
+/** Whether a date falls inside the allowed interval, each bound being optional. */
+export declare function isWithin(iso: string, min?: string, max?: string): boolean;
+/** One square of a month grid. */
+export interface MonthCell {
+    /** The day it stands for, as an ISO `YYYY-MM-DD` string. */
+    iso: string;
+    /**
+     * Which side of the displayed month this day belongs to when it is not part of it,
+     * and `null` when it is.
+     */
+    adjacent: 'prev' | 'next' | null;
+}
+/**
+ * Builds the grid of a month: 42 cells, six rows of seven, filled out at both ends
+ * with the days of the neighbouring months. The count is fixed on purpose, so that
+ * the calendar keeps the same height from one month to the next instead of jumping
+ * by a row. `firstDayOfWeek` runs from 0 for Sunday to 6 for Saturday.
+ */
+export declare function buildMonthGrid(year: number, month0: number, firstDayOfWeek: number): MonthCell[];
+export declare function firstDayOfWeekFor(locale: string): number;
+/**
+ * The names of the seven days, starting from `firstDayOfWeek` so the list can be
+ * dropped straight into a calendar header.
+ */
+export declare function weekdayNames(locale: string, firstDayOfWeek: number, weekday?: 'narrow' | 'short' | 'long'): string[];
+/** The names of the twelve months, in January-to-December order. */
+export declare function monthNames(locale: string, month?: 'long' | 'short'): string[];
+/**
+ * Month names shortened for the picker's narrow cells: a name of four characters or
+ * fewer is kept whole ("May", "June", "July"), a longer one is cut to three
+ * characters followed by a dot ("January" becomes "Jan."). The name is spread with
+ * `[...n]` rather than indexed, so that an accented or non-Latin character counts as
+ * one character and is never cut in half.
+ */
+export declare function monthNamesCompact(locale: string): string[];
+/** The name of one month, 0 being January. */
+export declare function monthName(locale: string, month0: number, month?: 'long' | 'short'): string;
+/**
+ * A date written out for the reader, in the conventions of their locale — this is
+ * what VDateInput shows in its field. An unparsable date yields an empty string
+ * rather than a broken one.
+ */
+export declare function formatDisplay(iso: string, locale: string, options: Intl.DateTimeFormatOptions): string;
+/**
+ * A period written out for the reader. `Intl`'s own `formatRange` is what factors
+ * out the parts the two dates share, giving "19–26 June 2026" rather than the two
+ * full dates side by side. A period of a single day is formatted as that one date.
+ */
+export declare function formatDisplayRange(start: string, end: string, locale: string, options: Intl.DateTimeFormatOptions): string;
+export type DateMaskField = 'day' | 'month' | 'year';
+/** Everything a locale decides about how a date is typed. */
+export interface DateMask {
+    /**
+     * The order the three fields appear in: day, month, year in the United Kingdom,
+     * month, day, year in the United States, year, month, day in Japan.
+     */
+    order: readonly DateMaskField[];
+    /** The single character between two fields, stripped of bidi marks and spaces. */
+    separator: string;
+    /** How many digits each field takes, in the same order: 4 for the year, 2 otherwise. */
+    lengths: readonly number[];
+    /** How many digits the complete mask holds, which is always 8. */
+    size: number;
+}
+export declare function dateMaskFor(locale: string): DateMask;
+/**
+ * Lays a run of digits out as masked text. The separator appears AS SOON AS the field
+ * before it is full — typing "22" already gives "22/" — so the reader sees their
+ * progress without ever having to type a separator themselves.
+ *
+ * This has a consequence the component must honour: pressing Backspace on such a
+ * separator has to delete the DIGIT before it. Deleting the separator alone would
+ * see the mask write it straight back, and the key would look dead.
+ */
+export declare function formatDateMask(digits: string, mask: DateMask): string;
+/**
+ * Writes an ISO date in the mask of the locale, ready to be put in the field: the
+ * same day reads "10/06/2026" in London and "06/10/2026" in Chicago.
+ */
+export declare function isoToMask(iso: string, mask: DateMask): string;
+export interface ParseMaskOptions {
+    /**
+     * The century a two-digit year is expanded into: with 2000, "10/06/26" is read as
+     * 2026. It is only accepted when the year is the LAST field of the mask, since
+     * elsewhere the following separator already tells the two apart.
+     *
+     * Leaving it out refuses any year shorter than four digits, and that is the mode
+     * used while the reader types — so that "26", passed through on the way to "2026",
+     * is never committed as a year of its own.
+     */
+    yearPivot?: number;
+}
+/**
+ * Reads masked text back into an ISO date, or returns `null` when the text is
+ * incomplete, holds too many digits, or names a day that does not exist — 31
+ * February passes every length check and is caught by the round trip `isValidISO`
+ * performs.
+ *
+ * Whether the resulting date is allowed is a different question: the `min`/`max`
+ * bounds and the disabled dates belong to the component, and this function knows
+ * nothing about props.
+ */
+export declare function parseDateMask(text: string, mask: DateMask, options?: ParseMaskOptions): string | null;
+/**
+ * Where the caret has to go to sit just after the nth digit. Counting digits is the
+ * only landmark that survives a reformat: an absolute position jumps by one the
+ * moment a separator appears or disappears, so restoring it would leave the caret in
+ * the wrong place on exactly the keystrokes that matter.
+ *
+ * When a separator is passed and it directly follows that position, the caret steps
+ * over it: while typing, it must land in the NEXT field rather than in front of a
+ * separator that has just been written. On deletion the argument is omitted, so the
+ * caret stays before it and the next Backspace reaches the digit.
+ */
+export declare function caretAfterDigits(text: string, n: number, separator?: string): number;
+/**
+ * The empty template shown in the field: "dd/mm/yyyy" in English, "jj/mm/aaaa" in
+ * French, "tt.mm.jjjj" in German, "дд/мм/гггг" in Russian.
+ *
+ * Each letter is the first letter of the field's own name in that language, taken
+ * from `Intl.DisplayNames` — which lands on the attested convention of every
+ * alphabetic script without a table to maintain. It falls back to the Latin letters
+ * when that part of `Intl` is missing, or when the script is ideographic and the
+ * repetition would mean nothing.
+ */
+export declare function maskPlaceholder(locale: string, mask: DateMask): string;

package/dist/utils/date.js

@@ -0,0 +1,225 @@
+import { digitsOf as e, pad2 as t } from "./text.js";
+//#region src/utils/date.ts
+var n = /^\d{4}-\d{2}-\d{2}$/;
+function r(e) {
+	if (typeof e != "string" || !n.test(e)) return !1;
+	let t = i(e);
+	return t !== null && a(t) === e;
+}
+function i(e) {
+	if (typeof e != "string" || !n.test(e)) return null;
+	let t = e.split("-"), r = new Date(Number(t[0]), Number(t[1]) - 1, Number(t[2]));
+	return Number.isNaN(r.getTime()) ? null : r;
+}
+function a(e) {
+	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+}
+function o(e, t, n) {
+	return a(new Date(e, t, n));
+}
+function s(e, t) {
+	let n = i(e);
+	return n ? (n.setDate(n.getDate() + t), a(n)) : e;
+}
+function c(e, t) {
+	let n = i(e);
+	if (!n) return e;
+	let r = n.getDate();
+	return n.setDate(1), n.setMonth(n.getMonth() + t), n.setDate(Math.min(r, l(n.getFullYear(), n.getMonth()))), a(n);
+}
+function l(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function u(e, t) {
+	return e < t ? -1 : +(e > t);
+}
+var d = (e, t) => !!e && e === t;
+function f(e, t, n) {
+	return t && u(e, t) < 0 ? t : n && u(e, n) > 0 ? n : e;
+}
+function p(e, t, n) {
+	return !(t && u(e, t) < 0 || n && u(e, n) > 0);
+}
+function m(e, t, n) {
+	let r = new Date(e, t, 1), i = (r.getDay() - n + 7) % 7, o = [], s = new Date(e, t, 1 - i);
+	for (let n = 0; n < 42; n++) {
+		let i = new Date(s.getFullYear(), s.getMonth(), s.getDate() + n), c = i.getMonth() === t && i.getFullYear() === e ? null : u(a(i), a(r)) < 0 ? "prev" : "next";
+		o.push({
+			iso: a(i),
+			adjacent: c
+		});
+	}
+	return o;
+}
+var h = /* @__PURE__ */ new Map();
+function g(e) {
+	let t = h.get(e);
+	if (t !== void 0) return t;
+	let n = _(e);
+	return h.set(e, n), n;
+}
+function _(e) {
+	try {
+		let t = new Intl.Locale(e), n = t.getWeekInfo?.() ?? t.weekInfo;
+		if (n?.firstDay) return n.firstDay % 7;
+	} catch {}
+	return 1;
+}
+var v = Date.UTC(2021, 7, 1), y = 864e5;
+function b(e, t, n = "short") {
+	let r = new Intl.DateTimeFormat(e, {
+		weekday: n,
+		timeZone: "UTC"
+	});
+	return Array.from({ length: 7 }, (e, n) => r.format(v + (t + n) % 7 * y));
+}
+function x(e, t = "long") {
+	let n = new Intl.DateTimeFormat(e, {
+		month: t,
+		timeZone: "UTC"
+	});
+	return Array.from({ length: 12 }, (e, t) => n.format(Date.UTC(2021, t, 1)));
+}
+function S(e) {
+	return x(e, "long").map((e) => {
+		let t = [...e];
+		return t.length <= 4 ? e : t.slice(0, 3).join("") + ".";
+	});
+}
+var C = /* @__PURE__ */ new Map();
+function w(e, t) {
+	let n = `${e}|${JSON.stringify(t)}`, r = C.get(n);
+	return r || (r = new Intl.DateTimeFormat(e, t), C.set(n, r)), r;
+}
+function T(e, t, n = "long") {
+	return w(e, {
+		month: n,
+		timeZone: "UTC"
+	}).format(Date.UTC(2021, t, 1));
+}
+function E(e, t, n) {
+	let r = i(e);
+	return r ? w(t, n).format(r) : "";
+}
+function D(e, t, n, r) {
+	let a = i(e), o = i(t);
+	if (!a || !o) return "";
+	let s = w(n, r);
+	return u(e, t) === 0 ? s.format(a) : s.formatRange(a, o);
+}
+var O = {
+	order: [
+		"day",
+		"month",
+		"year"
+	],
+	separator: "/",
+	lengths: [
+		2,
+		2,
+		4
+	],
+	size: 8
+}, k = Date.UTC(2021, 10, 22), A = /[‎‏؜]/g, j = /* @__PURE__ */ new Map();
+function M(e) {
+	let t = j.get(e);
+	if (t) return t;
+	let n = N(e);
+	return j.set(e, n), n;
+}
+function N(e) {
+	try {
+		let t = new Intl.DateTimeFormat(e, {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric",
+			timeZone: "UTC",
+			calendar: "gregory",
+			numberingSystem: "latn"
+		}).formatToParts(k), n = t.map((e) => e.type).filter((e) => e === "day" || e === "month" || e === "year"), r = t.findIndex((e) => e.type !== "literal"), i = t.slice(r).find((e) => e.type === "literal")?.value.replace(A, "").trim();
+		if (n.length === 3 && i) return {
+			order: n,
+			separator: i,
+			lengths: n.map((e) => e === "year" ? 4 : 2),
+			size: 8
+		};
+	} catch {}
+	return O;
+}
+function P(t, n) {
+	let r = e(t).slice(0, n.size), i = "", a = 0;
+	for (let e = 0; e < n.lengths.length; e++) {
+		let t = n.lengths[e], o = r.slice(a, a + t);
+		if (!o || (i += o, a += t, o.length < t)) break;
+		e < n.lengths.length - 1 && (i += n.separator);
+	}
+	return i;
+}
+function F(e, t) {
+	if (!r(e)) return "";
+	let [n, i, a] = e.split("-"), o = {
+		year: n,
+		month: i,
+		day: a
+	};
+	return P(t.order.map((e) => o[e]).join(""), t);
+}
+function I(t, n, i = {}) {
+	let a = e(t), o = {}, s = 0;
+	for (let e = 0; e < n.order.length; e++) {
+		let t = n.order[e], r = n.lengths[e], c = a.slice(s, s + r);
+		if (c.length === r) s += r;
+		else if (t === "year" && i.yearPivot !== void 0 && e === n.order.length - 1 && c.length === 2) s += 2;
+		else return null;
+		o[t] = c;
+	}
+	if (s !== a.length) return null;
+	let c = `${o.year.length === 2 ? String(i.yearPivot + Number(o.year)) : o.year}-${o.month}-${o.day}`;
+	return r(c) ? c : null;
+}
+function L(e, t, n) {
+	let r = 0;
+	if (t > 0) {
+		r = e.length;
+		let n = 0;
+		for (let i = 0; i < e.length; i++) {
+			let a = e.charCodeAt(i);
+			if (a >= 48 && a <= 57 && ++n === t) {
+				r = i + 1;
+				break;
+			}
+		}
+	}
+	return n && e.startsWith(n, r) && (r += n.length), r;
+}
+var R = {
+	day: "d",
+	month: "m",
+	year: "y"
+}, z = /[\p{sc=Han}\p{sc=Hangul}\p{sc=Hiragana}\p{sc=Katakana}]/u;
+function B(e, t) {
+	let n = H(e);
+	return t.order.map((e, r) => n[e].repeat(t.lengths[r])).join(t.separator);
+}
+var V = /* @__PURE__ */ new Map();
+function H(e) {
+	let t = V.get(e);
+	if (t) return t;
+	let n = { ...R };
+	try {
+		let t = new Intl.DisplayNames(e, { type: "dateTimeField" });
+		for (let r of [
+			"day",
+			"month",
+			"year"
+		]) {
+			let i = [...t.of(r) ?? ""][0];
+			i && /\p{L}/u.test(i) && !z.test(i) && (n[r] = i.toLocaleLowerCase(e));
+		}
+	} catch {}
+	return V.set(e, n), n;
+}
+//#endregion
+export { s as addDays, c as addMonths, m as buildMonthGrid, L as caretAfterDigits, f as clampISO, u as compareISO, M as dateMaskFor, l as daysInMonth, g as firstDayOfWeekFor, P as formatDateMask, E as formatDisplay, D as formatDisplayRange, a as formatISO, d as isSameISO, r as isValidISO, p as isWithin, o as isoOf, F as isoToMask, B as maskPlaceholder, T as monthName, x as monthNames, S as monthNamesCompact, I as parseDateMask, i as parseISO, b as weekdayNames };
+
+//# sourceMappingURL=date.js.map