@profitliga/ui 1.2.90 → 2.0.1

package/dist/components/v2/InputSelect/InputSelectChip.vue2.js

@@ -0,0 +1,166 @@
+import { defineComponent as N, useModel as O, ref as y, useId as P, useTemplateRef as U, computed as b, watch as h, openBlock as m, createElementBlock as _, createVNode as g, unref as u, withCtx as E, createElementVNode as f, Fragment as q, renderList as H, mergeProps as $, toDisplayString as C, mergeModels as S, nextTick as j } from "vue";
+import { ChevronDown as z } from "@lucide/vue";
+import G from "../Popover/Popover.vue.js";
+import J from "../Radio/RadioMarker.vue.js";
+import { useTestId as Q } from "../shared/useTestId.util.js";
+const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__label" }, Z = ["aria-label", "aria-activedescendant"], ee = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], te = { class: "input-chip-list__label" }, re = /* @__PURE__ */ N({
+  __name: "InputSelectChip",
+  props: /* @__PURE__ */ S({
+    options: {},
+    width: {},
+    placeholder: {},
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    breakpointMobile: { default: "sm" },
+    testId: { default: void 0 }
+  }, {
+    modelValue: { default: void 0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ S(["select"], ["update:modelValue"]),
+  setup(o, { emit: R }) {
+    const i = o, V = R, r = O(o, "modelValue"), s = y(!1), d = `input-chip-list-${P()}`, k = Q(() => i.testId), p = U("listRef"), a = y(-1), B = b(
+      () => i.options.find((e) => e.value === r.value)
+    ), T = b(
+      () => B.value?.label ?? i.placeholder
+    ), A = b(
+      () => a.value === -1 ? void 0 : `${d}-option-${a.value}`
+    );
+    function v(e) {
+      const l = i.options[e];
+      return !!l && !l?.disabled;
+    }
+    function F() {
+      return i.options.findIndex((e, l) => v(l));
+    }
+    function w() {
+      for (let e = i.options.length - 1; e >= 0; e -= 1)
+        if (v(e)) return e;
+      return -1;
+    }
+    function x(e, l) {
+      const t = i.options.length;
+      if (t === 0) return -1;
+      let n = e;
+      for (let c = 0; c < t; c += 1)
+        if (n = (n + l + t) % t, v(n)) return n;
+      return -1;
+    }
+    function I(e = 20) {
+      j(() => {
+        if (!s.value) return;
+        const l = p.value;
+        l && (l.focus(), document.activeElement === l) || e > 0 && requestAnimationFrame(() => I(e - 1));
+      });
+    }
+    function K(e, l) {
+      l || (a.value = e);
+    }
+    function L(e) {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), a.value = x(a.value, 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), a.value = a.value === -1 ? w() : x(a.value, -1);
+          break;
+        case "Home":
+          e.preventDefault(), a.value = F();
+          break;
+        case "End":
+          e.preventDefault(), a.value = w();
+          break;
+        case "Enter":
+        case " ": {
+          const l = i.options[a.value];
+          if (!l) break;
+          e.preventDefault(), D(l);
+          break;
+        }
+      }
+    }
+    function D(e) {
+      e.disabled || (r.value = e.value, V("select", e), s.value = !1);
+    }
+    let M = null;
+    return h(s, (e) => {
+      e ? (M = document.activeElement, a.value = -1) : (a.value = -1, M?.focus());
+    }), h(p, (e) => {
+      e && s.value && I();
+    }), h(
+      () => i.disabled,
+      (e) => {
+        e && (s.value = !1);
+      }
+    ), (e, l) => (m(), _("div", W, [
+      g(u(G), {
+        open: s.value,
+        "onUpdate:open": l[0] || (l[0] = (t) => s.value = t),
+        width: o.width,
+        side: "bottom",
+        "side-offset": 4,
+        align: "start",
+        "align-offset": -5,
+        arrow: !1,
+        "breakpoint-mobile": o.breakpointMobile,
+        "trigger-has-popup": "listbox",
+        "trigger-controls": d
+      }, {
+        trigger: E(({ props: t }) => [
+          f("button", $({
+            type: "button",
+            class: "input-chip__button",
+            disabled: o.disabled
+          }, { ...t, ...u(k)("select-trigger") }), [
+            f("span", Y, C(T.value), 1),
+            g(u(z), {
+              class: "input-chip__arrow",
+              "stroke-width": 2,
+              "aria-hidden": "true"
+            })
+          ], 16, X)
+        ]),
+        default: E(() => [
+          f("div", {
+            id: d,
+            ref_key: "listRef",
+            ref: p,
+            role: "listbox",
+            tabindex: "0",
+            "aria-label": o.label,
+            "aria-activedescendant": A.value,
+            class: "input-chip-list",
+            onKeydown: L
+          }, [
+            (m(!0), _(q, null, H(o.options, (t, n) => (m(), _("div", $({
+              id: `${d}-option-${n}`,
+              key: t.value,
+              role: "option",
+              class: ["input-chip-list__option", {
+                "input-chip-list__option--selected": t.value === r.value,
+                "input-chip-list__option--active": a.value === n,
+                "input-chip-list__option--disabled": t.disabled
+              }],
+              "aria-selected": t.value === r.value,
+              "aria-disabled": t.disabled || void 0
+            }, { ref_for: !0 }, u(k)("select-option", t.value), {
+              onClick: (c) => D(t),
+              onMouseenter: (c) => K(n, t.disabled)
+            }), [
+              g(u(J), {
+                checked: t.value === r.value,
+                disabled: t.disabled,
+                state: a.value === n ? "hover" : "default"
+              }, null, 8, ["checked", "disabled", "state"]),
+              f("span", te, C(t.label), 1)
+            ], 16, ee))), 128))
+          ], 40, Z)
+        ]),
+        _: 1
+      }, 8, ["open", "width", "align-offset", "breakpoint-mobile"])
+    ]));
+  }
+});
+export {
+  re as default
+};

package/dist/components/v2/InputSelect/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InputSelect } from './InputSelect.vue';
+export type { InputSelectOption, InputSelectProps } from './InputSelect.types';
+export { InputSelect };

package/dist/components/v2/Message/Message.css

@@ -0,0 +1 @@
+.message[data-v-a0db1ef4]{--message-bg-color:transparent;--message-border-color:transparent;--message-icon-bg:transparent;--message-icon-shadow:transparent;--message-title-color:var(--theme-neutral-900);--message-text-color:var(--theme-neutral-900);background-color:var(--message-bg-color);border:.0625rem solid #0000;border-radius:.75rem;justify-content:flex-start;align-items:flex-start;gap:.75rem;width:100%;padding:1rem;display:flex}.message--bordered[data-v-a0db1ef4]{border-color:var(--message-border-color)}.message--compact[data-v-a0db1ef4]{align-items:center;min-height:2.75rem;padding:.375rem .75rem}.message__icon[data-v-a0db1ef4]{background-color:var(--message-icon-bg);width:2.75rem;height:2.75rem;color:var(--theme-neutral-0);box-shadow:-.0625rem .0625rem .625rem 0 var(--message-icon-shadow);opacity:.7;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem;display:flex;overflow:hidden}.message__icon[data-v-a0db1ef4] svg{width:1.75rem;height:1.75rem}.message__content[data-v-a0db1ef4]{flex-direction:column;flex:auto;justify-content:center;align-items:flex-start;gap:.25rem;min-width:0;display:flex}.message__title[data-v-a0db1ef4]{color:var(--message-title-color);overflow-wrap:break-word;font-size:1rem;font-weight:600;line-height:1.25rem}.message__text[data-v-a0db1ef4]{width:100%;color:var(--message-text-color);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}.message--small .message__icon[data-v-a0db1ef4]{width:2.25rem;height:2.25rem;box-shadow:-.0511rem .0511rem .5114rem 0 var(--message-icon-shadow);border-radius:.6136rem;padding:.4091rem}.message--small .message__icon[data-v-a0db1ef4] svg{width:1.4318rem;height:1.4318rem}.message--small .message__title[data-v-a0db1ef4]{font-size:.75rem;font-weight:700;line-height:1rem}.message--small .message__text[data-v-a0db1ef4]{font-size:.75rem;line-height:1rem}.message--info[data-v-a0db1ef4]{--message-bg-color:var(--theme-info-100);--message-border-color:var(--theme-info-200);--message-icon-bg:var(--theme-info-600);--message-icon-shadow:#02538fb3;--message-title-color:var(--theme-info-800);--message-text-color:var(--theme-info-700)}.message--success[data-v-a0db1ef4]{--message-bg-color:var(--theme-primary-50);--message-border-color:var(--theme-primary-75);--message-icon-bg:var(--theme-primary-600);--message-icon-shadow:#008925b3;--message-title-color:var(--theme-primary-800);--message-text-color:var(--theme-primary-700)}.message--warning[data-v-a0db1ef4]{--message-bg-color:var(--theme-warn-100);--message-border-color:var(--theme-warn-200);--message-icon-bg:var(--theme-warn-600);--message-icon-shadow:#d47d16b3;--message-title-color:var(--theme-warn-800);--message-text-color:var(--theme-warn-700)}.message--error[data-v-a0db1ef4]{--message-bg-color:var(--theme-error-50);--message-border-color:var(--theme-error-200);--message-icon-bg:var(--theme-error-600);--message-icon-shadow:#bd2429b3;--message-title-color:var(--theme-error-800);--message-text-color:var(--theme-error-700)}

package/dist/components/v2/Message/Message.types.d.ts

@@ -0,0 +1,34 @@
+export type MessageVariant = 'info' | 'success' | 'warning' | 'error';
+export type MessageSize = 'large' | 'small';
+export interface MessageProps {
+    /**
+     * Смысловой вариант уведомления — задаёт цветовую схему и иконку:
+     * info — Info, success — CircleCheck, warning — CircleAlert, error — Ban.
+     */
+    variant?: MessageVariant;
+    /**
+     * Размер: large — заголовок 16px и текст 14px, плашка иконки 44px;
+     * small — заголовок и текст 12px, плашка иконки 36px.
+     */
+    size?: MessageSize;
+    /** Заголовок. Можно заменить слотом `title`. */
+    title?: string;
+    /** Текст уведомления. Можно заменить слотом по умолчанию. */
+    text?: string;
+    /**
+     * Показывать цветную плашку с иконкой слева.
+     * Иконку внутри плашки можно заменить слотом `icon`.
+     */
+    icon?: boolean;
+    /** Обводка по контуру (в макете включена по умолчанию). */
+    bordered?: boolean;
+    /**
+     * Роль для скринридера. По умолчанию роли нет — сообщение считается
+     * статичной частью страницы. Задай её, если сообщение появляется в ответ
+     * на действие пользователя и должно быть объявлено:
+     * `status` — дождётся паузы, `alert` — перебьёт текущую озвучку.
+     */
+    role?: 'status' | 'alert';
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
+    testId?: string;
+}

package/dist/components/v2/Message/Message.vue.d.ts

@@ -0,0 +1,30 @@
+import { MessageProps, MessageVariant, MessageSize } from './Message.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        title?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<MessageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MessageProps> & Readonly<{}>, {
+    size: MessageSize;
+    title: string;
+    text: string;
+    variant: MessageVariant;
+    icon: boolean;
+    role: "status" | "alert";
+    testId: string;
+    bordered: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/v2/Message/Message.vue.js

@@ -0,0 +1,8 @@
+import './Message.css';
+import o from "./Message.vue2.js";
+/* empty css             */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a0db1ef4"]]);
+export {
+  s as default
+};

package/dist/components/v2/Message/Message.vue2.js

@@ -0,0 +1,69 @@
+import { defineComponent as B, useSlots as C, computed as a, openBlock as o, createElementBlock as l, mergeProps as r, unref as n, renderSlot as c, createBlock as y, resolveDynamicComponent as x, createCommentVNode as d, createElementVNode as I, createTextVNode as f, toDisplayString as v } from "vue";
+import { Ban as _, CircleAlert as $, CircleCheck as T, Info as b } from "@lucide/vue";
+import { useTestId as z } from "../shared/useTestId.util.js";
+const N = ["role"], S = { class: "message__content" }, A = /* @__PURE__ */ B({
+  __name: "Message",
+  props: {
+    variant: { default: "info" },
+    size: { default: "large" },
+    title: { default: void 0 },
+    text: { default: void 0 },
+    icon: { type: Boolean, default: !1 },
+    bordered: { type: Boolean, default: !0 },
+    role: { default: void 0 },
+    testId: { default: void 0 }
+  },
+  setup(t) {
+    const e = t, u = C(), s = z(() => e.testId), g = {
+      info: b,
+      success: T,
+      warning: $,
+      error: _
+    }, m = a(() => !!(e.title || u.title)), p = a(() => !!(e.text || u.default)), h = a(
+      () => e.size === "small" && !m.value && !e.icon
+    ), k = a(() => [
+      "message",
+      `message--${e.variant}`,
+      `message--${e.size}`,
+      {
+        "message--bordered": e.bordered,
+        "message--compact": h.value
+      }
+    ]);
+    return (i, V) => (o(), l("div", r({
+      class: k.value,
+      role: t.role
+    }, n(s)("root")), [
+      t.icon ? (o(), l("div", r({
+        key: 0,
+        class: "message__icon",
+        "aria-hidden": "true"
+      }, n(s)("icon")), [
+        c(i.$slots, "icon", {}, () => [
+          (o(), y(x(g[t.variant]), { "stroke-width": 2 }))
+        ], !0)
+      ], 16)) : d("", !0),
+      I("div", S, [
+        m.value ? (o(), l("p", r({
+          key: 0,
+          class: "message__title"
+        }, n(s)("title")), [
+          c(i.$slots, "title", {}, () => [
+            f(v(t.title), 1)
+          ], !0)
+        ], 16)) : d("", !0),
+        p.value ? (o(), l("p", r({
+          key: 1,
+          class: "message__text"
+        }, n(s)("text")), [
+          c(i.$slots, "default", {}, () => [
+            f(v(t.text), 1)
+          ], !0)
+        ], 16)) : d("", !0)
+      ])
+    ], 16, N));
+  }
+});
+export {
+  A as default
+};

package/dist/components/v2/Message/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Message } from './Message.vue';
+export type { MessageProps, MessageSize, MessageVariant } from './Message.types';
+export { Message };

package/dist/components/v2/OTPCode/OTPCode.css

@@ -0,0 +1 @@
+.otp-code[data-v-ff7dbb73]{--otp-cell-size:2.75rem;--otp-cell-radius:.75rem;--otp-border-color:var(--theme-neutral-border-default);--otp-text-color:var(--theme-neutral-text-body);--otp-label-color:var(--theme-neutral-text-title);--otp-support-color:var(--theme-neutral-text-caption);flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.otp-code__label[data-v-ff7dbb73]{width:100%;color:var(--otp-label-color);overflow-wrap:break-word;align-items:center;gap:.125rem;padding:.375rem .5rem;font-size:1rem;font-weight:400;line-height:1.25rem;display:flex}.otp-code__required[data-v-ff7dbb73]{color:var(--theme-error-500);flex-shrink:0}.otp-code__cells[data-v-ff7dbb73]{gap:.25rem;display:flex}.otp-code__cell[data-v-ff7dbb73]{box-sizing:border-box;width:var(--otp-cell-size);height:var(--otp-cell-size);font:inherit;color:var(--otp-text-color);text-align:center;background-color:var(--theme-neutral-0);border:.0625rem solid var(--otp-border-color);border-radius:var(--otp-cell-radius);transition:border-color var(--animation-duration-fast) ease;outline:none;padding:.5rem;font-size:1rem;font-weight:400;line-height:1.5rem}.otp-code__cell[data-v-ff7dbb73]:disabled{cursor:not-allowed;-webkit-text-fill-color:var(--otp-text-color);opacity:1}.otp-code__support[data-v-ff7dbb73]{color:var(--otp-support-color);overflow-wrap:break-word;padding:.25rem .5rem;font-size:.625rem;font-weight:400;line-height:normal}.otp-code:not(.otp-code--error):not(.otp-code--disabled) .otp-code__cell[data-v-ff7dbb73]:hover:not(:read-only){--otp-border-color:var(--theme-primary-300)}.otp-code:not(.otp-code--error):not(.otp-code--disabled) .otp-code__cell[data-v-ff7dbb73]:focus{--otp-border-color:var(--theme-primary-500)}.otp-code--error[data-v-ff7dbb73]{--otp-border-color:var(--theme-error-500);--otp-support-color:var(--theme-error-500)}.otp-code--disabled[data-v-ff7dbb73]{--otp-border-color:var(--theme-neutral-border-disabled);--otp-text-color:var(--theme-neutral-400);--otp-label-color:var(--theme-neutral-400);--otp-support-color:var(--theme-neutral-400)}

package/dist/components/v2/OTPCode/OTPCode.types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * `numeric` — только цифры (код из СМС, основной сценарий): нецифровые
+ * символы отбрасываются и при вводе, и при вставке.
+ * `text` — любые символы без пробелов.
+ */
+export type OTPCodeMode = 'numeric' | 'text';
+export interface OTPCodeProps {
+    /** Количество ячеек. В макете нарисовано пять. */
+    length?: number;
+    mode?: OTPCodeMode;
+    /** Подпись над полем. Можно заменить слотом `label`. */
+    label?: string;
+    /**
+     * Доступное имя группы ячеек для скринридера. Нужно, когда видимой
+     * подписи нет — иначе группа останется безымянной.
+     */
+    ariaLabel?: string;
+    /** Пояснение под полем. Можно заменить слотом `support`. */
+    supportText?: string;
+    /**
+     * Текст ошибки. Показывается вместо `supportText` только при `error: true`,
+     * поэтому его можно держать в пропе постоянно.
+     */
+    errorMessage?: string;
+    /** Состояние ошибки: красит рамку ячеек и показывает `errorMessage`. */
+    error?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    /** Ставить фокус в первую ячейку при монтировании. */
+    autofocus?: boolean;
+    /** Базовое `name` ячеек — к нему добавляется порядковый номер. */
+    name?: string;
+    /** Собственный `id` первой ячейки. По умолчанию генерируется. */
+    id?: string;
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
+    testId?: string;
+}
+export interface OTPCodeExpose {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}

package/dist/components/v2/OTPCode/OTPCode.vue.d.ts

@@ -0,0 +1,55 @@
+import { OTPCodeProps, OTPCodeMode } from './OTPCode.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = OTPCodeProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+        support?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    blur: (index: number, event: FocusEvent) => any;
+    change: (value: string) => any;
+    focus: (index: number, event: FocusEvent) => any;
+    complete: (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((index: number, event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((index: number, event: FocusEvent) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    length: number;
+    label: string;
+    disabled: boolean;
+    required: boolean;
+    id: string;
+    error: boolean;
+    readonly: boolean;
+    name: string;
+    mode: OTPCodeMode;
+    errorMessage: string;
+    ariaLabel: string;
+    testId: string;
+    supportText: string;
+    autofocus: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/v2/OTPCode/OTPCode.vue.js

@@ -0,0 +1,8 @@
+import './OTPCode.css';
+import o from "./OTPCode.vue2.js";
+/* empty css             */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ff7dbb73"]]);
+export {
+  p as default
+};

package/dist/components/v2/OTPCode/OTPCode.vue2.js

@@ -0,0 +1,216 @@
+import { defineComponent as U, useModel as W, useSlots as X, useId as Y, ref as Z, computed as c, onMounted as x, openBlock as f, createElementBlock as v, mergeProps as p, unref as m, renderSlot as P, createTextVNode as A, toDisplayString as S, createCommentVNode as I, createElementVNode as ee, Fragment as te, renderList as le, mergeModels as T } from "vue";
+import { useTestId as ae } from "../shared/useTestId.util.js";
+const oe = ["id", "for"], re = ["aria-labelledby", "aria-label", "aria-describedby"], ue = ["id", "value", "name", "inputmode", "autocomplete", "disabled", "readonly", "required", "aria-label", "aria-invalid", "onInput", "onKeydown", "onPaste", "onFocus", "onBlur"], se = ["id"], ie = /* @__PURE__ */ U({
+  inheritAttrs: !1,
+  __name: "OTPCode",
+  props: /* @__PURE__ */ T({
+    length: { default: 5 },
+    mode: { default: "numeric" },
+    label: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    supportText: { default: void 0 },
+    errorMessage: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    autofocus: { type: Boolean, default: !1 },
+    name: { default: void 0 },
+    id: { default: void 0 },
+    testId: { default: void 0 }
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ T(["change", "complete", "focus", "blur"], ["update:modelValue"]),
+  setup(u, { expose: K, emit: N }) {
+    const a = u, g = N, s = W(u, "modelValue"), M = X(), i = ae(() => a.testId), B = Y(), y = Z([]), C = c(() => `${B}-label`), q = c(() => `${B}-support`), w = (e) => e === 0 && a.id ? a.id : `${B}-cell-${e + 1}`, D = c(() => !!(a.label || M.label)), V = c(
+      () => a.error && a.errorMessage ? a.errorMessage : a.supportText
+    ), E = c(
+      () => !!(V.value || M.support)
+    ), R = c(
+      () => E.value ? q.value : void 0
+    ), z = c(() => {
+      const e = [...s.value].slice(0, a.length);
+      return Array.from(
+        { length: a.length },
+        (t, o) => e[o] ?? ""
+      );
+    }), b = c(() => !a.disabled && !a.readonly), _ = c(() => [
+      "otp-code",
+      {
+        "otp-code--error": a.error,
+        "otp-code--disabled": a.disabled,
+        "otp-code--readonly": a.readonly
+      }
+    ]);
+    function j(e) {
+      return `${a.mode === "numeric" ? "Цифра" : "Символ"} ${e + 1} из ${a.length}`;
+    }
+    function H(e, t) {
+      y.value[t] = e;
+    }
+    function F(e) {
+      const t = e.replace(/\s+/g, "");
+      return a.mode === "numeric" ? t.replace(/\D/g, "") : t;
+    }
+    let $ = !1;
+    function k(e) {
+      const t = e.slice(0, a.length).join("");
+      return t === s.value || (s.value = t, g("change", t), t.length === a.length && g("complete", t)), t;
+    }
+    function n(e, t = s.value) {
+      const o = Math.min(t.length, a.length - 1), l = Math.max(0, Math.min(e, o)), r = y.value[l];
+      $ = !0, r?.focus(), r?.select(), $ = !1;
+    }
+    function d(e = s.value) {
+      y.value.forEach((t, o) => {
+        const l = e[o] ?? "";
+        t && t.value !== l && (t.value = l);
+      });
+    }
+    function L(e, t) {
+      const o = [...s.value];
+      for (let h = 0; h < t.length && e + h < a.length; h += 1)
+        o[e + h] = t[h];
+      const l = k(o);
+      d(l);
+      const r = e + t.length;
+      r < a.length && n(r, l);
+    }
+    function O(e, t) {
+      if (!b.value) {
+        d();
+        return;
+      }
+      const o = F(t.target.value);
+      if (!o) {
+        d();
+        return;
+      }
+      L(e, o);
+    }
+    function G(e, t) {
+      switch (t.key) {
+        case "Backspace": {
+          if (!b.value) return;
+          t.preventDefault();
+          const o = [...s.value], l = o[e] ? e : e - 1;
+          if (l < 0) return;
+          o.splice(l, 1);
+          const r = k(o);
+          d(r), n(l, r);
+          break;
+        }
+        case "Delete": {
+          if (!b.value) return;
+          t.preventDefault();
+          const o = [...s.value];
+          if (!o[e]) return;
+          o.splice(e, 1);
+          const l = k(o);
+          d(l), n(e, l);
+          break;
+        }
+        case "ArrowLeft":
+          t.preventDefault(), n(e - 1);
+          break;
+        case "ArrowRight":
+          t.preventDefault(), n(e + 1);
+          break;
+        case "Home":
+          t.preventDefault(), n(0);
+          break;
+        case "End":
+          t.preventDefault(), n(a.length - 1);
+          break;
+      }
+    }
+    function J(e, t) {
+      if (!b.value) return;
+      t.preventDefault();
+      const o = F(t.clipboardData?.getData("text") ?? "");
+      o && L(e, o);
+    }
+    function Q(e, t) {
+      if (g("focus", e, t), !$ && e > s.value.length) {
+        n(s.value.length);
+        return;
+      }
+      t.target.select();
+    }
+    return x(() => {
+      a.autofocus && b.value && n(0);
+    }), K({
+      focus: () => n(s.value.length),
+      blur: () => y.value.forEach((e) => e?.blur()),
+      clear: () => {
+        const e = k([]);
+        d(e), n(0, e);
+      }
+    }), (e, t) => (f(), v("div", p({ class: _.value }, { ...e.$attrs, ...m(i)("root") }), [
+      D.value ? (f(), v("label", p({
+        key: 0,
+        id: C.value,
+        class: "otp-code__label",
+        for: w(0)
+      }, m(i)("label")), [
+        P(e.$slots, "label", {}, () => [
+          A(S(u.label), 1)
+        ], !0),
+        u.required ? (f(), v("span", p({
+          key: 0,
+          class: "otp-code__required",
+          "aria-hidden": "true"
+        }, m(i)("required")), "*", 16)) : I("", !0)
+      ], 16, oe)) : I("", !0),
+      ee("div", p({
+        class: "otp-code__cells",
+        role: "group",
+        "aria-labelledby": D.value ? C.value : void 0,
+        "aria-label": D.value ? void 0 : u.ariaLabel,
+        "aria-describedby": R.value
+      }, m(i)("cells")), [
+        (f(!0), v(te, null, le(z.value, (o, l) => (f(), v("input", p({
+          id: w(l),
+          key: l,
+          ref_for: !0,
+          ref: (r) => H(r, l),
+          class: "otp-code__cell",
+          type: "text",
+          value: o,
+          name: u.name ? `${u.name}-${l + 1}` : void 0,
+          inputmode: u.mode === "numeric" ? "numeric" : "text",
+          autocomplete: l === 0 ? "one-time-code" : "off",
+          autocapitalize: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          maxlength: "1",
+          disabled: u.disabled,
+          readonly: u.readonly,
+          required: u.required,
+          "aria-label": j(l),
+          "aria-invalid": u.error || void 0
+        }, { ref_for: !0 }, m(i)("cell", l + 1), {
+          onInput: (r) => O(l, r),
+          onKeydown: (r) => G(l, r),
+          onPaste: (r) => J(l, r),
+          onFocus: (r) => Q(l, r),
+          onBlur: (r) => g("blur", l, r)
+        }), null, 16, ue))), 128))
+      ], 16, re),
+      E.value ? (f(), v("p", p({
+        key: 1,
+        id: q.value,
+        class: "otp-code__support"
+      }, m(i)("support")), [
+        P(e.$slots, "support", {}, () => [
+          A(S(V.value), 1)
+        ], !0)
+      ], 16, se)) : I("", !0)
+    ], 16));
+  }
+});
+export {
+  ie as default
+};

package/dist/components/v2/OTPCode/index.d.ts

@@ -0,0 +1,3 @@
+import { default as OTPCode } from './OTPCode.vue';
+export type { OTPCodeExpose, OTPCodeMode, OTPCodeProps } from './OTPCode.types';
+export { OTPCode };

package/dist/components/v2/Pagination/Pagination.css

@@ -0,0 +1 @@
+.pagination[data-v-bfe92b1d]{--pagination-cell-size:32px;--pagination-gap:8px;--pagination-font-size:.75rem;align-items:center;gap:16px;display:flex}.pagination--small[data-v-bfe92b1d]{--pagination-cell-size:24px;--pagination-gap:4px}.pagination--with-page-size[data-v-bfe92b1d]{justify-content:space-between;width:100%}.pagination__list[data-v-bfe92b1d]{align-items:center;gap:var(--pagination-gap);margin:0;padding:0;list-style:none;display:flex}.pagination__cell[data-v-bfe92b1d]{display:flex}.pagination__item[data-v-bfe92b1d],.pagination__arrow[data-v-bfe92b1d],.pagination__ellipsis[data-v-bfe92b1d]{min-width:var(--pagination-cell-size);height:var(--pagination-cell-size);font:inherit;color:var(--theme-neutral-text-body);cursor:pointer;transition:background-color var(--animation-duration-fast) ease-in-out, color var(--animation-duration-fast) ease-in-out;background:0 0;border:none;border-radius:100px;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.pagination__item[data-v-bfe92b1d]:disabled,.pagination__arrow[data-v-bfe92b1d]:disabled,.pagination__ellipsis[data-v-bfe92b1d]:disabled{cursor:not-allowed}.pagination__item[data-v-bfe92b1d]:focus-visible,.pagination__arrow[data-v-bfe92b1d]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.pagination__item[data-v-bfe92b1d]{font-weight:400;font-size:var(--pagination-font-size);padding:0;line-height:1rem}.pagination__item[data-v-bfe92b1d]:hover:not(:disabled):not(.pagination__item--active){background-color:var(--theme-neutral-300_40)}.pagination__item--active[data-v-bfe92b1d]{background-color:var(--theme-primary-500);color:var(--theme-neutral-text-negative);cursor:default;font-weight:500}.pagination__item[data-v-bfe92b1d]:disabled{color:var(--theme-neutral-400)}.pagination__item--active[data-v-bfe92b1d]:disabled{background-color:var(--theme-primary-300);color:var(--theme-neutral-text-negative)}.pagination__arrow[data-v-bfe92b1d]:hover:not(:disabled){color:var(--theme-primary-300)}.pagination__arrow[data-v-bfe92b1d]:disabled{color:var(--theme-neutral-icon-disabled)}.pagination__ellipsis[data-v-bfe92b1d]{font-size:.875rem;line-height:var(--pagination-cell-size);letter-spacing:2px;text-indent:2px;cursor:default;-webkit-user-select:none;user-select:none}.pagination--disabled .pagination__ellipsis[data-v-bfe92b1d]{color:var(--theme-neutral-400)}.pagination__icon[data-v-bfe92b1d]{flex-shrink:0;width:18px;height:18px}