@funstack/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/number-field/number-field-format.mjs

@@ -0,0 +1,279 @@
+import { roundTo } from "../internal/decimal.mjs";
+//#region src/number-field/number-field-format.ts
+const BIDI = /[؜‎‏‪-‮⁦-⁩]/g;
+function normalize(text) {
+	return text.normalize("NFKC").replace(BIDI, "").replace(/\s/g, " ").toLowerCase();
+}
+/** Every string `format` may emit, with the plural samples that change a unit or currency name. */
+const SAMPLES = [
+	-1234567.891,
+	0,
+	1,
+	2,
+	3,
+	5,
+	11,
+	21,
+	.5,
+	1.5,
+	100
+];
+function collect(locale, options, type, into) {
+	let formatter;
+	try {
+		formatter = new Intl.NumberFormat(locale, options);
+	} catch {
+		return;
+	}
+	for (const sample of SAMPLES) for (const part of formatter.formatToParts(sample)) {
+		if (part.type !== type) continue;
+		const value = normalize(part.value).trim();
+		if (value !== "") into.add(value);
+	}
+}
+function deriveSymbols(locale, options, numberingSystem) {
+	const loc = locale;
+	const probeOptions = {
+		...options,
+		notation: "standard",
+		useGrouping: true,
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 3,
+		minimumSignificantDigits: void 0,
+		maximumSignificantDigits: void 0,
+		signDisplay: "auto",
+		numberingSystem
+	};
+	let probe;
+	try {
+		probe = new Intl.NumberFormat(loc, probeOptions);
+	} catch {
+		probe = new Intl.NumberFormat(loc, {
+			useGrouping: true,
+			minimumFractionDigits: 1,
+			numberingSystem
+		});
+	}
+	const parts = probe.formatToParts(-1234567890.5);
+	let decimal = ".";
+	let group = ",";
+	const minus = /* @__PURE__ */ new Set(["-", "−"]);
+	const plus = /* @__PURE__ */ new Set(["+"]);
+	const integers = [];
+	for (const part of parts) {
+		const value = normalize(part.value);
+		if (part.type === "decimal") decimal = value;
+		else if (part.type === "group") group = value;
+		else if (part.type === "minusSign" && value.trim() !== "") minus.add(value.trim());
+		else if (part.type === "integer") integers.push(part.value);
+	}
+	try {
+		for (const part of new Intl.NumberFormat(loc, {
+			...probeOptions,
+			signDisplay: "always"
+		}).formatToParts(1)) if (part.type === "plusSign") plus.add(normalize(part.value).trim());
+	} catch {}
+	const primaryGroup = integers.at(-1)?.length ?? 3;
+	const secondaryGroup = integers.length > 2 ? integers.at(-2)?.length ?? 3 : primaryGroup;
+	const groups = [group.trim() === "" ? " " : group];
+	if ([
+		"'",
+		"’",
+		"ʼ"
+	].includes(group)) groups.push("'", "’", "ʼ");
+	const affixes = /* @__PURE__ */ new Set();
+	const style = options.style ?? "decimal";
+	if (style === "percent") {
+		collect(loc, options, "percentSign", affixes);
+		affixes.add("%");
+	} else if (style === "currency") {
+		for (const currencyDisplay of [
+			"symbol",
+			"narrowSymbol",
+			"code",
+			"name"
+		]) collect(loc, {
+			...options,
+			currencyDisplay
+		}, "currency", affixes);
+		if (options.currency !== void 0) affixes.add(options.currency.toLowerCase());
+	} else if (style === "unit") for (const unitDisplay of [
+		"short",
+		"long",
+		"narrow"
+	]) collect(loc, {
+		...options,
+		unitDisplay
+	}, "unit", affixes);
+	const literals = /* @__PURE__ */ new Set();
+	collect(loc, options, "literal", literals);
+	for (const ch of ["(", ")"]) literals.delete(ch);
+	const literalList = [...literals].filter((l) => l !== "").sort((a, b) => b.length - a.length);
+	const digitFormat = new Intl.NumberFormat(loc, {
+		useGrouping: false,
+		numberingSystem
+	});
+	const digits = Array.from({ length: 10 }, (_, d) => normalize(digitFormat.format(d)));
+	return {
+		decimal,
+		groups,
+		minus: [...minus],
+		plus: [...plus],
+		affixes: [...affixes].sort((a, b) => b.length - a.length),
+		literals: literalList,
+		edges: [...affixes, ...literalList].sort((a, b) => b.length - a.length),
+		digits,
+		primaryGroup,
+		secondaryGroup
+	};
+}
+function stripEdges(text, tokens) {
+	let s = text.trim();
+	let changed = true;
+	while (changed && s !== "") {
+		changed = false;
+		for (const token of tokens) {
+			if (s.startsWith(token)) {
+				s = s.slice(token.length).trim();
+				changed = true;
+			}
+			if (s.endsWith(token)) {
+				s = s.slice(0, s.length - token.length).trim();
+				changed = true;
+			}
+		}
+	}
+	return s;
+}
+function startsWithAny(s, tokens) {
+	for (const token of tokens) if (s.startsWith(token)) return token;
+	return null;
+}
+function endsWithAny(s, tokens) {
+	for (const token of tokens) if (s.endsWith(token)) return token;
+	return null;
+}
+/** Strict grouping (5.3 step 5): the integer part, with group separators replaced by nothing. */
+function ungroup(integer, symbols) {
+	const separators = symbols.groups;
+	const chunks = [];
+	let current = "";
+	for (const ch of integer) if (separators.includes(ch)) {
+		chunks.push(current);
+		current = "";
+	} else current += ch;
+	chunks.push(current);
+	if (chunks.length === 1) return integer;
+	const { primaryGroup, secondaryGroup } = symbols;
+	const last = chunks.length - 1;
+	for (let i = 0; i <= last; i += 1) {
+		const length = chunks[i].length;
+		if (i === last) {
+			if (length !== primaryGroup) return void 0;
+		} else if (i === 0) {
+			if (length < 1 || length > secondaryGroup) return void 0;
+		} else if (length !== secondaryGroup) return;
+	}
+	return chunks.join("");
+}
+function parseWith(text, symbols, percent, round) {
+	let s = normalize(text).trim();
+	if (s === "") return null;
+	const edges = symbols.edges;
+	s = stripEdges(s, edges);
+	if (s === "") return void 0;
+	let negative = false;
+	if (s.startsWith("(") && s.endsWith(")")) {
+		negative = true;
+		s = stripEdges(s.slice(1, -1), edges);
+	} else {
+		const leadMinus = startsWithAny(s, symbols.minus);
+		const leadPlus = leadMinus === null ? startsWithAny(s, symbols.plus) : null;
+		if (leadMinus !== null || leadPlus !== null) {
+			negative = leadMinus !== null;
+			s = s.slice((leadMinus ?? leadPlus).length);
+		} else {
+			const trailMinus = endsWithAny(s, symbols.minus);
+			const trailPlus = trailMinus === null ? endsWithAny(s, symbols.plus) : null;
+			if (trailMinus !== null || trailPlus !== null) {
+				negative = trailMinus !== null;
+				s = s.slice(0, s.length - (trailMinus ?? trailPlus).length);
+			}
+		}
+		s = stripEdges(s, edges);
+	}
+	if (s === "") return void 0;
+	const decimalAliases = [symbols.decimal];
+	if (symbols.decimal === "٫" && !symbols.groups.includes(".")) decimalAliases.push(".");
+	let integer = "";
+	let fraction = null;
+	for (const ch of s) {
+		const localDigit = symbols.digits.indexOf(ch);
+		const digit = localDigit !== -1 ? String(localDigit) : /[0-9]/.test(ch) ? ch : null;
+		if (digit !== null) {
+			if (fraction === null) integer += digit;
+			else fraction += digit;
+		} else if (decimalAliases.includes(ch)) {
+			if (fraction !== null) return void 0;
+			fraction = "";
+		} else if (symbols.groups.includes(ch)) {
+			if (fraction !== null) return void 0;
+			integer += ch;
+		} else return;
+	}
+	const digitsOnly = ungroup(integer, symbols);
+	if (digitsOnly === void 0) return void 0;
+	if (digitsOnly === "" && (fraction === null || fraction === "")) return void 0;
+	let value = Number(`${digitsOnly === "" ? "0" : digitsOnly}.${fraction ?? ""}`.replace(/\.$/, ""));
+	if (!Number.isFinite(value)) return void 0;
+	if (negative) value = -value;
+	const result = round(percent ? value / 100 : value);
+	return result === 0 ? 0 : result;
+}
+const cache = /* @__PURE__ */ new Map();
+function cacheKey(locale, format) {
+	const entries = Object.entries(format).filter(([, v]) => v !== void 0).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
+	return JSON.stringify([locale ?? null, entries]);
+}
+/** A stable serialisation of `format`, for memoising on its content rather than its identity. */
+function formatKey(format) {
+	return cacheKey(void 0, format ?? {});
+}
+/**
+* The formatter and parser for `(locale, format)`, cached per pair at module level (construction
+* is expensive). `locale` `undefined` is the runtime's locale.
+*/
+function createNumberFormatter(locale, format = {}) {
+	const key = cacheKey(locale, format);
+	const cached = cache.get(key);
+	if (cached !== void 0) return cached;
+	const intl = new Intl.NumberFormat(locale, format);
+	const resolved = intl.resolvedOptions();
+	const percent = resolved.style === "percent";
+	const significant = format.maximumSignificantDigits !== void 0 || format.minimumSignificantDigits !== void 0;
+	const fractionDigits = significant ? void 0 : resolved.maximumFractionDigits;
+	const notation = format.notation ?? "standard";
+	const warning = notation !== "standard" ? `\`notation: "${notation}"\` cannot be parsed back; typed text in this format reverts.` : significant ? "`maximumSignificantDigits` makes the value's rounding impossible to state; the value may differ from the text." : null;
+	const round = (value) => {
+		if (fractionDigits === void 0) return value;
+		if (percent) return roundTo(roundTo(value * 100, fractionDigits) / 100, fractionDigits + 2);
+		return roundTo(value, fractionDigits);
+	};
+	const symbols = deriveSymbols(locale, format, resolved.numberingSystem);
+	const formatter = {
+		locale: resolved.locale,
+		format: (value) => value === null ? "" : intl.format(value),
+		parse: (text) => parseWith(text, symbols, percent, round),
+		round,
+		fractionDigits,
+		allowsFractions: percent || fractionDigits === void 0 || fractionDigits > 0,
+		percent,
+		warning
+	};
+	cache.set(key, formatter);
+	return formatter;
+}
+//#endregion
+export { createNumberFormatter, formatKey };
+
+//# sourceMappingURL=number-field-format.mjs.map

package/dist/number-field/number-field-format.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-format.mjs","names":[],"sources":["../../src/number-field/number-field-format.ts"],"sourcesContent":["// Locale-aware formatting and parsing of NumberField (design/components/number-field.md 5). No\n// directive: no React, no client-only API; usable on the server.\n//\n// ECMA-402 has no parser, so the locale's symbols are derived from `formatToParts` once per\n// `(locale, format)` and the parser accepts exactly the shapes the formatter produces (plus\n// full-width digits, ASCII signs and the other spellings of the currency or unit), with **strict\n// grouping**: `1,5` under `en` is unparsable, never `15`.\nimport { roundTo } from \"../internal/decimal.js\";\n\nexport interface NumberFormatter {\n  /** The resolved locale (`resolvedOptions().locale`). */\n  readonly locale: string;\n  /** The text for `value`; `\"\"` for `null`. */\n  readonly format: (value: number | null) => string;\n  /**\n   * The value `text` stands for, rounded (5.4): `null` for an empty text, `undefined` for an\n   * unparsable one.\n   */\n  readonly parse: (text: string) => number | null | undefined;\n  /** `value` rounded to what the text can show (5.4); unchanged with significant digits. */\n  readonly round: (value: number) => number;\n  /** The resolved `maximumFractionDigits`, or `undefined` when significant digits rule. */\n  readonly fractionDigits: number | undefined;\n  /** The format can show a fraction (`inputmode=\"decimal\"`, 8.5). */\n  readonly allowsFractions: boolean;\n  /** `style: \"percent\"`: the text shows the value × 100. */\n  readonly percent: boolean;\n  /** Development: why this format cannot round-trip (`compact` notation, significant digits). */\n  readonly warning: string | null;\n}\n\n// Bidirectional controls that some locales put around numbers and signs (`ar`: U+061C).\nconst BIDI = /[؜‎‏‪-‮⁦-⁩]/g;\n\nfunction normalize(text: string): string {\n  return text.normalize(\"NFKC\").replace(BIDI, \"\").replace(/\\s/g, \" \").toLowerCase();\n}\n\n/** Every string `format` may emit, with the plural samples that change a unit or currency name. */\nconst SAMPLES = [-1234567.891, 0, 1, 2, 3, 5, 11, 21, 0.5, 1.5, 100];\n\nfunction collect(\n  locale: string | readonly string[] | undefined,\n  options: Intl.NumberFormatOptions,\n  type: Intl.NumberFormatPartTypes,\n  into: Set<string>,\n): void {\n  let formatter: Intl.NumberFormat;\n  try {\n    formatter = new Intl.NumberFormat(locale as string | string[] | undefined, options);\n  } catch {\n    return;\n  }\n  for (const sample of SAMPLES) {\n    for (const part of formatter.formatToParts(sample)) {\n      if (part.type !== type) continue;\n      const value = normalize(part.value).trim();\n      if (value !== \"\") into.add(value);\n    }\n  }\n}\n\ninterface Symbols {\n  readonly decimal: string;\n  /** Group separators accepted (normalised). `\" \"` stands for any whitespace. */\n  readonly groups: readonly string[];\n  readonly minus: readonly string[];\n  readonly plus: readonly string[];\n  /** Currency, unit and percent strings, longest first. */\n  readonly affixes: readonly string[];\n  /** Literal strings the formatter puts around the number (never parentheses). */\n  readonly literals: readonly string[];\n  /** Affixes and literals, longest first: what may be stripped from the edges. */\n  readonly edges: readonly string[];\n  /** The numbering system's ten digits, normalised. */\n  readonly digits: readonly string[];\n  readonly primaryGroup: number;\n  readonly secondaryGroup: number;\n}\n\nfunction deriveSymbols(\n  locale: string | readonly string[] | undefined,\n  options: Intl.NumberFormatOptions,\n  numberingSystem: string,\n): Symbols {\n  const loc = locale as string | string[] | undefined;\n  // A probe that always shows a fraction and groups, without rounding by significant digits.\n  const probeOptions: Intl.NumberFormatOptions = {\n    ...options,\n    notation: \"standard\",\n    useGrouping: true,\n    minimumFractionDigits: 1,\n    maximumFractionDigits: 3,\n    minimumSignificantDigits: undefined,\n    maximumSignificantDigits: undefined,\n    signDisplay: \"auto\",\n    numberingSystem,\n  };\n  let probe: Intl.NumberFormat;\n  try {\n    probe = new Intl.NumberFormat(loc, probeOptions);\n  } catch {\n    probe = new Intl.NumberFormat(loc, {\n      useGrouping: true,\n      minimumFractionDigits: 1,\n      numberingSystem,\n    });\n  }\n  const parts = probe.formatToParts(-1234567890.5);\n  let decimal = \".\";\n  let group = \",\";\n  const minus = new Set([\"-\", \"−\"]);\n  const plus = new Set([\"+\"]);\n  const integers: string[] = [];\n  for (const part of parts) {\n    const value = normalize(part.value);\n    if (part.type === \"decimal\") decimal = value;\n    else if (part.type === \"group\") group = value;\n    else if (part.type === \"minusSign\" && value.trim() !== \"\") minus.add(value.trim());\n    else if (part.type === \"integer\") integers.push(part.value);\n  }\n  try {\n    for (const part of new Intl.NumberFormat(loc, {\n      ...probeOptions,\n      signDisplay: \"always\",\n    }).formatToParts(1)) {\n      if (part.type === \"plusSign\") plus.add(normalize(part.value).trim());\n    }\n  } catch {\n    // The plus sign stays ASCII.\n  }\n  const primaryGroup = integers.at(-1)?.length ?? 3;\n  const secondaryGroup = integers.length > 2 ? (integers.at(-2)?.length ?? 3) : primaryGroup;\n\n  const groups = [group.trim() === \"\" ? \" \" : group];\n  // An apostrophe group (`de-CH`) is typed with whichever apostrophe the keyboard has.\n  if ([\"'\", \"’\", \"ʼ\"].includes(group)) groups.push(\"'\", \"’\", \"ʼ\");\n\n  const affixes = new Set<string>();\n  const style = options.style ?? \"decimal\";\n  if (style === \"percent\") {\n    collect(loc, options, \"percentSign\", affixes);\n    affixes.add(\"%\");\n  } else if (style === \"currency\") {\n    for (const currencyDisplay of [\"symbol\", \"narrowSymbol\", \"code\", \"name\"] as const) {\n      collect(loc, { ...options, currencyDisplay }, \"currency\", affixes);\n    }\n    if (options.currency !== undefined) affixes.add(options.currency.toLowerCase());\n  } else if (style === \"unit\") {\n    for (const unitDisplay of [\"short\", \"long\", \"narrow\"] as const) {\n      collect(loc, { ...options, unitDisplay }, \"unit\", affixes);\n    }\n  }\n  const literals = new Set<string>();\n  collect(loc, options, \"literal\", literals);\n  for (const ch of [\"(\", \")\"]) literals.delete(ch);\n\n  const literalList = [...literals].filter((l) => l !== \"\").sort((a, b) => b.length - a.length);\n\n  const digitFormat = new Intl.NumberFormat(loc, { useGrouping: false, numberingSystem });\n  const digits = Array.from({ length: 10 }, (_, d) => normalize(digitFormat.format(d)));\n\n  return {\n    decimal,\n    groups,\n    minus: [...minus],\n    plus: [...plus],\n    affixes: [...affixes].sort((a, b) => b.length - a.length),\n    literals: literalList,\n    edges: [...affixes, ...literalList].sort((a, b) => b.length - a.length),\n    digits,\n    primaryGroup,\n    secondaryGroup,\n  };\n}\n\nfunction stripEdges(text: string, tokens: readonly string[]): string {\n  let s = text.trim();\n  let changed = true;\n  while (changed && s !== \"\") {\n    changed = false;\n    for (const token of tokens) {\n      if (s.startsWith(token)) {\n        s = s.slice(token.length).trim();\n        changed = true;\n      }\n      if (s.endsWith(token)) {\n        s = s.slice(0, s.length - token.length).trim();\n        changed = true;\n      }\n    }\n  }\n  return s;\n}\n\nfunction startsWithAny(s: string, tokens: readonly string[]): string | null {\n  for (const token of tokens) if (s.startsWith(token)) return token;\n  return null;\n}\n\nfunction endsWithAny(s: string, tokens: readonly string[]): string | null {\n  for (const token of tokens) if (s.endsWith(token)) return token;\n  return null;\n}\n\n/** Strict grouping (5.3 step 5): the integer part, with group separators replaced by nothing. */\nfunction ungroup(integer: string, symbols: Symbols): string | undefined {\n  const separators = symbols.groups;\n  const chunks: string[] = [];\n  let current = \"\";\n  for (const ch of integer) {\n    if (separators.includes(ch)) {\n      chunks.push(current);\n      current = \"\";\n    } else {\n      current += ch;\n    }\n  }\n  chunks.push(current);\n  if (chunks.length === 1) return integer;\n  const { primaryGroup, secondaryGroup } = symbols;\n  const last = chunks.length - 1;\n  for (let i = 0; i <= last; i += 1) {\n    const length = chunks[i]!.length;\n    if (i === last) {\n      if (length !== primaryGroup) return undefined;\n    } else if (i === 0) {\n      if (length < 1 || length > secondaryGroup) return undefined;\n    } else if (length !== secondaryGroup) {\n      return undefined;\n    }\n  }\n  return chunks.join(\"\");\n}\n\nfunction parseWith(\n  text: string,\n  symbols: Symbols,\n  percent: boolean,\n  round: (value: number) => number,\n): number | null | undefined {\n  let s = normalize(text).trim();\n  if (s === \"\") return null;\n\n  // 2. Currency, unit and percent strings and literals, at the edges only (and again inside the\n  // sign below): in the middle of the number they are garbage, never a group separator.\n  const edges = symbols.edges;\n  s = stripEdges(s, edges);\n  if (s === \"\") return undefined;\n\n  // 3. One sign: parentheses (accounting), a leading or trailing minus or plus.\n  let negative = false;\n  if (s.startsWith(\"(\") && s.endsWith(\")\")) {\n    negative = true;\n    s = stripEdges(s.slice(1, -1), edges);\n  } else {\n    const leadMinus = startsWithAny(s, symbols.minus);\n    const leadPlus = leadMinus === null ? startsWithAny(s, symbols.plus) : null;\n    if (leadMinus !== null || leadPlus !== null) {\n      negative = leadMinus !== null;\n      s = s.slice((leadMinus ?? leadPlus)!.length);\n    } else {\n      const trailMinus = endsWithAny(s, symbols.minus);\n      const trailPlus = trailMinus === null ? endsWithAny(s, symbols.plus) : null;\n      if (trailMinus !== null || trailPlus !== null) {\n        negative = trailMinus !== null;\n        s = s.slice(0, s.length - (trailMinus ?? trailPlus)!.length);\n      }\n    }\n    s = stripEdges(s, edges);\n  }\n  if (s === \"\") return undefined;\n\n  // 4. Digits to ASCII; anything but a digit, the decimal or a group separator is garbage.\n  const decimalAliases = [symbols.decimal];\n  // An Arabic decimal separator is often typed as the ASCII period.\n  if (symbols.decimal === \"٫\" && !symbols.groups.includes(\".\")) decimalAliases.push(\".\");\n  let integer = \"\";\n  let fraction: string | null = null;\n  for (const ch of s) {\n    const localDigit = symbols.digits.indexOf(ch);\n    const digit = localDigit !== -1 ? String(localDigit) : /[0-9]/.test(ch) ? ch : null;\n    if (digit !== null) {\n      if (fraction === null) integer += digit;\n      else fraction += digit;\n    } else if (decimalAliases.includes(ch)) {\n      if (fraction !== null) return undefined;\n      fraction = \"\";\n    } else if (symbols.groups.includes(ch)) {\n      // 5. Group separators only before the decimal separator.\n      if (fraction !== null) return undefined;\n      integer += ch;\n    } else {\n      return undefined;\n    }\n  }\n  const digitsOnly = ungroup(integer, symbols);\n  if (digitsOnly === undefined) return undefined;\n  if (digitsOnly === \"\" && (fraction === null || fraction === \"\")) return undefined;\n\n  // 6. The number; percent divides by 100.\n  let value = Number(\n    `${digitsOnly === \"\" ? \"0\" : digitsOnly}.${fraction ?? \"\"}`.replace(/\\.$/, \"\"),\n  );\n  if (!Number.isFinite(value)) return undefined;\n  if (negative) value = -value;\n  // 7. Rounded to what the text shows.\n  const result = round(percent ? value / 100 : value);\n  return result === 0 ? 0 : result;\n}\n\nconst cache = new Map<string, NumberFormatter>();\n\nfunction cacheKey(locale: string | readonly string[] | undefined, format: object): string {\n  const entries = Object.entries(format)\n    .filter(([, v]) => v !== undefined)\n    .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));\n  return JSON.stringify([locale ?? null, entries]);\n}\n\n/** A stable serialisation of `format`, for memoising on its content rather than its identity. */\nexport function formatKey(format: Intl.NumberFormatOptions | undefined): string {\n  return cacheKey(undefined, format ?? {});\n}\n\n/**\n * The formatter and parser for `(locale, format)`, cached per pair at module level (construction\n * is expensive). `locale` `undefined` is the runtime's locale.\n */\nexport function createNumberFormatter(\n  locale: string | readonly string[] | undefined,\n  format: Intl.NumberFormatOptions = {},\n): NumberFormatter {\n  const key = cacheKey(locale, format);\n  const cached = cache.get(key);\n  if (cached !== undefined) return cached;\n\n  const intl = new Intl.NumberFormat(locale as string | string[] | undefined, format);\n  const resolved = intl.resolvedOptions() as Intl.ResolvedNumberFormatOptions & {\n    roundingPriority?: string;\n  };\n  const percent = resolved.style === \"percent\";\n  const significant =\n    format.maximumSignificantDigits !== undefined || format.minimumSignificantDigits !== undefined;\n  const fractionDigits = significant ? undefined : resolved.maximumFractionDigits;\n  const notation = format.notation ?? \"standard\";\n  const warning =\n    notation !== \"standard\"\n      ? `\\`notation: \"${notation}\"\\` cannot be parsed back; typed text in this format reverts.`\n      : significant\n        ? \"`maximumSignificantDigits` makes the value's rounding impossible to state; the value \" +\n          \"may differ from the text.\"\n        : null;\n\n  const round = (value: number): number => {\n    if (fractionDigits === undefined) return value;\n    if (percent) return roundTo(roundTo(value * 100, fractionDigits) / 100, fractionDigits + 2);\n    return roundTo(value, fractionDigits);\n  };\n\n  const symbols = deriveSymbols(locale, format, resolved.numberingSystem);\n  const formatter: NumberFormatter = {\n    locale: resolved.locale,\n    format: (value) => (value === null ? \"\" : intl.format(value)),\n    parse: (text) => parseWith(text, symbols, percent, round),\n    round,\n    fractionDigits,\n    allowsFractions: percent || fractionDigits === undefined || fractionDigits > 0,\n    percent,\n    warning,\n  };\n  cache.set(key, formatter);\n  return formatter;\n}\n"],"mappings":"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"}

package/dist/number-field/number-field-increment.d.mts

@@ -0,0 +1,32 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import "./number-field-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/number-field/number-field-increment.d.ts
+export interface NumberFieldButtonState {
+  /** The Root is pending and the latest step or commit came from this button. */
+  readonly pending: boolean;
+  /** The prop, the Root's `disabled` or `readOnly`, or the next step would change nothing. */
+  readonly disabled: boolean;
+}
+export interface NumberFieldIncrementProps extends Omit<ComponentPropsWithRef<"button">, "type" | "tabIndex" | "disabled" | "onPointerDown" | "onClick" | "onContextMenu" | "aria-controls" | "className" | "style" | "children"> {
+  disabled?: boolean;
+  className?: StateValue<string | undefined, NumberFieldButtonState>;
+  style?: StateValue<CSSProperties | undefined, NumberFieldButtonState>;
+  children?: StateValue<ReactNode, NumberFieldButtonState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, NumberFieldButtonState>;
+}
+export type NumberFieldDecrementProps = NumberFieldIncrementProps;
+/**
+ * Steps the value up: `button[type=button][tabindex=-1]` with `aria-controls` → the input and the
+ * default `aria-label` `"Increase"`; one step at the press, then repeated while held, one commit
+ * at the release. Natively `disabled` when the next step would change nothing.
+ *
+ * Owned keys: `type`, `tabIndex`, `aria-controls`, `disabled`, `onPointerDown`, `onClick`,
+ * `onContextMenu`, `data-pending`, `data-disabled`.
+ */
+export declare function NumberFieldIncrement(props: NumberFieldIncrementProps): ReactNode;
+export declare namespace NumberFieldIncrement {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=number-field-increment.d.mts.map

package/dist/number-field/number-field-increment.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-increment.d.mts","names":[],"sources":["../../src/number-field/number-field-increment.tsx"],"mappings":";;;;iBAYiB;;WAEN;;WAEA;;iBAGM,kCAAkC,KACjD;EAYA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;YAG3C,4BAA4B;;;;;;;;;wBA6DxB,qBAAqB,OAAO,4BAAyB;yBAArD"}

package/dist/number-field/number-field-increment.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { isAtBound } from "./number-field-arithmetic.mjs";
+import { useNumberFieldContext } from "./number-field-context.mjs";
+import { useStepButton } from "./use-step-button.mjs";
+//#region src/number-field/number-field-increment.tsx
+const LABELS = {
+	increment: "Increase",
+	decrement: "Decrease"
+};
+/** Shared by `NumberField.Increment` and `NumberField.Decrement` (design 3.3, 4.3). */
+function useStepButtonElement(direction, part, props) {
+	const { disabled: disabledProp = false, className, style, children, render, ...rest } = props;
+	const ctx = useNumberFieldContext(part);
+	const { state } = ctx;
+	const atBound = isAtBound(ctx.stepBase, direction === "increment" ? 1 : -1, ctx.bounds);
+	const disabled = disabledProp || state.disabled || state.readOnly || atBound;
+	const pending = ctx.pendingSource === direction;
+	const buttonState = {
+		pending,
+		disabled
+	};
+	const handlers = useStepButton(ctx, direction, disabled);
+	useDevWarning(rest["aria-label"] === "", `${part}: \`aria-label=""\` leaves the button without a name. Pass the label text instead (the default is "${LABELS[direction]}").`);
+	const props$ = {
+		...rest["aria-labelledby"] === void 0 ? { "aria-label": LABELS[direction] } : {},
+		...rest
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state: buttonState,
+		className,
+		style,
+		children,
+		props: props$,
+		libraryProps: {
+			...rendersButton(render) ? { type: "button" } : {},
+			tabIndex: -1,
+			"aria-controls": ctx.inputId,
+			disabled,
+			onPointerDown: handlers.onPointerDown,
+			onClick: handlers.onClick,
+			onContextMenu: handlers.onContextMenu,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled)
+		}
+	});
+}
+/**
+* Steps the value up: `button[type=button][tabindex=-1]` with `aria-controls` → the input and the
+* default `aria-label` `"Increase"`; one step at the press, then repeated while held, one commit
+* at the release. Natively `disabled` when the next step would change nothing.
+*
+* Owned keys: `type`, `tabIndex`, `aria-controls`, `disabled`, `onPointerDown`, `onClick`,
+* `onContextMenu`, `data-pending`, `data-disabled`.
+*/
+function NumberFieldIncrement(props) {
+	return useStepButtonElement("increment", "NumberField.Increment", props);
+}
+NumberFieldIncrement.displayName = "NumberFieldIncrement";
+//#endregion
+export { NumberFieldIncrement, useStepButtonElement };
+
+//# sourceMappingURL=number-field-increment.mjs.map

package/dist/number-field/number-field-increment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-increment.mjs","names":[],"sources":["../../src/number-field/number-field-increment.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { isAtBound } from \"./number-field-arithmetic.js\";\nimport { useNumberFieldContext } from \"./number-field-context.js\";\nimport type { StepDirection } from \"./number-field-context.js\";\nimport { useStepButton } from \"./use-step-button.js\";\n\nexport interface NumberFieldButtonState {\n  /** The Root is pending and the latest step or commit came from this button. */\n  readonly pending: boolean;\n  /** The prop, the Root's `disabled` or `readOnly`, or the next step would change nothing. */\n  readonly disabled: boolean;\n}\n\nexport interface NumberFieldIncrementProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"type\"\n  | \"tabIndex\"\n  | \"disabled\"\n  | \"onPointerDown\"\n  | \"onClick\"\n  | \"onContextMenu\"\n  | \"aria-controls\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  disabled?: boolean;\n  className?: StateValue<string | undefined, NumberFieldButtonState>;\n  style?: StateValue<CSSProperties | undefined, NumberFieldButtonState>;\n  children?: StateValue<ReactNode, NumberFieldButtonState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, NumberFieldButtonState>;\n}\n\nexport type NumberFieldDecrementProps = NumberFieldIncrementProps;\n\nconst LABELS: Record<StepDirection, string> = { increment: \"Increase\", decrement: \"Decrease\" };\n\n/** Shared by `NumberField.Increment` and `NumberField.Decrement` (design 3.3, 4.3). */\nexport function useStepButtonElement(\n  direction: StepDirection,\n  part: string,\n  props: NumberFieldIncrementProps,\n): ReactNode {\n  const { disabled: disabledProp = false, className, style, children, render, ...rest } = props;\n  const ctx = useNumberFieldContext(part);\n  const { state } = ctx;\n  const atBound = isAtBound(ctx.stepBase, direction === \"increment\" ? 1 : -1, ctx.bounds);\n  const disabled = disabledProp || state.disabled || state.readOnly || atBound;\n  const pending = ctx.pendingSource === direction;\n  const buttonState: NumberFieldButtonState = { pending, disabled };\n  const handlers = useStepButton(ctx, direction, disabled);\n\n  useDevWarning(\n    rest[\"aria-label\"] === \"\",\n    `${part}: \\`aria-label=\"\"\\` leaves the button without a name. Pass the label text instead ` +\n      `(the default is \"${LABELS[direction]}\").`,\n  );\n\n  // The built-in name is a default the consumer's `aria-label` or `aria-labelledby` replaces.\n  const props$ = {\n    ...(rest[\"aria-labelledby\"] === undefined ? { \"aria-label\": LABELS[direction] } : {}),\n    ...rest,\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, NumberFieldButtonState>({\n    defaultElement: \"button\",\n    render,\n    state: buttonState,\n    className,\n    style,\n    children,\n    props: props$,\n    libraryProps: {\n      ...(rendersButton(render) ? { type: \"button\" as const } : {}),\n      tabIndex: -1,\n      \"aria-controls\": ctx.inputId,\n      disabled,\n      onPointerDown: handlers.onPointerDown,\n      onClick: handlers.onClick,\n      onContextMenu: handlers.onContextMenu,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    } as Partial<ComponentPropsWithRef<\"button\">> & DataAttributes,\n  });\n}\n\n/**\n * Steps the value up: `button[type=button][tabindex=-1]` with `aria-controls` → the input and the\n * default `aria-label` `\"Increase\"`; one step at the press, then repeated while held, one commit\n * at the release. Natively `disabled` when the next step would change nothing.\n *\n * Owned keys: `type`, `tabIndex`, `aria-controls`, `disabled`, `onPointerDown`, `onClick`,\n * `onContextMenu`, `data-pending`, `data-disabled`.\n */\nexport function NumberFieldIncrement(props: NumberFieldIncrementProps) {\n  return useStepButtonElement(\"increment\", \"NumberField.Increment\", props);\n}\n\nNumberFieldIncrement.displayName = \"NumberFieldIncrement\";\n"],"mappings":";;;;;;;;;AAyCA,MAAM,SAAwC;CAAE,WAAW;CAAY,WAAW;AAAW;;AAG7F,SAAgB,qBACd,WACA,MACA,OACW;CACX,MAAM,EAAE,UAAU,eAAe,OAAO,WAAW,OAAO,UAAU,QAAQ,GAAG,SAAS;CACxF,MAAM,MAAM,sBAAsB,IAAI;CACtC,MAAM,EAAE,UAAU;CAClB,MAAM,UAAU,UAAU,IAAI,UAAU,cAAc,cAAc,IAAI,IAAI,IAAI,MAAM;CACtF,MAAM,WAAW,gBAAgB,MAAM,YAAY,MAAM,YAAY;CACrE,MAAM,UAAU,IAAI,kBAAkB;CACtC,MAAM,cAAsC;EAAE;EAAS;CAAS;CAChE,MAAM,WAAW,cAAc,KAAK,WAAW,QAAQ;CAEvD,cACE,KAAK,kBAAkB,IACvB,GAAG,KAAK,qGACc,OAAO,WAAW,IAC1C;CAGA,MAAM,SAAS;EACb,GAAI,KAAK,uBAAuB,KAAA,IAAY,EAAE,cAAc,OAAO,WAAW,IAAI,CAAC;EACnF,GAAG;CACL;CAEA,OAAO,UAAmE;EACxE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,IAAI,EAAE,MAAM,SAAkB,IAAI,CAAC;GAC3D,UAAU;GACV,iBAAiB,IAAI;GACrB;GACA,eAAe,SAAS;GACxB,SAAS,SAAS;GAClB,eAAe,SAAS;GACxB,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;CACF,CAAC;AACH;;;;;;;;;AAUA,SAAgB,qBAAqB,OAAkC;CACrE,OAAO,qBAAqB,aAAa,yBAAyB,KAAK;AACzE;AAEA,qBAAqB,cAAc"}

package/dist/number-field/number-field-input.d.mts

@@ -0,0 +1,29 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { NumberFieldState } from "./number-field-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, Ref } from "react";
+//#region src/number-field/number-field-input.d.ts
+export interface NumberFieldInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "type" | "onChange" | "onKeyDown" | "onBlur" | "disabled" | "readOnly" | "required" | "name" | "form" | "min" | "max" | "step" | "pattern" | "aria-invalid" | "className" | "style" | "children"> {
+  /** The hidden native `<input type="number">` rendered after the visible input. */
+  hiddenInputRef?: Ref<HTMLInputElement>;
+  className?: StateValue<string | undefined, NumberFieldState>;
+  style?: StateValue<CSSProperties | undefined, NumberFieldState>;
+  /** Must render an `<input>` of type `text`, `search` or `tel`; the hidden input is rendered after it regardless. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, NumberFieldState>;
+}
+/**
+ * The visible text field (`input[type=text]`, the user's surface) **followed by** the visually
+ * hidden native `input[type=number]` that carries `name`, `form`, `min`, `max`, `step`,
+ * `required` and the canonical value (design/components/number-field.md 6). `ref` goes to the
+ * visible input, `hiddenInputRef` to the hidden one.
+ *
+ * Owned keys on the visible input: `id`, `type`, `value`, `disabled`, `readOnly`, `onChange`,
+ * `onKeyDown`, `onBlur`, `aria-invalid` and `aria-describedby` (Field, token-merged),
+ * `data-pending`, `data-disabled`, `data-invalid`. Defaults the consumer's own prop replaces:
+ * `inputMode`, `autoComplete="off"`, `autoCorrect="off"`, `spellCheck={false}`.
+ */
+export declare function NumberFieldInput({ hiddenInputRef, className, style, render, ...rest }: NumberFieldInputProps): import("react").JSX.Element;
+export declare namespace NumberFieldInput {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=number-field-input.d.mts.map

package/dist/number-field/number-field-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-input.d.mts","names":[],"sources":["../../src/number-field/number-field-input.tsx"],"mappings":";;;;iBA4BiB,8BAA8B,KAC7C;;EAsBA,iBAAiB,IAAI;EACrB,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;wBAgCtC,mBACd,gBACA,WACA,OACA,WACG,QACF,wCAAqB,IAAA;yBANR"}

package/dist/number-field/number-field-input.mjs

@@ -0,0 +1,163 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { mergeRefs } from "../internal/merge-props.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useFieldControl, useMergedRef } from "../internal/use-field-control.mjs";
+import { useNumberFieldContext } from "./number-field-context.mjs";
+import { hiddenText } from "./number-field-root.mjs";
+import { isValidElement, useCallback, useEffectEvent, useLayoutEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/number-field/number-field-input.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/** Visually hidden, unfocusable, out of the accessibility tree: the form's control (6.1). */
+const HIDDEN_STYLE = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	padding: 0,
+	border: 0,
+	opacity: 0,
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	pointerEvents: "none"
+};
+const TEXT_TYPES = [
+	"text",
+	"search",
+	"tel"
+];
+/**
+* The visible text field (`input[type=text]`, the user's surface) **followed by** the visually
+* hidden native `input[type=number]` that carries `name`, `form`, `min`, `max`, `step`,
+* `required` and the canonical value (design/components/number-field.md 6). `ref` goes to the
+* visible input, `hiddenInputRef` to the hidden one.
+*
+* Owned keys on the visible input: `id`, `type`, `value`, `disabled`, `readOnly`, `onChange`,
+* `onKeyDown`, `onBlur`, `aria-invalid` and `aria-describedby` (Field, token-merged),
+* `data-pending`, `data-disabled`, `data-invalid`. Defaults the consumer's own prop replaces:
+* `inputMode`, `autoComplete="off"`, `autoCorrect="off"`, `spellCheck={false}`.
+*/
+function NumberFieldInput({ hiddenInputRef, className, style, render, ...rest }) {
+	const ctx = useNumberFieldContext("NumberField.Input");
+	const { state, visibleRef, hiddenRef, mirror, onInputMounted } = ctx;
+	const validityElement = useCallback(() => hiddenRef.current, [hiddenRef]);
+	const field = useFieldControl({
+		labelable: true,
+		name: ctx.name,
+		disabled: state.disabled,
+		required: state.required,
+		component: "NumberField.Input",
+		validityElement
+	});
+	const restName = rest.name;
+	useDevWarning(restName !== void 0, "NumberField.Input: `name` belongs on NumberField.Root (it goes to the hidden number input); on the visible input it would post the formatted text.");
+	const libraryRef = useCallback((element) => {
+		if (isDev) {
+			const type = element.tagName === "INPUT" ? element.type : "";
+			if (!TEXT_TYPES.includes(type)) console.error(`NumberField.Input: rendered <${element.tagName.toLowerCase()}${type === "" ? "" : ` type="${type}"`}>. Render an <input> of type "text", "search" or "tel": a number input would re-introduce the native parser.`);
+		}
+		visibleRef.current = element;
+		return () => {
+			if (visibleRef.current === element) visibleRef.current = null;
+		};
+	}, [visibleRef]);
+	const mergedRef = useMergedRef(libraryRef, field.ref);
+	const hiddenMergedRef = useMemo(() => mergeRefs(hiddenRef, hiddenInputRef), [hiddenRef, hiddenInputRef]);
+	useLayoutEffect(() => {
+		const hidden = hiddenRef.current;
+		if (hidden !== null) {
+			const text = hiddenText(state.value);
+			if (hidden.value !== text) hidden.value = text;
+		}
+		mirror();
+	});
+	useLayoutEffect(() => {
+		const hidden = hiddenRef.current;
+		if (hidden === null) return;
+		const onInvalid = (event) => event.preventDefault();
+		hidden.addEventListener("invalid", onInvalid);
+		return () => hidden.removeEventListener("invalid", onInvalid);
+	}, [hiddenRef]);
+	const onWheel = useEffectEvent((event) => {
+		ctx.wheel(event);
+	});
+	const { stepOnWheel } = ctx;
+	useLayoutEffect(() => {
+		const visible = visibleRef.current;
+		if (!stepOnWheel || visible === null) return;
+		visible.addEventListener("wheel", onWheel, { passive: false });
+		return () => visible.removeEventListener("wheel", onWheel);
+	}, [stepOnWheel, visibleRef]);
+	const mounted = useRef(false);
+	useLayoutEffect(() => {
+		if (mounted.current) return;
+		mounted.current = true;
+		onInputMounted();
+	}, [onInputMounted]);
+	const renderType = isValidElement(render) && typeof render.props.type === "string" ? render.props.type : void 0;
+	const type = renderType !== void 0 && TEXT_TYPES.includes(renderType) ? renderType : "text";
+	useDevWarning(renderType !== void 0 && !TEXT_TYPES.includes(renderType), `NumberField.Input: \`render\` has type="${renderType ?? ""}"; the visible input is rendered as type "text". A number input would re-introduce the native parser the NumberField exists to avoid.`);
+	const dataInvalid = ctx.fieldInvalid === void 0 ? {} : { "data-invalid": dataAttr(ctx.fieldInvalid) };
+	const libraryProps = {
+		...field.attributes,
+		id: ctx.inputId,
+		type,
+		value: state.text,
+		disabled: state.disabled,
+		readOnly: state.readOnly,
+		onChange: (event) => {
+			ctx.typed(event.currentTarget.value);
+		},
+		onKeyDown: (event) => {
+			ctx.keyDown(event.nativeEvent);
+		},
+		onBlur: (event) => {
+			ctx.commitDraft(event.nativeEvent);
+		},
+		"data-pending": dataAttr(state.pending),
+		"data-disabled": dataAttr(state.disabled),
+		...dataInvalid
+	};
+	const visible = useRender({
+		defaultElement: "input",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: {
+			inputMode: ctx.allowsFractions ? "decimal" : "numeric",
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: false,
+			...rest
+		},
+		libraryProps,
+		ref: mergedRef
+	});
+	const { min, max, step } = ctx.bounds;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [visible, /* @__PURE__ */ jsx("input", {
+		ref: hiddenMergedRef,
+		type: "number",
+		name: field.name,
+		form: ctx.form,
+		min,
+		max,
+		step,
+		required: field.required,
+		disabled: field.disabled,
+		readOnly: state.readOnly,
+		defaultValue: ctx.resetTargetText,
+		autoComplete: "off",
+		"aria-hidden": "true",
+		tabIndex: -1,
+		style: HIDDEN_STYLE
+	})] });
+}
+NumberFieldInput.displayName = "NumberFieldInput";
+//#endregion
+export { NumberFieldInput };
+
+//# sourceMappingURL=number-field-input.mjs.map