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

package/dist/es/src/components/CdsOtpInput/CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import { defineComponent, useSlots, createVNode } from "vue";
+import { u as useDefaults } from "../../core/useDefaults.js";
+import { c as classNames } from "../../utils/dom/classNames.js";
+import { b as CdsOtpSeparatorConstants } from "./api/CdsOtpInput.constants.js";
+import { b as defineCdsOtpSeparatorProps } from "./api/CdsOtpInput.props.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpSeparatorConstants.name
+  },
+  __name: "CdsOtpSeparator",
+  props: {
+    ...defineCdsOtpSeparatorProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const slots = useSlots();
+    return () => {
+      var _a;
+      const {
+        rootClass
+      } = CdsOtpSeparatorConstants;
+      return createVNode("div", {
+        "class": classNames(rootClass, props.class),
+        "style": [props.style],
+        "aria-hidden": "true"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js.map

package/dist/es/src/components/CdsOtpInput/CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js","sources":["../../../../../src/components/CdsOtpInput/CdsOtpSeparator.vue"],"sourcesContent":["<script setup lang=\"tsx\">\nimport { useDefaults } from '@cds/core';\nimport { classNames } from '@cds/utils';\n\nimport { CdsOtpSeparatorConstants } from './api/CdsOtpInput.constants';\nimport { defineCdsOtpSeparatorProps } from './api/CdsOtpInput.props';\nimport type { CdsOtpSeparatorSlots } from './api/CdsOtpInput.types';\n\ndefineOptions({\n  name: CdsOtpSeparatorConstants.name\n});\n\nconst _props = defineProps({ ...defineCdsOtpSeparatorProps() });\nconst props = useDefaults(_props);\nconst slots = defineSlots<CdsOtpSeparatorSlots>();\n\ndefineRender(() => {\n  const { rootClass } = CdsOtpSeparatorConstants;\n\n  return (\n    <div class={classNames(rootClass, props.class)} style={[props.style]} aria-hidden=\"true\">\n      {slots.default?.()}\n    </div>\n  );\n});\n</script>\n"],"names":["_props","__props","props","useDefaults","slots","_useSlots","rootClass","CdsOtpSeparatorConstants","_createVNode","classNames","class","style","default"],"mappings":";;;;;;;;;;;;;;AAYA,UAAMA,SAASC;AACf,UAAMC,QAAQC,YAAYH,MAAM;AAChC,UAAMI,QAAQC,SAAA;WAED,MAAM;;AACjB,YAAM;AAAA,QAAEC;AAAAA,MAAU,IAAIC;AAEtB,aAAAC,YAAA,OAAA;AAAA,QAAA,SACcC,WAAWH,WAAWJ,MAAMQ,KAAK;AAAA,QAAC,SAAS,CAACR,MAAMS,KAAK;AAAA,QAAC,eAAA;AAAA,MAAA,GAAA,EACjEP,WAAMQ,YAANR,8BAAiB,CAAA;AAAA,IAGxB;AAAA;;"}

package/dist/es/src/components/CdsOtpInput/api/CdsOtpInput.constants.js

@@ -0,0 +1,16 @@
+import { d as defineConstants } from "../../../core/defineConstants.js";
+const CdsOtpInputConstants = defineConstants("CdsOtpInput", {
+  types: ["text", "password", "number"]
+});
+const CdsOtpFieldConstants = defineConstants("CdsOtpField");
+const CdsOtpGroupConstants = defineConstants("CdsOtpGroup");
+const CdsOtpSeparatorConstants = defineConstants("CdsOtpSeparator");
+const CdsOtpInputSymbol = Symbol.for("cds:otp-input");
+export {
+  CdsOtpFieldConstants as C,
+  CdsOtpGroupConstants as a,
+  CdsOtpSeparatorConstants as b,
+  CdsOtpInputConstants as c,
+  CdsOtpInputSymbol as d
+};
+//# sourceMappingURL=CdsOtpInput.constants.js.map

package/dist/es/src/components/CdsOtpInput/api/CdsOtpInput.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpInput.constants.js","sources":["../../../../../../src/components/CdsOtpInput/api/CdsOtpInput.constants.ts"],"sourcesContent":["import { defineConstants } from '@cds/core';\nimport type { InjectionKey } from 'vue';\n\nimport type { CdsOtpInputContext, CdsOtpInputType } from './CdsOtpInput.types';\n\nexport const CdsOtpInputConstants = defineConstants('CdsOtpInput', {\n  types: ['text', 'password', 'number'] as const satisfies readonly CdsOtpInputType[]\n});\n\nexport const CdsOtpFieldConstants = defineConstants('CdsOtpField');\nexport const CdsOtpGroupConstants = defineConstants('CdsOtpGroup');\nexport const CdsOtpSeparatorConstants = defineConstants('CdsOtpSeparator');\n\nexport const CdsOtpInputSymbol: InjectionKey<CdsOtpInputContext> = Symbol.for('cds:otp-input');\n"],"names":[],"mappings":";AAKO,MAAM,uBAAuB,gBAAgB,eAAe;AAAA,EACjE,OAAO,CAAC,QAAQ,YAAY,QAAQ;AACtC,CAAC;AAEM,MAAM,uBAAuB,gBAAgB,aAAa;AAC1D,MAAM,uBAAuB,gBAAgB,aAAa;AAC1D,MAAM,2BAA2B,gBAAgB,iBAAiB;AAElE,MAAM,oBAAsD,OAAO,IAAI,eAAe;"}

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

@@ -0,0 +1,97 @@
+import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.js";
+import { d as defineFocusProps, a as defineAutofocusProps } from "../../../composables/useFocus/useFocus.js";
+import { d as defineLoaderProps } from "../../../composables/useLoader/useLoader.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 CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants, c as CdsOtpInputConstants } from "./CdsOtpInput.constants.js";
+import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
+import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
+import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
+const defineCdsOtpInputProps = propsFactory(
+  {
+    /** Символ-разделитель, который ставится между ячейками кода */
+    divider: String,
+    /** Подсвечивать все ячейки, пока поле находится в фокусе, а не только активную */
+    focusAll: Boolean,
+    /** Слитный вид: ячейки объединяются в одно поле без промежутков между ними */
+    merged: Boolean,
+    /** Доступное имя поля (`aria-label`). Принимает ключ локализации вида `$cds.input.otp` */
+    label: {
+      type: String,
+      default: "$cds.input.otp"
+    },
+    /** Количество ячеек кода */
+    length: {
+      type: [Number, String],
+      default: 6
+    },
+    /** Скрывать введённые символы точками */
+    masked: Boolean,
+    /** Значение компонента v-model */
+    modelValue: {
+      type: [Number, String],
+      default: void 0
+    },
+    /** Допустимые символы: имя готового паттерна (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) или собственное регулярное выражение */
+    pattern: {
+      type: [String, Object],
+      default: void 0
+    },
+    /** Символ-заполнитель, который показывается в пустой ячейке */
+    placeholder: String,
+    /** Тип вводимого кода. `number` ограничивает ввод цифрами, `password` скрывает символы */
+    type: {
+      type: String,
+      default: "number",
+      validator: (value) => CdsOtpInputConstants.types.includes(value)
+    },
+    /** Состояние ошибки */
+    error: Boolean,
+    ...defineAutofocusProps(),
+    ...defineColorProps(),
+    ...defineComponentProps(),
+    ...defineDimensionsProps(),
+    ...defineDisabledProps(),
+    ...defineFocusProps(),
+    ...defineLoaderProps(),
+    ...defineSizeProps(),
+    ...defineThemeProps()
+  },
+  CdsOtpInputConstants.name
+);
+const defineCdsOtpFieldProps = propsFactory(
+  {
+    /** Порядковый номер ячейки, начиная с нуля */
+    index: {
+      type: Number,
+      required: true
+    },
+    ...defineComponentProps()
+  },
+  CdsOtpFieldConstants.name
+);
+const defineCdsOtpGroupProps = propsFactory(
+  {
+    /** Слитный вид группы. По умолчанию наследуется от родительского `CdsOtpInput` */
+    merged: {
+      type: Boolean,
+      default: null
+    },
+    ...defineComponentProps()
+  },
+  CdsOtpGroupConstants.name
+);
+const defineCdsOtpSeparatorProps = propsFactory(
+  {
+    ...defineComponentProps()
+  },
+  CdsOtpSeparatorConstants.name
+);
+export {
+  defineCdsOtpGroupProps as a,
+  defineCdsOtpSeparatorProps as b,
+  defineCdsOtpInputProps as c,
+  defineCdsOtpFieldProps as d
+};
+//# sourceMappingURL=CdsOtpInput.props.js.map

package/dist/es/src/components/CdsOtpInput/api/CdsOtpInput.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpInput.props.js","sources":["../../../../../../src/components/CdsOtpInput/api/CdsOtpInput.props.ts"],"sourcesContent":["import { defineColorProps } from '@cds/composables/useColor';\nimport { defineDimensionsProps } from '@cds/composables/useDimensions';\nimport { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { defineAutofocusProps, defineFocusProps } from '@cds/composables/useFocus';\nimport { defineLoaderProps } from '@cds/composables/useLoader';\nimport { defineSizeProps } from '@cds/composables/useSize';\nimport { defineThemeProps } from '@cds/composables/useTheme';\nimport { defineComponentProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport type { OtpInputPattern } from '../composables/useOtpInput';\nimport {\n  CdsOtpFieldConstants,\n  CdsOtpGroupConstants,\n  CdsOtpInputConstants,\n  CdsOtpSeparatorConstants\n} from './CdsOtpInput.constants';\nimport type { CdsOtpInputType } from './CdsOtpInput.types';\n\nexport const defineCdsOtpInputProps = propsFactory(\n  {\n    /** Символ-разделитель, который ставится между ячейками кода */\n    divider: String,\n    /** Подсвечивать все ячейки, пока поле находится в фокусе, а не только активную */\n    focusAll: Boolean,\n    /** Слитный вид: ячейки объединяются в одно поле без промежутков между ними */\n    merged: Boolean,\n    /** Доступное имя поля (`aria-label`). Принимает ключ локализации вида `$cds.input.otp` */\n    label: {\n      type: String,\n      default: '$cds.input.otp'\n    },\n    /** Количество ячеек кода */\n    length: {\n      type: [Number, String] as PropType<number | string>,\n      default: 6\n    },\n    /** Скрывать введённые символы точками */\n    masked: Boolean,\n    /** Значение компонента v-model */\n    modelValue: {\n      type: [Number, String] as PropType<number | string>,\n      default: undefined\n    },\n    /** Допустимые символы: имя готового паттерна (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) или собственное регулярное выражение */\n    pattern: {\n      type: [String, Object] as PropType<OtpInputPattern | RegExp>,\n      default: undefined\n    },\n    /** Символ-заполнитель, который показывается в пустой ячейке */\n    placeholder: String,\n    /** Тип вводимого кода. `number` ограничивает ввод цифрами, `password` скрывает символы */\n    type: {\n      type: String as PropType<CdsOtpInputType>,\n      default: 'number',\n      validator: (value: CdsOtpInputType) => CdsOtpInputConstants.types.includes(value)\n    },\n    /** Состояние ошибки */\n    error: Boolean,\n\n    ...defineAutofocusProps(),\n    ...defineColorProps(),\n    ...defineComponentProps(),\n    ...defineDimensionsProps(),\n    ...defineDisabledProps(),\n    ...defineFocusProps(),\n    ...defineLoaderProps(),\n    ...defineSizeProps(),\n    ...defineThemeProps()\n  },\n  CdsOtpInputConstants.name\n);\n\nexport const defineCdsOtpFieldProps = propsFactory(\n  {\n    /** Порядковый номер ячейки, начиная с нуля */\n    index: {\n      type: Number,\n      required: true as const\n    },\n\n    ...defineComponentProps()\n  },\n  CdsOtpFieldConstants.name\n);\n\nexport const defineCdsOtpGroupProps = propsFactory(\n  {\n    /** Слитный вид группы. По умолчанию наследуется от родительского `CdsOtpInput` */\n    merged: {\n      type: Boolean as PropType<boolean | null>,\n      default: null\n    },\n\n    ...defineComponentProps()\n  },\n  CdsOtpGroupConstants.name\n);\n\nexport const defineCdsOtpSeparatorProps = propsFactory(\n  {\n    ...defineComponentProps()\n  },\n  CdsOtpSeparatorConstants.name\n);\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,yBAAyB;AAAA,EACpC;AAAA;AAAA,IAEE,SAAS;AAAA;AAAA,IAET,UAAU;AAAA;AAAA,IAEV,QAAQ;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA;AAAA,IAER,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,aAAa;AAAA;AAAA,IAEb,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAA2B,qBAAqB,MAAM,SAAS,KAAK;AAAA,IAAA;AAAA;AAAA,IAGlF,OAAO;AAAA,IAEP,GAAG,qBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,IACH,GAAG,qBAAA;AAAA,IACH,GAAG,sBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,IACH,GAAG,kBAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,EAAiB;AAAA,EAEtB,qBAAqB;AACvB;AAEO,MAAM,yBAAyB;AAAA,EACpC;AAAA;AAAA,IAEE,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAGZ,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,qBAAqB;AACvB;AAEO,MAAM,yBAAyB;AAAA,EACpC;AAAA;AAAA,IAEE,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAGX,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,qBAAqB;AACvB;AAEO,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,yBAAyB;AAC3B;"}

package/dist/es/src/components/CdsOtpInput/api/CdsOtpInput.types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=CdsOtpInput.types.js.map

package/dist/es/src/components/CdsOtpInput/api/CdsOtpInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpInput.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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/index.js

@@ -42,6 +42,7 @@ import { C as CdsMessages } from "./CdsMessages/index.js";
 import { C as CdsModal } from "./CdsModal/index.js";
 import { C as CdsNotification } from "./CdsNotification/index.js";
 import { C as CdsNotificationAlert } from "./CdsNotificationAlert/index.js";
+import { C as CdsOtpField, a as CdsOtpGroup, b as CdsOtpInput, c as CdsOtpSeparator } from "./CdsOtpInput/index.js";
 import { C as CdsOverlay } from "./CdsOverlay/index.js";
 import { C as CdsPage } from "./CdsPage/index.js";
 import { C as CdsPagination } from "./CdsPagination/index.js";
@@ -79,8 +80,10 @@ import { _ as _sfc_main } from "./CdsGrid/CdsCol.vue_vue_type_script_setup_true_
 import { _ as _sfc_main$1 } from "./CdsGrid/CdsGrid.vue_vue_type_script_setup_true_lang.js";
 import { _ as _sfc_main$2 } from "./CdsGrid/CdsRow.vue_vue_type_script_setup_true_lang.js";
 import { c as CDS_DRAWER_WIDTH, b as CDS_DRAWER_WIDTH_MINIFIED, d as CDS_DRAWER_Z_INDEX_INNER, a as CDS_DRAWER_Z_INDEX_OUTER } from "./CdsDrawer/api/CdsDrawer.constants.js";
+import { d as CdsOtpInputSymbol } from "./CdsOtpInput/api/CdsOtpInput.constants.js";
 import { C as CssGridSymbol } from "./CdsGrid/api/CdsGrid.constants.js";
 import { E as EXPAND_COLUMN, a as SELECTION_ALL, S as SELECTION_COLUMN, b as SELECTION_INVERT, c as SELECTION_NONE, u as useSelection } from "./CdsTable/composable/selection.js";
+import { O as OtpInputPatterns, u as useOtpInput } from "./CdsOtpInput/composables/useOtpInput.js";
 import { a as allowedTypes } from "./CdsSkeletonLoader/api/CdsSkeletonLoader.types.js";
 import { m as makeTableProps, u as useLazyKVMap } from "./CdsTable/composable/table.js";
 import { u as useToastItem, a as useToastQueue } from "./CdsToastQueue/composables/useToastQueue.js";
@@ -161,6 +164,11 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   CdsModal,
   CdsNotification,
   CdsNotificationAlert,
+  CdsOtpField,
+  CdsOtpGroup,
+  CdsOtpInput,
+  CdsOtpInputSymbol,
+  CdsOtpSeparator,
   CdsOverlay,
   CdsPage,
   CdsPagination,
@@ -212,6 +220,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   CdsVirtualScrollItem,
   CssGridSymbol,
   EXPAND_COLUMN,
+  OtpInputPatterns,
   SELECTION_ALL,
   SELECTION_COLUMN,
   SELECTION_INVERT,
@@ -219,6 +228,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   allowedTypes,
   makeTableProps,
   useLazyKVMap,
+  useOtpInput,
   useSelection,
   useToastItem,
   useToastQueue

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/es/src/composables/useDisabled/index.js

@@ -1,2 +1,2 @@
-import "vue";
+
 //# sourceMappingURL=index.js.map

package/dist/es/src/composables/useDisabled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/es/src/composables/useLoader/index.js

@@ -1,2 +1,2 @@
-import "vue";
+
 //# sourceMappingURL=index.js.map