@feugene/granularity 0.48.0 → 0.49.0

package/dist/components/GrOtpInput/chunks/GrOtpInput-B_Q-RDLw.js

@@ -0,0 +1,419 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { a as grOtpInputCellClass, c as separatorClass, i as fieldClass, o as grOtpInputRootClass, r as caretClass, s as placeholderClass } from "../../../chunks/config-BBtBQE3s.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, watchEffect } from "vue";
+import '../styles.css';//#region src/components/GrOtpInput/otpValue.ts
+/**
+* Алфавиты по типу. `text` — любой непробельный символ: пробел в коде не несёт
+* смысла, а при вставке из мессенджера приходит вместе с ним.
+*/
+var OTP_TYPE_PATTERNS = {
+	numeric: "[0-9]",
+	alphanumeric: "[0-9A-Za-z]",
+	text: "\\S"
+};
+/** Раскладка клавиатуры на мобильном: цифровой блок только там, где он уместен. */
+var OTP_TYPE_INPUT_MODES = {
+	numeric: "numeric",
+	alphanumeric: "text",
+	text: "text"
+};
+/**
+* Матчер алфавита. Своя регулярка потребителя перекрывает тип; сломанная —
+* повод сказать об этом в dev и вернуться к типу, а не уронить рендер.
+*/
+function createOtpMatcher(type, pattern) {
+	const source = pattern ?? OTP_TYPE_PATTERNS[type];
+	let regexp;
+	try {
+		regexp = new RegExp(`^(?:${source})$`, "u");
+	} catch {
+		if (process.env.NODE_ENV !== "production") console.warn(`[granularity] GrOtpInput: \`pattern\` «${source}» не компилируется — алфавит взят из \`type="${type}"\`.`);
+		regexp = new RegExp(`^(?:${OTP_TYPE_PATTERNS[type]})$`, "u");
+	}
+	return (char) => regexp.test(char);
+}
+/**
+* Свести сырое содержимое поля к коду фиксированной длины.
+*
+* Одна функция на все источники ввода — символ с клавиатуры, вставка из буфера,
+* подстановка кода из SMS, — потому что различить их по событию нельзя:
+* мобильные клавиатуры и автозаполнение присылают целую строку одним `input`.
+*
+* Три шага, и каждый закрывает свой отказ:
+*
+* 1. **Отсев чужих символов с переносом каретки.** Индексы после отсева
+*    съезжают, и каретку надо считать в новых координатах, иначе вставка
+*    `123-456` поставит её на два символа правее конца.
+* 2. **Печать заменяет, а не сдвигает.** Ячейка держит ровно один символ, и
+*    напечатанное в неё занимает её место, а хвост кода остаётся где стоял.
+*    Правило безусловное, а не «когда поле заполнено»: иначе одно и то же
+*    нажатие в начале кода то заменяло бы символ, то двигало весь остаток —
+*    в зависимости от того, сколько ячеек занято.
+* 3. **Обрезка по длине.** Вставка длиннее поля режется со стороны каретки:
+*    выкусывать за ней уже нечего, а сдвигать набранное нельзя.
+*/
+function normalizeOtpInput(options) {
+	const { previous, raw, caret, length, matcher, uppercase } = options;
+	let kept = "";
+	let keptCaret = -1;
+	for (let index = 0; index < raw.length; index += 1) {
+		if (index === caret) keptCaret = kept.length;
+		const char = raw[index];
+		if (matcher(char)) kept += uppercase ? char.toUpperCase() : char;
+	}
+	if (keptCaret === -1) keptCaret = kept.length;
+	const inserted = kept.length - previous.length;
+	let value = inserted > 0 ? kept.slice(0, keptCaret) + kept.slice(keptCaret + inserted) : kept;
+	if (value.length <= length) return {
+		value,
+		caret: Math.min(keptCaret, value.length)
+	};
+	const excess = value.length - length;
+	const cut = Math.max(0, keptCaret - excess);
+	value = value.slice(0, cut) + value.slice(keptCaret);
+	return {
+		value: value.slice(0, length),
+		caret: Math.min(cut, length)
+	};
+}
+/** Отсев без каретки — для значения, пришедшего из `v-model`. */
+function sanitizeOtpValue(value, options) {
+	return normalizeOtpInput({
+		previous: "",
+		raw: value,
+		caret: value.length,
+		length: options.length,
+		matcher: options.matcher,
+		uppercase: options.uppercase
+	}).value;
+}
+/**
+* Индексы ячеек, **перед** которыми стоит разделитель.
+*
+* Разбивка, не сходящаяся с длиной, — ошибка потребителя, а не повод рисовать
+* половину: группы игнорируются целиком, о чём говорит предупреждение в вызове.
+*/
+function otpSeparatorIndexes(length, groups) {
+	const indexes = /* @__PURE__ */ new Set();
+	if (!groups?.length) return indexes;
+	if (groups.reduce((sum, size) => sum + size, 0) !== length || groups.some((size) => size <= 0)) return indexes;
+	let offset = 0;
+	for (const size of groups.slice(0, -1)) {
+		offset += size;
+		indexes.add(offset);
+	}
+	return indexes;
+}
+function isOtpGroupsValid(length, groups) {
+	if (!groups?.length) return true;
+	return groups.every((size) => size > 0) && groups.reduce((sum, size) => sum + size, 0) === length;
+}
+//#endregion
+//#region src/components/GrOtpInput/GrOtpInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"value",
+	"name",
+	"form",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"inputmode",
+	"autocomplete"
+];
+//#endregion
+//#region src/components/GrOtpInput/GrOtpInput.vue
+var GrOtpInput_default = /* @__PURE__ */ defineComponent({
+	__name: "GrOtpInput",
+	props: {
+		modelValue: { default: "" },
+		length: { default: void 0 },
+		type: { default: "numeric" },
+		pattern: { default: void 0 },
+		groups: { default: void 0 },
+		masked: {
+			type: Boolean,
+			default: void 0
+		},
+		placeholder: { default: "" },
+		size: { default: void 0 },
+		autofocus: {
+			type: Boolean,
+			default: false
+		},
+		oneTimeCode: {
+			type: Boolean,
+			default: true
+		},
+		webOtp: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		form: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur",
+		"complete"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly, id: fieldId, describedBy } = useGrFormControl(() => props);
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrOtpInput" });
+		const resolvedLength = useGrComponentProp("GrOtpInput", "length", () => props.length, 6);
+		const resolvedMasked = useGrComponentProp("GrOtpInput", "masked", () => props.masked, false);
+		const fieldEl = ref(null);
+		const caret = ref(0);
+		const focused = ref(false);
+		const matcher = computed(() => createOtpMatcher(props.type, props.pattern));
+		/** Коды печатают капсом, и раскладка «то ли a, то ли A» тут только мешает. */
+		const uppercase = computed(() => props.type === "alphanumeric" && props.pattern === void 0);
+		const value = computed(() => sanitizeOtpValue(props.modelValue, {
+			length: resolvedLength.value,
+			matcher: matcher.value,
+			uppercase: uppercase.value
+		}));
+		const characters = computed(() => {
+			const chars = value.value.split("");
+			return Array.from({ length: resolvedLength.value }, (_, index) => chars[index] ?? "");
+		});
+		const separators = computed(() => otpSeparatorIndexes(resolvedLength.value, props.groups));
+		const activeIndex = computed(() => {
+			if (!focused.value || isDisabled.value || isReadonly.value) return -1;
+			return Math.min(caret.value, resolvedLength.value - 1);
+		});
+		const rootClass = computed(() => grOtpInputRootClass(resolvedSize.value));
+		function cellClass(index) {
+			return grOtpInputCellClass({
+				size: resolvedSize.value,
+				active: index === activeIndex.value,
+				invalid: isInvalid.value,
+				disabled: isDisabled.value
+			});
+		}
+		/**
+		* Значение живёт в пропе, а поле — в DOM, и после каждой правки их надо свести:
+		* браузер уже применил свою вставку, а нормализация могла дать другую строку.
+		*/
+		function writeField(next, nextCaret) {
+			const el = fieldEl.value;
+			if (!el) return;
+			if (el.value !== next) el.value = next;
+			const position = Math.min(nextCaret, next.length);
+			el.setSelectionRange(position, position);
+			caret.value = position;
+		}
+		function commit(next, nextCaret) {
+			writeField(next, nextCaret);
+			if (next !== value.value) {
+				emit("update:modelValue", next);
+				emit("change", next);
+			}
+		}
+		function onInput(event) {
+			const el = event.target;
+			const normalized = normalizeOtpInput({
+				previous: value.value,
+				raw: el.value,
+				caret: el.selectionStart ?? el.value.length,
+				length: resolvedLength.value,
+				matcher: matcher.value,
+				uppercase: uppercase.value
+			});
+			commit(normalized.value, normalized.caret);
+		}
+		function syncCaret() {
+			const el = fieldEl.value;
+			if (el) caret.value = el.selectionStart ?? 0;
+		}
+		/**
+		* Клик ставит каретку в первую пустую ячейку, а не туда, куда пришёлся курсор.
+		*
+		* Ячейки — декорация: попадание мышью по невидимому тексту ничего осмысленного
+		* не значит, а «продолжить с того места, где остановился» — единственное, чего
+		* от кода ждут. Редактирование середины остаётся за стрелками.
+		*/
+		function onPointerUp() {
+			const el = fieldEl.value;
+			if (!el || isDisabled.value || isReadonly.value) return;
+			const position = value.value.length;
+			el.setSelectionRange(position, position);
+			caret.value = position;
+		}
+		function onFocus(event) {
+			focused.value = true;
+			syncCaret();
+			emit("focus", event);
+		}
+		function onBlur(event) {
+			focused.value = false;
+			emit("blur", event);
+		}
+		function focus() {
+			fieldEl.value?.focus();
+		}
+		function blur() {
+			fieldEl.value?.blur();
+		}
+		/** Штатный сценарий: сервер отверг код, поле чистится и снова ждёт ввода. */
+		function clear() {
+			commit("", 0);
+			focus();
+		}
+		__expose({
+			focus,
+			blur,
+			clear
+		});
+		watch(value, (next) => {
+			const el = fieldEl.value;
+			if (el && el.value !== next) writeField(next, next.length);
+		}, { flush: "post" });
+		/**
+		* Повторный `complete` на том же значении не шлётся: правка последней ячейки
+		* туда-обратно не должна вызывать второй запрос на проверку кода.
+		*/
+		const completed = ref(null);
+		watch(value, (next) => {
+			if (next.length < resolvedLength.value) {
+				completed.value = null;
+				return;
+			}
+			if (completed.value === next) return;
+			completed.value = next;
+			emit("complete", next);
+		}, { immediate: true });
+		let otpRequest;
+		function abortWebOtp() {
+			otpRequest?.abort();
+			otpRequest = void 0;
+		}
+		/**
+		* WebOTP — второй канал автоподстановки, закрывающий Android так же, как
+		* `one-time-code` закрывает iOS.
+		*
+		* Живёт в `onMounted`, а не в теле setup: `navigator` на сервере роняет рендер
+		* (`docs/ssr.md`). Отказ пользователя, отсутствие API и отмена — не ошибки:
+		* поле просто остаётся пустым и ждёт ручного ввода.
+		*/
+		function requestWebOtp() {
+			abortWebOtp();
+			if (typeof window === "undefined" || !("OTPCredential" in window)) return;
+			const controller = new AbortController();
+			otpRequest = controller;
+			navigator.credentials.get({
+				otp: { transport: ["sms"] },
+				signal: controller.signal
+			}).then((credential) => {
+				if (otpRequest !== controller || !credential?.code) return;
+				const normalized = sanitizeOtpValue(credential.code, {
+					length: resolvedLength.value,
+					matcher: matcher.value,
+					uppercase: uppercase.value
+				});
+				commit(normalized, normalized.length);
+			}).catch(() => {});
+		}
+		onMounted(() => {
+			if (props.autofocus) focus();
+			if (props.webOtp) requestWebOtp();
+		});
+		watch(value, (next) => {
+			if (next.length >= resolvedLength.value) abortWebOtp();
+		});
+		onBeforeUnmount(abortWebOtp);
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (!isOtpGroupsValid(resolvedLength.value, props.groups)) console.warn(`[granularity] GrOtpInput: сумма \`groups\` не равна \`length\` (${resolvedLength.value}) — разбивка игнорируется целиком. Половина разбивки хуже её отсутствия: разделитель встал бы не там, где группа кончается.`);
+			if (resolvedLength.value < 1) console.warn("[granularity] GrOtpInput: `length` меньше единицы — рисовать нечего.");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-testid": "gr-otp-input",
+				"data-gr-otp-input": "",
+				class: normalizeClass(rootClass.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(characters.value, (char, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [separators.value.has(index) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-otp-input-separator": "",
+					class: normalizeClass(unref(separatorClass)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "separator", { index }, () => [_cache[0] || (_cache[0] = createTextVNode("—", -1))])], 2)) : createCommentVNode("", true), createElementVNode("span", {
+					"data-testid": "gr-otp-input-cell",
+					"data-gr-otp-input-cell": "",
+					class: normalizeClass(cellClass(index)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "cell", {
+					char,
+					index,
+					active: index === activeIndex.value,
+					filled: char !== "",
+					masked: unref(resolvedMasked)
+				}, () => [char ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(resolvedMasked) ? "•" : char), 1)], 64)) : __props.placeholder ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(placeholderClass))
+				}, toDisplayString(__props.placeholder), 3)) : createCommentVNode("", true)]), index === activeIndex.value && !char ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-otp-input-caret": "",
+					class: normalizeClass(unref(caretClass))
+				}, null, 2)) : createCommentVNode("", true)], 2)], 64);
+			}), 128)), createElementVNode("input", {
+				id: unref(fieldId),
+				ref_key: "fieldEl",
+				ref: fieldEl,
+				"data-testid": "gr-otp-input-field",
+				"data-gr-otp-input-field": "",
+				type: "text",
+				class: normalizeClass(unref(fieldClass)),
+				value: value.value,
+				name: __props.name,
+				form: __props.form,
+				disabled: unref(isDisabled),
+				readonly: unref(isReadonly),
+				required: unref(isRequired),
+				"aria-label": __props.ariaLabel,
+				"aria-describedby": unref(describedBy),
+				"aria-invalid": unref(isInvalid) ? "true" : void 0,
+				"aria-required": unref(isRequired) ? "true" : void 0,
+				inputmode: unref(OTP_TYPE_INPUT_MODES)[__props.type],
+				autocomplete: __props.oneTimeCode ? "one-time-code" : "off",
+				autocapitalize: "none",
+				autocorrect: "off",
+				spellcheck: "false",
+				onInput,
+				onSelect: syncCaret,
+				onKeyup: syncCaret,
+				onPointerup: onPointerUp,
+				onFocus,
+				onBlur
+			}, null, 42, _hoisted_1)], 2);
+		};
+	}
+});
+//#endregion
+export { GrOtpInput_default as t };

package/dist/components/GrOtpInput/chunks/GrOtpInput-B_Q-RDLw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrOtpInput-B_Q-RDLw.js","names":[],"sources":["../../../../src/components/GrOtpInput/otpValue.ts","../../../../src/components/GrOtpInput/GrOtpInput.vue","../../../../src/components/GrOtpInput/GrOtpInput.vue"],"sourcesContent":["/**\n * Чистая логика значения OTP-поля: алфавит, нормализация ввода и разбивка на\n * группы. Без Vue и без DOM — здесь дёшево перебрать края, а края тут и есть\n * весь риск.\n */\n\nexport const GR_OTP_INPUT_TYPES = ['numeric', 'alphanumeric', 'text'] as const\nexport type GrOtpInputType = typeof GR_OTP_INPUT_TYPES[number]\n\n/**\n * Алфавиты по типу. `text` — любой непробельный символ: пробел в коде не несёт\n * смысла, а при вставке из мессенджера приходит вместе с ним.\n */\nexport const OTP_TYPE_PATTERNS: Record<GrOtpInputType, string> = {\n  numeric: '[0-9]',\n  alphanumeric: '[0-9A-Za-z]',\n  text: '\\\\S',\n}\n\n/** Раскладка клавиатуры на мобильном: цифровой блок только там, где он уместен. */\nexport const OTP_TYPE_INPUT_MODES: Record<GrOtpInputType, 'numeric' | 'text'> = {\n  numeric: 'numeric',\n  alphanumeric: 'text',\n  text: 'text',\n}\n\nexport type OtpMatcher = (char: string) => boolean\n\n/**\n * Матчер алфавита. Своя регулярка потребителя перекрывает тип; сломанная —\n * повод сказать об этом в dev и вернуться к типу, а не уронить рендер.\n */\nexport function createOtpMatcher(type: GrOtpInputType, pattern?: string): OtpMatcher {\n  const source = pattern ?? OTP_TYPE_PATTERNS[type]\n\n  let regexp: RegExp\n  try {\n    regexp = new RegExp(`^(?:${source})$`, 'u')\n  }\n  catch {\n    if (__GR_DEV__) {\n      console.warn(\n        `[granularity] GrOtpInput: \\`pattern\\` «${source}» не компилируется — `\n        + `алфавит взят из \\`type=\"${type}\"\\`.`,\n      )\n    }\n    regexp = new RegExp(`^(?:${OTP_TYPE_PATTERNS[type]})$`, 'u')\n  }\n\n  return char => regexp.test(char)\n}\n\nexport interface NormalizeOtpOptions {\n  /** Значение до правки: по нему считается, сколько символов вставлено. */\n  previous: string\n  /** Сырое содержимое поля после события `input`. */\n  raw: string\n  /** Каретка в координатах **сырой** строки. */\n  caret: number\n  length: number\n  matcher: OtpMatcher\n  /** Приводить ли к верхнему регистру: коды печатают капсом. */\n  uppercase: boolean\n}\n\nexport interface NormalizedOtp {\n  value: string\n  caret: number\n}\n\n/**\n * Свести сырое содержимое поля к коду фиксированной длины.\n *\n * Одна функция на все источники ввода — символ с клавиатуры, вставка из буфера,\n * подстановка кода из SMS, — потому что различить их по событию нельзя:\n * мобильные клавиатуры и автозаполнение присылают целую строку одним `input`.\n *\n * Три шага, и каждый закрывает свой отказ:\n *\n * 1. **Отсев чужих символов с переносом каретки.** Индексы после отсева\n *    съезжают, и каретку надо считать в новых координатах, иначе вставка\n *    `123-456` поставит её на два символа правее конца.\n * 2. **Печать заменяет, а не сдвигает.** Ячейка держит ровно один символ, и\n *    напечатанное в неё занимает её место, а хвост кода остаётся где стоял.\n *    Правило безусловное, а не «когда поле заполнено»: иначе одно и то же\n *    нажатие в начале кода то заменяло бы символ, то двигало весь остаток —\n *    в зависимости от того, сколько ячеек занято.\n * 3. **Обрезка по длине.** Вставка длиннее поля режется со стороны каретки:\n *    выкусывать за ней уже нечего, а сдвигать набранное нельзя.\n */\nexport function normalizeOtpInput(options: NormalizeOtpOptions): NormalizedOtp {\n  const { previous, raw, caret, length, matcher, uppercase } = options\n\n  let kept = ''\n  let keptCaret = -1\n\n  for (let index = 0; index < raw.length; index += 1) {\n    if (index === caret)\n      keptCaret = kept.length\n\n    const char = raw[index]\n    if (matcher(char))\n      kept += uppercase ? char.toUpperCase() : char\n  }\n\n  if (keptCaret === -1)\n    keptCaret = kept.length\n\n  const inserted = kept.length - previous.length\n  let value = inserted > 0\n    ? kept.slice(0, keptCaret) + kept.slice(keptCaret + inserted)\n    : kept\n\n  if (value.length <= length)\n    return { value, caret: Math.min(keptCaret, value.length) }\n\n  const excess = value.length - length\n  const cut = Math.max(0, keptCaret - excess)\n  value = value.slice(0, cut) + value.slice(keptCaret)\n\n  return { value: value.slice(0, length), caret: Math.min(cut, length) }\n}\n\n/** Отсев без каретки — для значения, пришедшего из `v-model`. */\nexport function sanitizeOtpValue(\n  value: string,\n  options: { length: number, matcher: OtpMatcher, uppercase: boolean },\n): string {\n  return normalizeOtpInput({\n    previous: '',\n    raw: value,\n    caret: value.length,\n    length: options.length,\n    matcher: options.matcher,\n    uppercase: options.uppercase,\n  }).value\n}\n\n/**\n * Индексы ячеек, **перед** которыми стоит разделитель.\n *\n * Разбивка, не сходящаяся с длиной, — ошибка потребителя, а не повод рисовать\n * половину: группы игнорируются целиком, о чём говорит предупреждение в вызове.\n */\nexport function otpSeparatorIndexes(length: number, groups?: number[]): Set<number> {\n  const indexes = new Set<number>()\n  if (!groups?.length)\n    return indexes\n\n  const total = groups.reduce((sum, size) => sum + size, 0)\n  if (total !== length || groups.some(size => size <= 0))\n    return indexes\n\n  let offset = 0\n  for (const size of groups.slice(0, -1)) {\n    offset += size\n    indexes.add(offset)\n  }\n\n  return indexes\n}\n\nexport function isOtpGroupsValid(length: number, groups?: number[]): boolean {\n  if (!groups?.length)\n    return true\n\n  return groups.every(size => size > 0) && groups.reduce((sum, size) => sum + size, 0) === length\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../../composables/useGrComponentConfig'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\n\nimport {\n  caretClass,\n  fieldClass,\n  grOtpInputCellClass,\n  grOtpInputRootClass,\n  placeholderClass,\n  separatorClass,\n  type GrOtpInputSize,\n} from './grOtpInputStyles'\nimport {\n  createOtpMatcher,\n  isOtpGroupsValid,\n  normalizeOtpInput,\n  OTP_TYPE_INPUT_MODES,\n  otpSeparatorIndexes,\n  sanitizeOtpValue,\n  type GrOtpInputType,\n} from './otpValue'\n\nexport type { GrOtpInputSize } from './grOtpInputStyles'\nexport type { GrOtpInputType } from './otpValue'\n\nexport interface GrOtpInputProps {\n  /** Код целиком, без разделителей. */\n  modelValue?: string\n  /** Число ячеек. */\n  length?: number\n  /** Допустимый алфавит и раскладка мобильной клавиатуры. */\n  type?: GrOtpInputType\n  /** Свой алфавит регуляркой на **один символ**. Перекрывает `type`. */\n  pattern?: string\n  /** Разбивка на группы: `[3, 3]` рисует `123 – 456`. Сумма обязана равняться `length`. */\n  groups?: number[]\n  /** Точки вместо символов — сценарий PIN. На `modelValue` не влияет. */\n  masked?: boolean\n  /** Знак в пустой ячейке. */\n  placeholder?: string\n  size?: GrOtpInputSize\n  autofocus?: boolean\n  /** `autocomplete=\"one-time-code\"`: код из SMS подставляется на iOS и macOS. */\n  oneTimeCode?: boolean\n  /**\n   * Приём кода из SMS на Android через WebOTP. Выключен: требует HTTPS и\n   * особого хвоста в тексте сообщения, который добавляет бэкенд.\n   */\n  webOtp?: boolean\n  /** Имя поля для нативной отправки формы. */\n  name?: string\n  /** `id` формы, если поле лежит вне неё. */\n  form?: string\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrOtpInputEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /** Код набран целиком. Точка автосабмита. */\n  (e: 'complete', value: string): void\n}\n\nconst props = withDefaults(\n  defineProps<GrOtpInputProps>(),\n  {\n    modelValue: '',\n    // `length`, `size` и `masked` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    length: undefined,\n    type: 'numeric',\n    pattern: undefined,\n    groups: undefined,\n    masked: undefined,\n    placeholder: '',\n    size: undefined,\n    autofocus: false,\n    oneTimeCode: true,\n    webOtp: false,\n    name: undefined,\n    form: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<GrOtpInputEmits>()\n\ndefineSlots<{\n  /** Своё оформление ячейки. Размер и рамку по-прежнему держит компонент. */\n  cell?: (props: {\n    char: string\n    index: number\n    active: boolean\n    filled: boolean\n    masked: boolean\n  }) => any\n  /** Знак между группами. По умолчанию — тире. */\n  separator?: (props: { index: number }) => any\n}>()\n\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  id: fieldId,\n  describedBy,\n} = useGrFormControl(() => props)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrOtpInput' })\nconst resolvedLength = useGrComponentProp('GrOtpInput', 'length', () => props.length, 6)\nconst resolvedMasked = useGrComponentProp('GrOtpInput', 'masked', () => props.masked, false)\n\nconst fieldEl = ref<HTMLInputElement | null>(null)\nconst caret = ref(0)\nconst focused = ref(false)\n\nconst matcher = computed(() => createOtpMatcher(props.type, props.pattern))\n\n/** Коды печатают капсом, и раскладка «то ли a, то ли A» тут только мешает. */\nconst uppercase = computed(() => props.type === 'alphanumeric' && props.pattern === undefined)\n\nconst value = computed(() => sanitizeOtpValue(props.modelValue, {\n  length: resolvedLength.value,\n  matcher: matcher.value,\n  uppercase: uppercase.value,\n}))\n\nconst characters = computed(() => {\n  const chars = value.value.split('')\n  return Array.from({ length: resolvedLength.value }, (_, index) => chars[index] ?? '')\n})\n\nconst separators = computed(() => otpSeparatorIndexes(resolvedLength.value, props.groups))\n\nconst activeIndex = computed(() => {\n  if (!focused.value || isDisabled.value || isReadonly.value)\n    return -1\n\n  return Math.min(caret.value, resolvedLength.value - 1)\n})\n\nconst rootClass = computed(() => grOtpInputRootClass(resolvedSize.value))\n\nfunction cellClass(index: number): string {\n  return grOtpInputCellClass({\n    size: resolvedSize.value,\n    active: index === activeIndex.value,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n}\n\n/**\n * Значение живёт в пропе, а поле — в DOM, и после каждой правки их надо свести:\n * браузер уже применил свою вставку, а нормализация могла дать другую строку.\n */\nfunction writeField(next: string, nextCaret: number): void {\n  const el = fieldEl.value\n  if (!el)\n    return\n\n  if (el.value !== next)\n    el.value = next\n\n  const position = Math.min(nextCaret, next.length)\n  el.setSelectionRange(position, position)\n  caret.value = position\n}\n\nfunction commit(next: string, nextCaret: number): void {\n  writeField(next, nextCaret)\n\n  if (next !== value.value) {\n    emit('update:modelValue', next)\n    emit('change', next)\n  }\n}\n\nfunction onInput(event: Event): void {\n  const el = event.target as HTMLInputElement\n  const normalized = normalizeOtpInput({\n    previous: value.value,\n    raw: el.value,\n    caret: el.selectionStart ?? el.value.length,\n    length: resolvedLength.value,\n    matcher: matcher.value,\n    uppercase: uppercase.value,\n  })\n\n  commit(normalized.value, normalized.caret)\n}\n\nfunction syncCaret(): void {\n  const el = fieldEl.value\n  if (el)\n    caret.value = el.selectionStart ?? 0\n}\n\n/**\n * Клик ставит каретку в первую пустую ячейку, а не туда, куда пришёлся курсор.\n *\n * Ячейки — декорация: попадание мышью по невидимому тексту ничего осмысленного\n * не значит, а «продолжить с того места, где остановился» — единственное, чего\n * от кода ждут. Редактирование середины остаётся за стрелками.\n */\nfunction onPointerUp(): void {\n  const el = fieldEl.value\n  if (!el || isDisabled.value || isReadonly.value)\n    return\n\n  const position = value.value.length\n  el.setSelectionRange(position, position)\n  caret.value = position\n}\n\nfunction onFocus(event: FocusEvent): void {\n  focused.value = true\n  syncCaret()\n  emit('focus', event)\n}\n\nfunction onBlur(event: FocusEvent): void {\n  focused.value = false\n  emit('blur', event)\n}\n\nfunction focus(): void {\n  fieldEl.value?.focus()\n}\n\nfunction blur(): void {\n  fieldEl.value?.blur()\n}\n\n/** Штатный сценарий: сервер отверг код, поле чистится и снова ждёт ввода. */\nfunction clear(): void {\n  commit('', 0)\n  focus()\n}\n\ndefineExpose({ focus, blur, clear })\n\n// Значение пришло снаружи — поле обязано его показать. Санитайз уже прошёл в\n// `value`, поэтому сюда доезжает то же, что видят ячейки.\nwatch(value, (next) => {\n  const el = fieldEl.value\n  if (el && el.value !== next)\n    writeField(next, next.length)\n}, { flush: 'post' })\n\n/**\n * Повторный `complete` на том же значении не шлётся: правка последней ячейки\n * туда-обратно не должна вызывать второй запрос на проверку кода.\n */\nconst completed = ref<string | null>(null)\n\nwatch(value, (next) => {\n  if (next.length < resolvedLength.value) {\n    completed.value = null\n    return\n  }\n\n  if (completed.value === next)\n    return\n\n  completed.value = next\n  emit('complete', next)\n}, { immediate: true })\n\nlet otpRequest: AbortController | undefined\n\nfunction abortWebOtp(): void {\n  otpRequest?.abort()\n  otpRequest = undefined\n}\n\n/**\n * WebOTP — второй канал автоподстановки, закрывающий Android так же, как\n * `one-time-code` закрывает iOS.\n *\n * Живёт в `onMounted`, а не в теле setup: `navigator` на сервере роняет рендер\n * (`docs/ssr.md`). Отказ пользователя, отсутствие API и отмена — не ошибки:\n * поле просто остаётся пустым и ждёт ручного ввода.\n */\nfunction requestWebOtp(): void {\n  abortWebOtp()\n\n  if (typeof window === 'undefined' || !('OTPCredential' in window))\n    return\n\n  const controller = new AbortController()\n  otpRequest = controller\n\n  // WebOTP нет в `lib.dom`, поэтому форма запроса описана здесь: тип узкий и\n  // ровно тот, что читается ниже.\n  const credentials = navigator.credentials as unknown as {\n    get: (options: unknown) => Promise<{ code?: string } | null>\n  }\n\n  credentials\n    .get({ otp: { transport: ['sms'] }, signal: controller.signal })\n    .then((credential: { code?: string } | null) => {\n      if (otpRequest !== controller || !credential?.code)\n        return\n\n      const normalized = sanitizeOtpValue(credential.code, {\n        length: resolvedLength.value,\n        matcher: matcher.value,\n        uppercase: uppercase.value,\n      })\n\n      commit(normalized, normalized.length)\n    })\n    .catch(() => {})\n}\n\nonMounted(() => {\n  if (props.autofocus)\n    focus()\n\n  if (props.webOtp)\n    requestWebOtp()\n})\n\n// Код набран — ждать сообщение больше незачем, а незакрытый запрос переживает\n// уход со страницы.\nwatch(value, (next) => {\n  if (next.length >= resolvedLength.value)\n    abortWebOtp()\n})\n\nonBeforeUnmount(abortWebOtp)\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (!isOtpGroupsValid(resolvedLength.value, props.groups)) {\n      console.warn(\n        `[granularity] GrOtpInput: сумма \\`groups\\` не равна \\`length\\` (${resolvedLength.value}) `\n        + '— разбивка игнорируется целиком. Половина разбивки хуже её отсутствия: '\n        + 'разделитель встал бы не там, где группа кончается.',\n      )\n    }\n\n    if (resolvedLength.value < 1) {\n      console.warn('[granularity] GrOtpInput: `length` меньше единицы — рисовать нечего.')\n    }\n  })\n}\n</script>\n\n<template>\n  <div\n      data-testid=\"gr-otp-input\"\n      data-gr-otp-input\n      :class=\"rootClass\"\n  >\n    <template v-for=\"(char, index) in characters\" :key=\"index\">\n      <span\n          v-if=\"separators.has(index)\"\n          data-gr-otp-input-separator\n          :class=\"separatorClass\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"separator\" :index=\"index\">—</slot>\n      </span>\n\n      <span\n          data-testid=\"gr-otp-input-cell\"\n          data-gr-otp-input-cell\n          :class=\"cellClass(index)\"\n          aria-hidden=\"true\"\n      >\n        <slot\n            name=\"cell\"\n            :char=\"char\"\n            :index=\"index\"\n            :active=\"index === activeIndex\"\n            :filled=\"char !== ''\"\n            :masked=\"resolvedMasked\"\n        >\n          <template v-if=\"char\">{{ resolvedMasked ? '•' : char }}</template>\n          <span v-else-if=\"placeholder\" :class=\"placeholderClass\">{{ placeholder }}</span>\n        </slot>\n\n        <span\n            v-if=\"index === activeIndex && !char\"\n            data-gr-otp-input-caret\n            :class=\"caretClass\"\n        />\n      </span>\n    </template>\n\n    <input\n        :id=\"fieldId\"\n        ref=\"fieldEl\"\n        data-testid=\"gr-otp-input-field\"\n        data-gr-otp-input-field\n        type=\"text\"\n        :class=\"fieldClass\"\n        :value=\"value\"\n        :name=\"name\"\n        :form=\"form\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadonly\"\n        :required=\"isRequired\"\n        :aria-label=\"ariaLabel\"\n        :aria-describedby=\"describedBy\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :inputmode=\"OTP_TYPE_INPUT_MODES[type]\"\n        :autocomplete=\"oneTimeCode ? 'one-time-code' : 'off'\"\n        autocapitalize=\"none\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        @input=\"onInput\"\n        @select=\"syncCaret\"\n        @keyup=\"syncCaret\"\n        @pointerup=\"onPointerUp\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n    >\n  </div>\n</template>\n\n<style>\n/*\n * Каретка своя, потому что настоящая скрыта вместе с текстом поля. Мигание —\n * CSS-анимация, а значит подчиняется глобальному клампу движения пакета\n * (`docs/motion.md`) и не требует своего reduce-блока.\n */\n@keyframes gr-otp-input-caret {\n  0%,\n  45% {\n    opacity: 1;\n  }\n\n  55%,\n  100% {\n    opacity: 0;\n  }\n}\n\n[data-gr-otp-input-caret] {\n  animation: gr-otp-input-caret 1.1s steps(1, end) infinite;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../../composables/useGrComponentConfig'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\n\nimport {\n  caretClass,\n  fieldClass,\n  grOtpInputCellClass,\n  grOtpInputRootClass,\n  placeholderClass,\n  separatorClass,\n  type GrOtpInputSize,\n} from './grOtpInputStyles'\nimport {\n  createOtpMatcher,\n  isOtpGroupsValid,\n  normalizeOtpInput,\n  OTP_TYPE_INPUT_MODES,\n  otpSeparatorIndexes,\n  sanitizeOtpValue,\n  type GrOtpInputType,\n} from './otpValue'\n\nexport type { GrOtpInputSize } from './grOtpInputStyles'\nexport type { GrOtpInputType } from './otpValue'\n\nexport interface GrOtpInputProps {\n  /** Код целиком, без разделителей. */\n  modelValue?: string\n  /** Число ячеек. */\n  length?: number\n  /** Допустимый алфавит и раскладка мобильной клавиатуры. */\n  type?: GrOtpInputType\n  /** Свой алфавит регуляркой на **один символ**. Перекрывает `type`. */\n  pattern?: string\n  /** Разбивка на группы: `[3, 3]` рисует `123 – 456`. Сумма обязана равняться `length`. */\n  groups?: number[]\n  /** Точки вместо символов — сценарий PIN. На `modelValue` не влияет. */\n  masked?: boolean\n  /** Знак в пустой ячейке. */\n  placeholder?: string\n  size?: GrOtpInputSize\n  autofocus?: boolean\n  /** `autocomplete=\"one-time-code\"`: код из SMS подставляется на iOS и macOS. */\n  oneTimeCode?: boolean\n  /**\n   * Приём кода из SMS на Android через WebOTP. Выключен: требует HTTPS и\n   * особого хвоста в тексте сообщения, который добавляет бэкенд.\n   */\n  webOtp?: boolean\n  /** Имя поля для нативной отправки формы. */\n  name?: string\n  /** `id` формы, если поле лежит вне неё. */\n  form?: string\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrOtpInputEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /** Код набран целиком. Точка автосабмита. */\n  (e: 'complete', value: string): void\n}\n\nconst props = withDefaults(\n  defineProps<GrOtpInputProps>(),\n  {\n    modelValue: '',\n    // `length`, `size` и `masked` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    length: undefined,\n    type: 'numeric',\n    pattern: undefined,\n    groups: undefined,\n    masked: undefined,\n    placeholder: '',\n    size: undefined,\n    autofocus: false,\n    oneTimeCode: true,\n    webOtp: false,\n    name: undefined,\n    form: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<GrOtpInputEmits>()\n\ndefineSlots<{\n  /** Своё оформление ячейки. Размер и рамку по-прежнему держит компонент. */\n  cell?: (props: {\n    char: string\n    index: number\n    active: boolean\n    filled: boolean\n    masked: boolean\n  }) => any\n  /** Знак между группами. По умолчанию — тире. */\n  separator?: (props: { index: number }) => any\n}>()\n\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  id: fieldId,\n  describedBy,\n} = useGrFormControl(() => props)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrOtpInput' })\nconst resolvedLength = useGrComponentProp('GrOtpInput', 'length', () => props.length, 6)\nconst resolvedMasked = useGrComponentProp('GrOtpInput', 'masked', () => props.masked, false)\n\nconst fieldEl = ref<HTMLInputElement | null>(null)\nconst caret = ref(0)\nconst focused = ref(false)\n\nconst matcher = computed(() => createOtpMatcher(props.type, props.pattern))\n\n/** Коды печатают капсом, и раскладка «то ли a, то ли A» тут только мешает. */\nconst uppercase = computed(() => props.type === 'alphanumeric' && props.pattern === undefined)\n\nconst value = computed(() => sanitizeOtpValue(props.modelValue, {\n  length: resolvedLength.value,\n  matcher: matcher.value,\n  uppercase: uppercase.value,\n}))\n\nconst characters = computed(() => {\n  const chars = value.value.split('')\n  return Array.from({ length: resolvedLength.value }, (_, index) => chars[index] ?? '')\n})\n\nconst separators = computed(() => otpSeparatorIndexes(resolvedLength.value, props.groups))\n\nconst activeIndex = computed(() => {\n  if (!focused.value || isDisabled.value || isReadonly.value)\n    return -1\n\n  return Math.min(caret.value, resolvedLength.value - 1)\n})\n\nconst rootClass = computed(() => grOtpInputRootClass(resolvedSize.value))\n\nfunction cellClass(index: number): string {\n  return grOtpInputCellClass({\n    size: resolvedSize.value,\n    active: index === activeIndex.value,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n}\n\n/**\n * Значение живёт в пропе, а поле — в DOM, и после каждой правки их надо свести:\n * браузер уже применил свою вставку, а нормализация могла дать другую строку.\n */\nfunction writeField(next: string, nextCaret: number): void {\n  const el = fieldEl.value\n  if (!el)\n    return\n\n  if (el.value !== next)\n    el.value = next\n\n  const position = Math.min(nextCaret, next.length)\n  el.setSelectionRange(position, position)\n  caret.value = position\n}\n\nfunction commit(next: string, nextCaret: number): void {\n  writeField(next, nextCaret)\n\n  if (next !== value.value) {\n    emit('update:modelValue', next)\n    emit('change', next)\n  }\n}\n\nfunction onInput(event: Event): void {\n  const el = event.target as HTMLInputElement\n  const normalized = normalizeOtpInput({\n    previous: value.value,\n    raw: el.value,\n    caret: el.selectionStart ?? el.value.length,\n    length: resolvedLength.value,\n    matcher: matcher.value,\n    uppercase: uppercase.value,\n  })\n\n  commit(normalized.value, normalized.caret)\n}\n\nfunction syncCaret(): void {\n  const el = fieldEl.value\n  if (el)\n    caret.value = el.selectionStart ?? 0\n}\n\n/**\n * Клик ставит каретку в первую пустую ячейку, а не туда, куда пришёлся курсор.\n *\n * Ячейки — декорация: попадание мышью по невидимому тексту ничего осмысленного\n * не значит, а «продолжить с того места, где остановился» — единственное, чего\n * от кода ждут. Редактирование середины остаётся за стрелками.\n */\nfunction onPointerUp(): void {\n  const el = fieldEl.value\n  if (!el || isDisabled.value || isReadonly.value)\n    return\n\n  const position = value.value.length\n  el.setSelectionRange(position, position)\n  caret.value = position\n}\n\nfunction onFocus(event: FocusEvent): void {\n  focused.value = true\n  syncCaret()\n  emit('focus', event)\n}\n\nfunction onBlur(event: FocusEvent): void {\n  focused.value = false\n  emit('blur', event)\n}\n\nfunction focus(): void {\n  fieldEl.value?.focus()\n}\n\nfunction blur(): void {\n  fieldEl.value?.blur()\n}\n\n/** Штатный сценарий: сервер отверг код, поле чистится и снова ждёт ввода. */\nfunction clear(): void {\n  commit('', 0)\n  focus()\n}\n\ndefineExpose({ focus, blur, clear })\n\n// Значение пришло снаружи — поле обязано его показать. Санитайз уже прошёл в\n// `value`, поэтому сюда доезжает то же, что видят ячейки.\nwatch(value, (next) => {\n  const el = fieldEl.value\n  if (el && el.value !== next)\n    writeField(next, next.length)\n}, { flush: 'post' })\n\n/**\n * Повторный `complete` на том же значении не шлётся: правка последней ячейки\n * туда-обратно не должна вызывать второй запрос на проверку кода.\n */\nconst completed = ref<string | null>(null)\n\nwatch(value, (next) => {\n  if (next.length < resolvedLength.value) {\n    completed.value = null\n    return\n  }\n\n  if (completed.value === next)\n    return\n\n  completed.value = next\n  emit('complete', next)\n}, { immediate: true })\n\nlet otpRequest: AbortController | undefined\n\nfunction abortWebOtp(): void {\n  otpRequest?.abort()\n  otpRequest = undefined\n}\n\n/**\n * WebOTP — второй канал автоподстановки, закрывающий Android так же, как\n * `one-time-code` закрывает iOS.\n *\n * Живёт в `onMounted`, а не в теле setup: `navigator` на сервере роняет рендер\n * (`docs/ssr.md`). Отказ пользователя, отсутствие API и отмена — не ошибки:\n * поле просто остаётся пустым и ждёт ручного ввода.\n */\nfunction requestWebOtp(): void {\n  abortWebOtp()\n\n  if (typeof window === 'undefined' || !('OTPCredential' in window))\n    return\n\n  const controller = new AbortController()\n  otpRequest = controller\n\n  // WebOTP нет в `lib.dom`, поэтому форма запроса описана здесь: тип узкий и\n  // ровно тот, что читается ниже.\n  const credentials = navigator.credentials as unknown as {\n    get: (options: unknown) => Promise<{ code?: string } | null>\n  }\n\n  credentials\n    .get({ otp: { transport: ['sms'] }, signal: controller.signal })\n    .then((credential: { code?: string } | null) => {\n      if (otpRequest !== controller || !credential?.code)\n        return\n\n      const normalized = sanitizeOtpValue(credential.code, {\n        length: resolvedLength.value,\n        matcher: matcher.value,\n        uppercase: uppercase.value,\n      })\n\n      commit(normalized, normalized.length)\n    })\n    .catch(() => {})\n}\n\nonMounted(() => {\n  if (props.autofocus)\n    focus()\n\n  if (props.webOtp)\n    requestWebOtp()\n})\n\n// Код набран — ждать сообщение больше незачем, а незакрытый запрос переживает\n// уход со страницы.\nwatch(value, (next) => {\n  if (next.length >= resolvedLength.value)\n    abortWebOtp()\n})\n\nonBeforeUnmount(abortWebOtp)\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (!isOtpGroupsValid(resolvedLength.value, props.groups)) {\n      console.warn(\n        `[granularity] GrOtpInput: сумма \\`groups\\` не равна \\`length\\` (${resolvedLength.value}) `\n        + '— разбивка игнорируется целиком. Половина разбивки хуже её отсутствия: '\n        + 'разделитель встал бы не там, где группа кончается.',\n      )\n    }\n\n    if (resolvedLength.value < 1) {\n      console.warn('[granularity] GrOtpInput: `length` меньше единицы — рисовать нечего.')\n    }\n  })\n}\n</script>\n\n<template>\n  <div\n      data-testid=\"gr-otp-input\"\n      data-gr-otp-input\n      :class=\"rootClass\"\n  >\n    <template v-for=\"(char, index) in characters\" :key=\"index\">\n      <span\n          v-if=\"separators.has(index)\"\n          data-gr-otp-input-separator\n          :class=\"separatorClass\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"separator\" :index=\"index\">—</slot>\n      </span>\n\n      <span\n          data-testid=\"gr-otp-input-cell\"\n          data-gr-otp-input-cell\n          :class=\"cellClass(index)\"\n          aria-hidden=\"true\"\n      >\n        <slot\n            name=\"cell\"\n            :char=\"char\"\n            :index=\"index\"\n            :active=\"index === activeIndex\"\n            :filled=\"char !== ''\"\n            :masked=\"resolvedMasked\"\n        >\n          <template v-if=\"char\">{{ resolvedMasked ? '•' : char }}</template>\n          <span v-else-if=\"placeholder\" :class=\"placeholderClass\">{{ placeholder }}</span>\n        </slot>\n\n        <span\n            v-if=\"index === activeIndex && !char\"\n            data-gr-otp-input-caret\n            :class=\"caretClass\"\n        />\n      </span>\n    </template>\n\n    <input\n        :id=\"fieldId\"\n        ref=\"fieldEl\"\n        data-testid=\"gr-otp-input-field\"\n        data-gr-otp-input-field\n        type=\"text\"\n        :class=\"fieldClass\"\n        :value=\"value\"\n        :name=\"name\"\n        :form=\"form\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadonly\"\n        :required=\"isRequired\"\n        :aria-label=\"ariaLabel\"\n        :aria-describedby=\"describedBy\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :inputmode=\"OTP_TYPE_INPUT_MODES[type]\"\n        :autocomplete=\"oneTimeCode ? 'one-time-code' : 'off'\"\n        autocapitalize=\"none\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        @input=\"onInput\"\n        @select=\"syncCaret\"\n        @keyup=\"syncCaret\"\n        @pointerup=\"onPointerUp\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n    >\n  </div>\n</template>\n\n<style>\n/*\n * Каретка своя, потому что настоящая скрыта вместе с текстом поля. Мигание —\n * CSS-анимация, а значит подчиняется глобальному клампу движения пакета\n * (`docs/motion.md`) и не требует своего reduce-блока.\n */\n@keyframes gr-otp-input-caret {\n  0%,\n  45% {\n    opacity: 1;\n  }\n\n  55%,\n  100% {\n    opacity: 0;\n  }\n}\n\n[data-gr-otp-input-caret] {\n  animation: gr-otp-input-caret 1.1s steps(1, end) infinite;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrOtpInput/index.js

@@ -0,0 +1,3 @@
+import { n as grOtpInputSafelist, t as grOtpInputConfig } from "../../chunks/config-BBtBQE3s.js";
+import { t as GrOtpInput_default } from "./chunks/GrOtpInput-B_Q-RDLw.js";
+export { GrOtpInput_default as GrOtpInput, GrOtpInput_default as default, grOtpInputConfig, grOtpInputSafelist };

package/dist/components/GrOtpInput/styles.css

@@ -0,0 +1 @@
+@keyframes gr-otp-input-caret{0%,45%{opacity:1}55%,to{opacity:0}}[data-gr-otp-input-caret]{animation:1.1s step-end infinite gr-otp-input-caret}

package/dist/components/GrPagination/chunks/{GrPagination-BbaF5eXk.js → GrPagination-CMrLPzvL.js}

@@ -1,7 +1,7 @@
 import { a as useGrComponentSize } from "../../../chunks/context-CPMRfwVr.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
-import { t as GrSelect_default } from "../../GrSelect/chunks/GrSelect-0iI4wdR_.js";
+import { t as GrSelect_default } from "../../GrSelect/chunks/GrSelect-DvSq-nV-.js";
 import { a as labelSizes, c as pageListGaps, i as jumperSizes, l as pageSizeSelectWidths, o as navButtonSizes, r as ellipsisSizes, s as pageBoxSizes, u as rowGaps } from "../../../chunks/config-Bdf1bt-m.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys } from "vue";
 //#region src/components/GrPagination/GrPagination.vue?vue&type=script&setup=true&lang.ts