@central-design-system/components 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/es/src/components/CdsOtpInput/composables/useOtpInput.js

@@ -0,0 +1,329 @@
+import { shallowRef, toRef, toValue, computed } from "vue";
+const OtpInputPatterns = {
+  numeric: /[0-9]/,
+  alpha: /[a-zA-Z]/,
+  alphanumeric: /[a-zA-Z0-9]/,
+  "unicode-alpha": new RegExp("\\p{L}", "u"),
+  "unicode-alphanumeric": /[\p{L}\p{N}]/u
+};
+const IME_SCRIPT_RE = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\p{Script=Bopomofo}]/u;
+const graphemeSegmenter = /* @__PURE__ */ new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function useOtpInput(options) {
+  const {
+    value,
+    length: _length = 6,
+    pattern,
+    type = "number",
+    masked = false,
+    placeholder,
+    isFocused = shallowRef(false)
+  } = options;
+  const selection = shallowRef(null);
+  const composition = shallowRef("");
+  const isComposing = shallowRef(false);
+  let prevSelection = null;
+  let anchorG = null;
+  let focusG = null;
+  const length = toRef(() => Number(toValue(_length)));
+  const isMasked = toRef(() => toValue(masked) || toValue(type) === "password");
+  const effectivePattern = toRef(() => {
+    const p = toValue(pattern);
+    if (p instanceof RegExp) return p;
+    if (p != null) return OtpInputPatterns[p] ?? null;
+    if (toValue(type) === "number") return OtpInputPatterns.numeric;
+    return null;
+  });
+  const inputMode = toRef(
+    () => effectivePattern.value === OtpInputPatterns.numeric ? "numeric" : "text"
+  );
+  function graphemes(s) {
+    return Array.from(graphemeSegmenter.segment(s), (seg) => seg.segment);
+  }
+  function codeUnitsToGraphemeIndex(s, pos) {
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (seg.index >= pos) break;
+      count++;
+    }
+    return count;
+  }
+  function graphemeIndexToCodeUnits(s, gIndex) {
+    if (gIndex <= 0) return 0;
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (count === gIndex) return seg.index;
+      count++;
+    }
+    return s.length;
+  }
+  const slots = computed(() => {
+    const chars = graphemes(value.value);
+    const compositionChars = graphemes(composition.value);
+    const placeholderChar = toValue(placeholder) ?? null;
+    const currentSelection = selection.value;
+    const startG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.start) : null;
+    const endG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.end) : null;
+    const compositionStart = startG ?? chars.length;
+    return Array.from({ length: length.value }, (_, i) => {
+      const char = chars[i] ?? null;
+      const displayChar = char !== null && isMasked.value ? "•" : char;
+      let compositionChar = null;
+      if (composition.value && i >= compositionStart) {
+        const offset = i - compositionStart;
+        const c = compositionChars[offset];
+        if (c != null) compositionChar = isMasked.value ? "•" : c;
+      }
+      const isActive = !!(isFocused.value && startG !== null && endG !== null && (startG === endG && i === startG || i >= startG && i < endG));
+      return {
+        char: displayChar,
+        compositionChar,
+        placeholderChar,
+        isActive,
+        hasFakeCaret: isActive && char === null && compositionChar === null
+      };
+    });
+  });
+  function filter(text) {
+    const re = effectivePattern.value;
+    if (!re) return text;
+    return graphemes(text).filter((c) => re.test(c)).join("");
+  }
+  function clampGraphemes(text, max) {
+    const chars = graphemes(text);
+    if (chars.length <= max) return text;
+    return chars.slice(0, max).join("");
+  }
+  function isImeText(text) {
+    return IME_SCRIPT_RE.test(text);
+  }
+  function setValue(text) {
+    const next = clampGraphemes(filter(text), length.value);
+    value.value = next;
+    return next;
+  }
+  function insert(text, range) {
+    const current = value.value;
+    const start = (range == null ? void 0 : range.start) ?? current.length;
+    const end = (range == null ? void 0 : range.end) ?? current.length;
+    const filtered = filter(text);
+    const next = clampGraphemes(current.slice(0, start) + filtered + current.slice(end), length.value);
+    value.value = next;
+    const insertEnd = Math.min(start + filtered.length, next.length);
+    const insertEndG = codeUnitsToGraphemeIndex(next, insertEnd);
+    const cursorG = Math.min(insertEndG, length.value - 1);
+    const cursor = graphemeIndexToCodeUnits(next, cursorG);
+    setSelection(cursor, insertEnd, "forward");
+    return next;
+  }
+  function deleteRange(start, end) {
+    const current = value.value;
+    const next = current.slice(0, start) + current.slice(end);
+    value.value = next;
+    const newEnd = Math.min(start + 1, next.length);
+    setSelection(start, newEnd, "forward");
+    return next;
+  }
+  function bulkDelete(isBackward) {
+    const current = value.value;
+    const currentSelection = selection.value;
+    const next = isBackward ? current.slice((currentSelection == null ? void 0 : currentSelection.end) ?? current.length) : current.slice(0, (currentSelection == null ? void 0 : currentSelection.start) ?? 0);
+    value.value = next;
+    if (next.length === 0) setSelection(0, 0, "none");
+    else if (isBackward) setSelection(0, 1, "forward");
+    else setSelection(next.length, next.length, "none");
+    return next;
+  }
+  function setSelection(start, end, direction = "none") {
+    if (start === null || end === null) {
+      selection.value = null;
+      anchorG = null;
+      focusG = null;
+      return;
+    }
+    const next = { start, end, direction };
+    selection.value = next;
+    prevSelection = next;
+    const startG = codeUnitsToGraphemeIndex(value.value, start);
+    anchorG = startG;
+    focusG = startG;
+  }
+  function clearSelection() {
+    selection.value = null;
+    anchorG = null;
+    focusG = null;
+  }
+  function selectAtEnd() {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    let start;
+    let end;
+    if (graphemeCount >= length.value) {
+      start = graphemeIndexToCodeUnits(current, length.value - 1);
+      end = current.length;
+    } else {
+      start = current.length;
+      end = current.length;
+    }
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = graphemeCount >= length.value ? length.value - 1 : graphemeCount;
+    focusG = anchorG;
+    return next;
+  }
+  function selectSlot(index) {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    const clamped = Math.min(index, graphemeCount);
+    const start = graphemeIndexToCodeUnits(current, clamped);
+    const end = clamped < graphemeCount ? graphemeIndexToCodeUnits(current, clamped + 1) : current.length;
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = clamped;
+    focusG = clamped;
+    return next;
+  }
+  function extendSelection(direction) {
+    const current = value.value;
+    const valueG = graphemes(current).length;
+    if (valueG === 0) return null;
+    const maxFocus = Math.min(length.value - 1, valueG);
+    if (anchorG === null || focusG === null) {
+      const currentSelection = selection.value;
+      if (!currentSelection) return null;
+      const selectionStartG = codeUnitsToGraphemeIndex(current, currentSelection.start);
+      const selectionEndG = codeUnitsToGraphemeIndex(current, currentSelection.end);
+      if (selectionEndG - selectionStartG <= 1) {
+        anchorG = selectionStartG;
+        focusG = selectionStartG;
+      } else if (currentSelection.direction === "backward") {
+        anchorG = selectionEndG - 1;
+        focusG = selectionStartG;
+      } else {
+        anchorG = selectionStartG;
+        focusG = selectionEndG - 1;
+      }
+    }
+    const newFocus = Math.max(0, Math.min(maxFocus, focusG + direction));
+    focusG = newFocus;
+    const minG = Math.min(anchorG, newFocus);
+    const maxG = Math.max(anchorG, newFocus);
+    const start = graphemeIndexToCodeUnits(current, minG);
+    const end = maxG + 1 >= valueG ? current.length : graphemeIndexToCodeUnits(current, maxG + 1);
+    const newDirection = newFocus < anchorG ? "backward" : "forward";
+    const next = { start, end, direction: newDirection };
+    selection.value = next;
+    prevSelection = next;
+    return next;
+  }
+  function syncSelection(raw) {
+    if (isComposing.value) return selection.value;
+    const { value: inputValue, selectionStart, selectionEnd, selectionDirection, maxLength } = raw;
+    if (selectionStart === null || selectionEnd === null) {
+      selection.value = null;
+      prevSelection = null;
+      return null;
+    }
+    const valueG = graphemes(inputValue).length;
+    const startG = codeUnitsToGraphemeIndex(inputValue, selectionStart);
+    const endG = codeUnitsToGraphemeIndex(inputValue, selectionEnd);
+    let outStartG = -1;
+    let outEndG = -1;
+    let direction;
+    if (valueG !== 0) {
+      const isSingleCaret = startG === endG;
+      const isInsertMode = startG === valueG && valueG < maxLength;
+      if (isSingleCaret && !isInsertMode) {
+        if (startG === 0) {
+          outStartG = 0;
+          outEndG = 1;
+          direction = "forward";
+        } else if (startG === maxLength) {
+          outStartG = startG - 1;
+          outEndG = startG;
+          direction = "backward";
+        } else if (maxLength > 1 && valueG > 1) {
+          let offset = 0;
+          if (prevSelection !== null) {
+            const prevStartG = codeUnitsToGraphemeIndex(inputValue, prevSelection.start);
+            const prevEndG = codeUnitsToGraphemeIndex(inputValue, prevSelection.end);
+            direction = startG < prevEndG ? "backward" : "forward";
+            const wasPreviouslyInserting = prevStartG === prevEndG && prevStartG < maxLength;
+            const wasMultiSlot = prevEndG - prevStartG > 1;
+            if (direction === "backward" && !wasPreviouslyInserting && !wasMultiSlot) {
+              offset = -1;
+            }
+          }
+          outStartG = offset + startG;
+          outEndG = offset + startG + 1;
+        }
+      }
+    }
+    const finalStartG = outStartG !== -1 ? outStartG : startG;
+    const finalEndG = outEndG !== -1 ? outEndG : endG;
+    const finalStart = graphemeIndexToCodeUnits(inputValue, finalStartG);
+    const finalEnd = graphemeIndexToCodeUnits(inputValue, finalEndG);
+    const finalDirection = direction ?? selectionDirection ?? "none";
+    const next = { start: finalStart, end: finalEnd, direction: finalDirection };
+    selection.value = next;
+    prevSelection = next;
+    if (finalEndG - finalStartG <= 1) {
+      anchorG = finalStartG;
+      focusG = finalStartG;
+    }
+    return next;
+  }
+  function startComposition() {
+    isComposing.value = true;
+    composition.value = "";
+  }
+  function updateComposition(data) {
+    composition.value = IME_SCRIPT_RE.test(data) ? data : "";
+  }
+  function endComposition() {
+    isComposing.value = false;
+    composition.value = "";
+  }
+  function reset() {
+    value.value = "";
+    selection.value = null;
+    composition.value = "";
+    isComposing.value = false;
+    prevSelection = null;
+    anchorG = null;
+    focusG = null;
+  }
+  return {
+    value,
+    length,
+    slots,
+    selection,
+    composition,
+    isComposing,
+    isFocused,
+    effectivePattern,
+    inputMode,
+    filter,
+    isImeText,
+    setValue,
+    insert,
+    deleteRange,
+    bulkDelete,
+    syncSelection,
+    setSelection,
+    clearSelection,
+    selectAtEnd,
+    selectSlot,
+    extendSelection,
+    startComposition,
+    updateComposition,
+    endComposition,
+    reset
+  };
+}
+export {
+  OtpInputPatterns as O,
+  useOtpInput as u
+};
+//# sourceMappingURL=useOtpInput.js.map

package/dist/es/src/components/CdsOtpInput/composables/useOtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOtpInput.js","sources":["../../../../../../src/components/CdsOtpInput/composables/useOtpInput.ts"],"sourcesContent":["import { computed, type MaybeRefOrGetter, type Ref, shallowRef, toRef, toValue } from 'vue';\n\nexport interface OtpSlotData {\n  char: string | null;\n  compositionChar: string | null;\n  placeholderChar: string | null;\n  isActive: boolean;\n  hasFakeCaret: boolean;\n}\n\nexport interface OtpSelection {\n  start: number;\n  end: number;\n  direction: 'forward' | 'backward' | 'none';\n}\n\nexport interface OtpSelectionInput {\n  value: string;\n  selectionStart: number | null;\n  selectionEnd: number | null;\n  selectionDirection: 'forward' | 'backward' | 'none' | null;\n  maxLength: number;\n}\n\nexport const OtpInputPatterns = {\n  numeric: /[0-9]/,\n  alpha: /[a-zA-Z]/,\n  alphanumeric: /[a-zA-Z0-9]/,\n  'unicode-alpha': /\\p{L}/u,\n  'unicode-alphanumeric': /[\\p{L}\\p{N}]/u\n} as const;\n\nexport type OtpInputPattern = keyof typeof OtpInputPatterns;\n\nconst IME_SCRIPT_RE = /[\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Hangul}\\p{Script=Bopomofo}]/u;\n\nconst graphemeSegmenter = /* @__PURE__ */ new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\nexport interface OtpInputOptions {\n  value: Ref<string>;\n  length?: MaybeRefOrGetter<number>;\n  pattern?: MaybeRefOrGetter<OtpInputPattern | RegExp | null | undefined>;\n  type?: MaybeRefOrGetter<'text' | 'password' | 'number'>;\n  masked?: MaybeRefOrGetter<boolean>;\n  placeholder?: MaybeRefOrGetter<string | null | undefined>;\n  isFocused?: Ref<boolean | undefined>;\n}\n\nexport interface OtpInputContext {\n  value: Ref<string>;\n  length: Readonly<Ref<number>>;\n  slots: Readonly<Ref<OtpSlotData[]>>;\n  selection: Readonly<Ref<OtpSelection | null>>;\n  composition: Readonly<Ref<string>>;\n  isComposing: Readonly<Ref<boolean>>;\n  isFocused: Ref<boolean | undefined>;\n  effectivePattern: Readonly<Ref<RegExp | null>>;\n  inputMode: Readonly<Ref<'numeric' | 'text'>>;\n\n  filter: (text: string) => string;\n  isImeText: (text: string) => boolean;\n\n  setValue: (text: string) => string;\n  insert: (text: string, range?: { start: number; end: number }) => string;\n  deleteRange: (start: number, end: number) => string;\n  bulkDelete: (isBackward: boolean) => string;\n\n  syncSelection: (raw: OtpSelectionInput) => OtpSelection | null;\n  setSelection: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;\n  clearSelection: () => void;\n  selectAtEnd: () => OtpSelection;\n  selectSlot: (index: number) => OtpSelection;\n  extendSelection: (direction: -1 | 1) => OtpSelection | null;\n\n  startComposition: () => void;\n  updateComposition: (data: string) => void;\n  endComposition: () => void;\n\n  reset: () => void;\n}\n\n/**\n * Headless-логика ввода одноразового кода: раскладывает строку значения по ячейкам,\n * фильтрует символы по паттерну и держит выделение скрытого input'а так, чтобы\n * визуально всегда была подсвечена ровно одна ячейка.\n *\n * Границы ячеек считаются в графемах, поэтому эмодзи, ZWJ-последовательности и\n * модификаторы тона кожи занимают ровно одну ячейку.\n */\nexport function useOtpInput(options: OtpInputOptions): OtpInputContext {\n  const {\n    value,\n    length: _length = 6,\n    pattern,\n    type = 'number',\n    masked = false,\n    placeholder,\n    isFocused = shallowRef(false)\n  } = options;\n\n  const selection = shallowRef<OtpSelection | null>(null);\n  const composition = shallowRef('');\n  const isComposing = shallowRef(false);\n  let prevSelection: OtpSelection | null = null;\n  // Якорь и фокус Shift+стрелок отслеживаются в графемах.\n  let anchorG: number | null = null;\n  let focusG: number | null = null;\n\n  const length = toRef(() => Number(toValue(_length)));\n  const isMasked = toRef(() => toValue(masked) || toValue(type) === 'password');\n  const effectivePattern = toRef((): RegExp | null => {\n    const p = toValue(pattern);\n    if (p instanceof RegExp) return p;\n    if (p != null) return OtpInputPatterns[p as OtpInputPattern] ?? null;\n    if (toValue(type) === 'number') return OtpInputPatterns.numeric;\n    return null;\n  });\n  const inputMode = toRef(() =>\n    effectivePattern.value === OtpInputPatterns.numeric ? ('numeric' as const) : ('text' as const)\n  );\n\n  function graphemes(s: string): string[] {\n    return Array.from(graphemeSegmenter.segment(s), (seg) => seg.segment);\n  }\n\n  function codeUnitsToGraphemeIndex(s: string, pos: number): number {\n    let count = 0;\n    for (const seg of graphemeSegmenter.segment(s)) {\n      if (seg.index >= pos) break;\n      count++;\n    }\n    return count;\n  }\n\n  function graphemeIndexToCodeUnits(s: string, gIndex: number): number {\n    if (gIndex <= 0) return 0;\n    let count = 0;\n    for (const seg of graphemeSegmenter.segment(s)) {\n      if (count === gIndex) return seg.index;\n      count++;\n    }\n    return s.length;\n  }\n\n  const slots = computed((): OtpSlotData[] => {\n    const chars = graphemes(value.value);\n    const compositionChars = graphemes(composition.value);\n    const placeholderChar = toValue(placeholder) ?? null;\n    const currentSelection = selection.value;\n    const startG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.start) : null;\n    const endG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.end) : null;\n    const compositionStart = startG ?? chars.length;\n\n    return Array.from({ length: length.value }, (_, i) => {\n      const char = chars[i] ?? null;\n      const displayChar = char !== null && isMasked.value ? '•' : char;\n\n      let compositionChar: string | null = null;\n      if (composition.value && i >= compositionStart) {\n        const offset = i - compositionStart;\n        const c = compositionChars[offset];\n        if (c != null) compositionChar = isMasked.value ? '•' : c;\n      }\n\n      const isActive = !!(\n        isFocused.value &&\n        startG !== null &&\n        endG !== null &&\n        ((startG === endG && i === startG) || (i >= startG && i < endG))\n      );\n\n      return {\n        char: displayChar,\n        compositionChar,\n        placeholderChar,\n        isActive,\n        hasFakeCaret: isActive && char === null && compositionChar === null\n      };\n    });\n  });\n\n  function filter(text: string): string {\n    const re = effectivePattern.value;\n    if (!re) return text;\n    return graphemes(text)\n      .filter((c) => re.test(c))\n      .join('');\n  }\n\n  function clampGraphemes(text: string, max: number): string {\n    const chars = graphemes(text);\n    if (chars.length <= max) return text;\n    return chars.slice(0, max).join('');\n  }\n\n  function isImeText(text: string): boolean {\n    return IME_SCRIPT_RE.test(text);\n  }\n\n  function setValue(text: string): string {\n    const next = clampGraphemes(filter(text), length.value);\n    value.value = next;\n    return next;\n  }\n\n  function insert(text: string, range?: { start: number; end: number }): string {\n    const current = value.value;\n    const start = range?.start ?? current.length;\n    const end = range?.end ?? current.length;\n    const filtered = filter(text);\n    const next = clampGraphemes(current.slice(0, start) + filtered + current.slice(end), length.value);\n    value.value = next;\n\n    const insertEnd = Math.min(start + filtered.length, next.length);\n    const insertEndG = codeUnitsToGraphemeIndex(next, insertEnd);\n    const cursorG = Math.min(insertEndG, length.value - 1);\n    const cursor = graphemeIndexToCodeUnits(next, cursorG);\n    setSelection(cursor, insertEnd, 'forward');\n    return next;\n  }\n\n  function deleteRange(start: number, end: number): string {\n    const current = value.value;\n    const next = current.slice(0, start) + current.slice(end);\n    value.value = next;\n    const newEnd = Math.min(start + 1, next.length);\n    setSelection(start, newEnd, 'forward');\n    return next;\n  }\n\n  function bulkDelete(isBackward: boolean): string {\n    const current = value.value;\n    const currentSelection = selection.value;\n    const next = isBackward\n      ? current.slice(currentSelection?.end ?? current.length)\n      : current.slice(0, currentSelection?.start ?? 0);\n    value.value = next;\n\n    if (next.length === 0) setSelection(0, 0, 'none');\n    else if (isBackward) setSelection(0, 1, 'forward');\n    else setSelection(next.length, next.length, 'none');\n    return next;\n  }\n\n  function setSelection(\n    start: number | null,\n    end: number | null,\n    direction: 'forward' | 'backward' | 'none' = 'none'\n  ): void {\n    if (start === null || end === null) {\n      selection.value = null;\n      anchorG = null;\n      focusG = null;\n      return;\n    }\n    const next: OtpSelection = { start, end, direction };\n    selection.value = next;\n    prevSelection = next;\n    const startG = codeUnitsToGraphemeIndex(value.value, start);\n    anchorG = startG;\n    focusG = startG;\n  }\n\n  function clearSelection(): void {\n    selection.value = null;\n    anchorG = null;\n    focusG = null;\n  }\n\n  function selectAtEnd(): OtpSelection {\n    const current = value.value;\n    const graphemeCount = graphemes(current).length;\n    let start: number;\n    let end: number;\n    if (graphemeCount >= length.value) {\n      start = graphemeIndexToCodeUnits(current, length.value - 1);\n      end = current.length;\n    } else {\n      start = current.length;\n      end = current.length;\n    }\n    const next: OtpSelection = { start, end, direction: 'forward' };\n    selection.value = next;\n    prevSelection = next;\n    anchorG = graphemeCount >= length.value ? length.value - 1 : graphemeCount;\n    focusG = anchorG;\n    return next;\n  }\n\n  function selectSlot(index: number): OtpSelection {\n    const current = value.value;\n    const graphemeCount = graphemes(current).length;\n    const clamped = Math.min(index, graphemeCount);\n    const start = graphemeIndexToCodeUnits(current, clamped);\n    const end = clamped < graphemeCount ? graphemeIndexToCodeUnits(current, clamped + 1) : current.length;\n    const next: OtpSelection = { start, end, direction: 'forward' };\n    selection.value = next;\n    prevSelection = next;\n    anchorG = clamped;\n    focusG = clamped;\n    return next;\n  }\n\n  function extendSelection(direction: -1 | 1): OtpSelection | null {\n    const current = value.value;\n    const valueG = graphemes(current).length;\n    if (valueG === 0) return null;\n\n    const maxFocus = Math.min(length.value - 1, valueG);\n\n    if (anchorG === null || focusG === null) {\n      const currentSelection = selection.value;\n      if (!currentSelection) return null;\n      const selectionStartG = codeUnitsToGraphemeIndex(current, currentSelection.start);\n      const selectionEndG = codeUnitsToGraphemeIndex(current, currentSelection.end);\n      if (selectionEndG - selectionStartG <= 1) {\n        anchorG = selectionStartG;\n        focusG = selectionStartG;\n      } else if (currentSelection.direction === 'backward') {\n        anchorG = selectionEndG - 1;\n        focusG = selectionStartG;\n      } else {\n        anchorG = selectionStartG;\n        focusG = selectionEndG - 1;\n      }\n    }\n\n    const newFocus = Math.max(0, Math.min(maxFocus, focusG + direction));\n    focusG = newFocus;\n\n    const minG = Math.min(anchorG, newFocus);\n    const maxG = Math.max(anchorG, newFocus);\n    const start = graphemeIndexToCodeUnits(current, minG);\n    const end = maxG + 1 >= valueG ? current.length : graphemeIndexToCodeUnits(current, maxG + 1);\n    const newDirection: 'forward' | 'backward' = newFocus < anchorG ? 'backward' : 'forward';\n\n    const next: OtpSelection = { start, end, direction: newDirection };\n    selection.value = next;\n    prevSelection = next;\n    return next;\n  }\n\n  // Приводим выделение к тому, чтобы оно всегда покрывало хотя бы одну ячейку:\n  // иначе каретка между двумя ячейками не подсветила бы ни одну из них.\n  function syncSelection(raw: OtpSelectionInput): OtpSelection | null {\n    if (isComposing.value) return selection.value;\n\n    const { value: inputValue, selectionStart, selectionEnd, selectionDirection, maxLength } = raw;\n\n    if (selectionStart === null || selectionEnd === null) {\n      selection.value = null;\n      prevSelection = null;\n      return null;\n    }\n\n    const valueG = graphemes(inputValue).length;\n    const startG = codeUnitsToGraphemeIndex(inputValue, selectionStart);\n    const endG = codeUnitsToGraphemeIndex(inputValue, selectionEnd);\n\n    let outStartG = -1;\n    let outEndG = -1;\n    let direction: 'forward' | 'backward' | 'none' | undefined;\n\n    if (valueG !== 0) {\n      const isSingleCaret = startG === endG;\n      const isInsertMode = startG === valueG && valueG < maxLength;\n\n      if (isSingleCaret && !isInsertMode) {\n        if (startG === 0) {\n          outStartG = 0;\n          outEndG = 1;\n          direction = 'forward';\n        } else if (startG === maxLength) {\n          outStartG = startG - 1;\n          outEndG = startG;\n          direction = 'backward';\n        } else if (maxLength > 1 && valueG > 1) {\n          let offset = 0;\n          if (prevSelection !== null) {\n            const prevStartG = codeUnitsToGraphemeIndex(inputValue, prevSelection.start);\n            const prevEndG = codeUnitsToGraphemeIndex(inputValue, prevSelection.end);\n            direction = startG < prevEndG ? 'backward' : 'forward';\n            const wasPreviouslyInserting = prevStartG === prevEndG && prevStartG < maxLength;\n            // Схлопывание мультиячейкового выделения: каретка встала на край прошлого\n            // диапазона, между ячейками пользователь не переходил — не сдвигаем ячейку назад.\n            const wasMultiSlot = prevEndG - prevStartG > 1;\n            if (direction === 'backward' && !wasPreviouslyInserting && !wasMultiSlot) {\n              offset = -1;\n            }\n          }\n          outStartG = offset + startG;\n          outEndG = offset + startG + 1;\n        }\n      }\n    }\n\n    const finalStartG = outStartG !== -1 ? outStartG : startG;\n    const finalEndG = outEndG !== -1 ? outEndG : endG;\n    const finalStart = graphemeIndexToCodeUnits(inputValue, finalStartG);\n    const finalEnd = graphemeIndexToCodeUnits(inputValue, finalEndG);\n    const finalDirection = direction ?? selectionDirection ?? 'none';\n\n    const next: OtpSelection = { start: finalStart, end: finalEnd, direction: finalDirection };\n    selection.value = next;\n    prevSelection = next;\n    // Сбрасываем якорь при обычной навигации, но сохраняем его на время работы extendSelection.\n    if (finalEndG - finalStartG <= 1) {\n      anchorG = finalStartG;\n      focusG = finalStartG;\n    }\n    return next;\n  }\n\n  function startComposition(): void {\n    isComposing.value = true;\n    composition.value = '';\n  }\n\n  function updateComposition(data: string): void {\n    composition.value = IME_SCRIPT_RE.test(data) ? data : '';\n  }\n\n  function endComposition(): void {\n    isComposing.value = false;\n    composition.value = '';\n  }\n\n  function reset(): void {\n    value.value = '';\n    selection.value = null;\n    composition.value = '';\n    isComposing.value = false;\n    prevSelection = null;\n    anchorG = null;\n    focusG = null;\n  }\n\n  return {\n    value,\n    length,\n    slots,\n    selection,\n    composition,\n    isComposing,\n    isFocused,\n    effectivePattern,\n    inputMode,\n\n    filter,\n    isImeText,\n\n    setValue,\n    insert,\n    deleteRange,\n    bulkDelete,\n\n    syncSelection,\n    setSelection,\n    clearSelection,\n    selectAtEnd,\n    selectSlot,\n    extendSelection,\n\n    startComposition,\n    updateComposition,\n    endComposition,\n\n    reset\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/es/src/components/CdsOtpInput/index.js

@@ -0,0 +1,17 @@
+import { w as withConstants } from "../../core/withConstants.js";
+import { c as CdsOtpInputConstants, C as CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants } from "./api/CdsOtpInput.constants.js";
+import { _ as _sfc_main$1 } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$2 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main } from "./CdsOtpInput.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js";
+const CdsOtpInput = withConstants(_sfc_main, CdsOtpInputConstants);
+const CdsOtpField = withConstants(_sfc_main$1, CdsOtpFieldConstants);
+const CdsOtpGroup = withConstants(_sfc_main$2, CdsOtpGroupConstants);
+const CdsOtpSeparator = withConstants(_sfc_main$3, CdsOtpSeparatorConstants);
+export {
+  CdsOtpField as C,
+  CdsOtpGroup as a,
+  CdsOtpInput as b,
+  CdsOtpSeparator as c
+};
+//# sourceMappingURL=index.js.map

package/dist/es/src/components/CdsOtpInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/CdsOtpInput/index.ts"],"sourcesContent":["import { withConstants } from '@cds/core';\n\nimport {\n  CdsOtpFieldConstants,\n  CdsOtpGroupConstants,\n  CdsOtpInputConstants,\n  CdsOtpSeparatorConstants\n} from './api/CdsOtpInput.constants';\nimport _CdsOtpField from './CdsOtpField.vue';\nimport _CdsOtpGroup from './CdsOtpGroup.vue';\nimport _CdsOtpInput from './CdsOtpInput.vue';\nimport _CdsOtpSeparator from './CdsOtpSeparator.vue';\n\n// Components\nexport const CdsOtpInput = withConstants(_CdsOtpInput, CdsOtpInputConstants);\nexport const CdsOtpField = withConstants(_CdsOtpField, CdsOtpFieldConstants);\nexport const CdsOtpGroup = withConstants(_CdsOtpGroup, CdsOtpGroupConstants);\nexport const CdsOtpSeparator = withConstants(_CdsOtpSeparator, CdsOtpSeparatorConstants);\n\n// Constants\nexport { CdsOtpInputSymbol } from './api/CdsOtpInput.constants';\n\n// Composables\nexport { OtpInputPatterns, useOtpInput } from './composables/useOtpInput';\n\n// Types\nexport * from './api/CdsOtpInput.types';\n"],"names":["_CdsOtpInput","_CdsOtpField","_CdsOtpGroup","_CdsOtpSeparator"],"mappings":";;;;;;AAcO,MAAM,cAAc,cAAcA,WAAc,oBAAoB;AACpE,MAAM,cAAc,cAAcC,aAAc,oBAAoB;AACpE,MAAM,cAAc,cAAcC,aAAc,oBAAoB;AACpE,MAAM,kBAAkB,cAAcC,aAAkB,wBAAwB;"}

package/dist/es/src/components/CdsOverlay/CdsOverlay.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,6 @@ import { a as useRouter, b as useBackButton } from "../../composables/useRouter/
 import { u as useScopeId } from "../../composables/useScopeId/useScopeId.js";
 import { u as useStack } from "../../composables/useStack/useStack.js";
 import { u as useTeleport } from "../../composables/useTeleport/useTeleport.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { s as standardEasing, M as MaybeTransition } from "../../composables/useTransition/useTransition.js";
 import { g as getCurrentInstance } from "../../core/getCurrentInstance.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
@@ -25,6 +24,7 @@ import { u as useActivator } from "./composables/useActivator.js";
 import { u as useLocationStrategies } from "./composables/useLocationStrategies.js";
 import { u as useScrollStrategies } from "./composables/useScrollStrategies.js";
 import { C as ClickOutside } from "../../directives/click-outside/index.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/es/src/components/CdsOverlay/api/CdsOverlay.props.js

@@ -3,12 +3,12 @@ import { d as defineScrollStrategiesProps } from "../composables/useScrollStrate
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.js";
 import { d as defineFocusTrapProps } from "../../../composables/useFocus/useFocusTrap.js";
 import { d as defineLazyProps } from "../../../composables/useLazy/useLazy.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { b as defineTransitionProps } from "../../../composables/useTransition/useTransition.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { d as defineActivatorProps } from "../composables/useActivator.js";
 import { C as CdsOverlayConstants } from "./CdsOverlay.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
 const defineCdsOverlayProps = propsFactory(
   {

package/dist/es/src/components/CdsPage/CdsPage.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,4 @@
 import { defineComponent, useSlots, computed, unref, createVNode } from "vue";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { w as warn } from "../../utils/dom/console.js";
@@ -7,6 +6,7 @@ import { u as useInjectMain } from "../CdsMain/context.js";
 import { C as CdsPageConstants } from "./api/CdsPage.constants.js";
 import { d as defineCdsPageProps } from "./api/CdsPage.props.js";
 import { u as useInjectLayout } from "../../composables/useLayout/context.js";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsPageConstants.name

package/dist/es/src/components/CdsPagination/CdsPagination.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,7 @@
 import { defineComponent, useSlots, shallowRef, ref, computed, unref, createVNode, nextTick } from "vue";
 import { u as useDisabled } from "../../composables/useDisabled/useDisabled.js";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 import { a as useLocale, u as useRtl } from "../../composables/useLocale/useLocale.js";
 import { u as useResizeObserver } from "../../composables/useResizeObserver/useResizeObserver.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { v as createRange, _ as keyNames } from "../../utils/helpers.js";
@@ -12,6 +10,8 @@ import { C as CdsFunctionalButton } from "../CdsFunctionalButton/index.js";
 import { C as CdsTextInput } from "../CdsTextInput/index.js";
 import { C as CdsPaginationConstants } from "./api/CdsPagination.constants.js";
 import { d as defineCdsPaginationProps } from "./api/CdsPagination.props.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsPaginationConstants.name

package/dist/es/src/components/CdsPagination/api/CdsPagination.props.js

@@ -1,9 +1,9 @@
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.js";
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsPaginationConstants } from "./CdsPagination.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 const defineCdsPaginationProps = propsFactory(
   {
     /** Начальная страница */

package/dist/es/src/components/CdsProgressBar/CdsProgressBar.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,6 @@
 import { defineComponent, useSlots, shallowRef, computed, unref, createVNode, Transition, Fragment } from "vue";
 import { u as useRtl } from "../../composables/useLocale/useLocale.js";
 import { u as useLocation } from "../../composables/useLocation/useLocation.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { u as useToggleScope } from "../../core/useToggleScope.js";
@@ -10,6 +9,7 @@ import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsProgressBarConstants } from "./api/CdsProgressBar.constants.js";
 import { d as defineCdsProgressBarProps } from "./api/CdsProgressBar.props.js";
 import { u as useChunks } from "./composables/useChunk.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useTextColor, a as useBackgroundColor } from "../../composables/useColor/useColor.js";
 import { u as useElementIntersection } from "../../hooks/useIntersectionObserver/index.js";
 import { u as useResizeObserver } from "../../hooks/useResizeObserver/index.js";

package/dist/es/src/components/CdsProgressBar/api/CdsProgressBar.props.js

@@ -1,9 +1,9 @@
 import { d as defineLocationProps } from "../../../composables/useLocation/useLocation.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps, a as defineTagProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { d as defineChunksProps } from "../composables/useChunk.js";
 import { C as CdsProgressBarConstants } from "./CdsProgressBar.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsProgressBarProps = propsFactory(
   {

package/dist/es/src/components/CdsProgressCircle/CdsProgressCircle.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
 import { defineComponent, useSlots, shallowRef, toRef, unref, computed, createVNode } from "vue";
 import { u as useReveal } from "../../composables/useReveal/useReveal.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as clamp, u as convertToUnit } from "../../utils/helpers.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { P as PREFERS_REDUCED_MOTION } from "../../utils/dom/globals.js";
 import { C as CdsProgressCircleConstants } from "./api/CdsProgressCircle.constants.js";
 import { d as defineCdsProgressCircleProps } from "./api/CdsProgressCircle.props.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useSize } from "../../composables/useSize/useSize.js";
 import { u as useTextColor } from "../../composables/useColor/useColor.js";
 import { a as useElementSize } from "../../hooks/useResizeObserver/index.js";

package/dist/es/src/components/CdsProgressCircle/api/CdsProgressCircle.props.js

@@ -1,8 +1,8 @@
 import { d as defineRevealProps } from "../../../composables/useReveal/useReveal.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsProgressCircleConstants } from "./CdsProgressCircle.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 const defineCdsProgressCircleProps = propsFactory(
   {

package/dist/es/src/components/CdsSkeletonLoader/CdsSkeletonLoader.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,4 @@
 import { defineComponent, useSlots, computed, createVNode, unref } from "vue";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { ac as wrapInArray } from "../../utils/helpers.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
@@ -7,6 +6,7 @@ import { C as CdsSkeletonLoaderConstants } from "./api/CdsSkeletonLoader.constan
 import { d as defineCdsSkeletonLoaderProps } from "./api/CdsSkeletonLoader.props.js";
 import { a as allowedTypes } from "./api/CdsSkeletonLoader.types.js";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsSkeletonLoaderConstants.name

package/dist/es/src/components/CdsSkeletonLoader/api/CdsSkeletonLoader.props.js

@@ -1,7 +1,7 @@
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsSkeletonLoaderConstants } from "./CdsSkeletonLoader.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
 const defineCdsSkeletonLoaderProps = propsFactory(
   {

package/dist/es/src/components/CdsSlideGroup/CdsSlideGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,5 @@
 import { defineComponent, useSlots, shallowRef, computed, unref, watch, createVNode } from "vue";
 import { u as useDirection } from "../../composables/useDirection/useDirection.js";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 import { u as useGoTo } from "../../composables/useGoTo/useGoTo.js";
 import { u as useGroup } from "../../composables/useGroup/useGroup.js";
 import { u as useRtl } from "../../composables/useLocale/useLocale.js";
@@ -14,6 +13,7 @@ import { C as CdsFunctionalButton } from "../CdsFunctionalButton/index.js";
 import { C as CdsSlideGroupConstants } from "./api/CdsSlideGroup.constants.js";
 import { d as defineCdsSlideGroupProps } from "./api/CdsSlideGroup.props.js";
 import { c as calculateCenteredTarget, a as calculateUpdatedTarget, g as getOffsetSize, b as getScrollPosition, d as getScrollSize } from "./utils/calculateTargets.js";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsSlideGroupConstants.name

package/dist/es/src/components/CdsSlideGroup/api/CdsSlideGroup.props.js

@@ -1,11 +1,11 @@
 import { d as defineDirectionProps } from "../../../composables/useDirection/useDirection.js";
-import { d as defineDisplayProps } from "../../../composables/useDisplay/useDisplay.js";
 import { d as defineGroupProps } from "../../../composables/useGroup/useGroup.js";
 import { d as defineGroupItemProps } from "../../../composables/useGroup/useGroupItem.js";
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsSlideGroupConstants, a as CdsSlideGroupSymbol, b as CdsSlideGroupItemConstants } from "./CdsSlideGroup.constants.js";
+import { d as defineDisplayProps } from "../../../composables/useDisplay/useDisplay.js";
 const defineCdsSlideGroupProps = propsFactory(
   {
     /** Принудительно выравнивает активный компонент по центру. */

package/dist/es/src/components/CdsSlideView/api/CdsSlideView.props.js

@@ -3,10 +3,10 @@ import { d as defineDisabledProps } from "../../../composables/useDisabled/useDi
 import { d as defineGroupProps } from "../../../composables/useGroup/useGroup.js";
 import { d as defineGroupItemProps } from "../../../composables/useGroup/useGroupItem.js";
 import { d as defineLazyProps } from "../../../composables/useLazy/useLazy.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsSlideViewConstants } from "./CdsSlideView.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 const defineCdsSlideViewProps = propsFactory(
   {
     continuous: Boolean,

package/dist/es/src/components/CdsStages/CdsStages.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { defineComponent, computed, unref, createVNode } from "vue";
 import { u as useItems } from "../../composables/useItems/useItems.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsStagesConstants } from "./api/CdsStages.constants.js";
 import { d as defineCdsStagesProps } from "./api/CdsStages.props.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsStagesConstants.name

package/dist/es/src/components/CdsStages/api/CdsStages.props.js

@@ -1,8 +1,8 @@
 import { d as defineItemsProps } from "../../../composables/useItems/useItems.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsStagesConstants } from "./CdsStages.constants.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 const defineCdsStagesProps = propsFactory(
   {
     /** Текущий этап */