@feugene/granularity 0.47.0 → 0.49.0

package/dist/types/components/GrAvatar/GrAvatar.vue.d.ts

@@ -16,6 +16,14 @@ export interface GrAvatarProps {
     /** Имя участника: даёт инициалы и доступное имя аватара. */
     name?: string;
     shape?: GrAvatarShape;
+    /**
+     * Красить фон по имени: одинаковое имя всегда даёт одинаковый цвет.
+     *
+     * Выключен по умолчанию — серый аватар это осознанный нейтральный дефолт, а
+     * цветной может спорить с оформлением продукта. Палитру задаёт тема
+     * (`--gr-avatar-N-bg`/`-fg`), компонент только выбирает слот.
+     */
+    autoColor?: boolean;
     /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */
     status?: GrAvatarStatus;
 }
@@ -30,6 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     alt: undefined;
     name: undefined;
     shape: undefined;
+    autoColor: undefined;
     status: undefined;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAvatarProps>, {
     size: undefined;
@@ -38,10 +47,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     alt: undefined;
     name: undefined;
     shape: undefined;
+    autoColor: undefined;
     status: undefined;
 }>>> & Readonly<{}>, {
     size: GrSizeWithPx;
     shape: GrAvatarShape;
+    autoColor: boolean;
     status: GrAvatarStatus;
     name: string;
     alt: string;

package/dist/types/components/GrAvatar/defaults.d.ts

@@ -8,6 +8,7 @@ import type { GrAvatarShape } from './grAvatarStyles';
 export interface GrAvatarConfigurableProps {
     size: GrComponentSize;
     shape: GrAvatarShape;
+    autoColor: boolean;
 }
 declare module '../../composables/useGrComponentConfig' {
     interface GrComponentDefaultsRegistry {

package/dist/types/components/GrAvatar/grAvatarStyles.d.ts

@@ -3,7 +3,32 @@ export type GrAvatarShape = 'circle' | 'square';
 export declare const GR_AVATAR_STATUSES: readonly ["online", "offline", "busy", "away"];
 export type GrAvatarStatus = typeof GR_AVATAR_STATUSES[number];
 export declare const shapes: Record<GrAvatarShape, string>;
-export declare const rootBaseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden border border-[var(--gr-brd)] bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] font-700";
+export declare const rootBaseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden border border-[var(--gr-brd)] font-700";
+/** Цвет по умолчанию. Отделён от базы, иначе он спорил бы с автоцветом порядком правил. */
+export declare const rootNeutralClass = "bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]";
+/**
+ * Палитра автоцвета: подложка и инициалы одним классом на слот.
+ *
+ * Цвета сюда не попадают — только имена слотов. Что стоит за слотом, решает
+ * тема (`--gr-avatar-N-bg`/`-fg` ссылаются на пары `-light`/`-text` тонов), и
+ * приложение вправе переопределить любой, не трогая компонент.
+ *
+ * Классы статические: UnoCSS сканирует литералы, и собранный в рантайме
+ * `bg-[var(--gr-avatar-${n}-bg)]` в CSS не превратился бы.
+ */
+export declare const avatarToneClasses: string[];
+/**
+ * Слот палитры по имени: тот же человек — тот же цвет.
+ *
+ * Стабильность здесь и есть смысл функции: цвет не должен меняться ни между
+ * сессиями, ни между сервером и клиентом, иначе аватар мигает на гидрации, а
+ * узнаваемость — то, ради чего автоцвет и заводят, — теряется. Отсюда обычный
+ * детерминированный перебор кодов, а не хеш из окружения.
+ *
+ * `>>> 0` обязателен: без него сумма уходит в отрицательные на длинных именах,
+ * и остаток от деления даёт отрицательный индекс.
+ */
+export declare function avatarToneIndex(name: string): number;
 /** Индикатор статуса: кольцо цветом фона отделяет точку от самого аватара. */
 export declare const statusDotClass = "absolute bottom-0 right-0 block h-1/4 w-1/4 min-h-2 min-w-2 rounded-[var(--gr-radius-full)] ring-2 ring-[var(--gr-bg)]";
 export declare const statusToneClass: Record<GrAvatarStatus, string>;

package/dist/types/components/GrBadge/GrBadge.vue.d.ts

@@ -1,10 +1,21 @@
 export type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
-import { type GrBadgeRadius, type GrBadgeSize, type GrBadgeTone } from './grBadgeStyles';
+import { type GrBadgeDotTone, type GrBadgeRadius, type GrBadgeSize, type GrBadgeTone } from './grBadgeStyles';
 export interface GrBadgeProps {
     tone?: GrBadgeTone;
     dark?: boolean;
     size?: GrBadgeSize;
     radius?: GrBadgeRadius;
+    /**
+     * Точка-маркер перед подписью: «● Активен».
+     *
+     * Имя тона красит маркер отдельно от плашки — ради пары «тихая плашка +
+     * цветной маркер», из-за которой паттерн и существует. `true` берёт тон
+     * самого бейджа.
+     *
+     * На заливке (`dark`) маркер всегда цвета текста: тон там слился бы с
+     * подложкой, взятой из того же слоя.
+     */
+    dot?: GrBadgeDotTone | boolean;
 }
 type __VLS_Slots = {
     /** Содержимое метки. */
@@ -26,16 +37,19 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     dark: boolean;
     size: undefined;
     radius: undefined;
+    dot: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBadgeProps>, {
     tone: undefined;
     dark: boolean;
     size: undefined;
     radius: undefined;
+    dot: boolean;
 }>>> & Readonly<{}>, {
     tone: GrBadgeTone;
     size: GrBadgeSize;
     radius: GrBadgeRadius;
     dark: boolean;
+    dot: GrBadgeDotTone | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/components/GrBadge/grBadgeStyles.d.ts

@@ -1,6 +1,22 @@
 import type { GrComponentSize } from '../shared/sizes';
 import type { GrTone } from '../shared/tones';
 export type GrBadgeTone = GrTone;
+/**
+ * Тон маркера — отдельным литеральным перечислением, а не `GrTone`.
+ *
+ * Компилятор SFC выводит рантайм-типы пропов из TypeScript, но `GrTone` это
+ * `typeof GR_TONES[number]`, и развернуть его в конструкторы он не умеет. У
+ * `dot?: GrTone | boolean` из объединения выживал один `Boolean`, и строковый
+ * тон отбраковывался предупреждением Vue у каждого потребителя — при том, что
+ * компонент работал. Литеральное объединение разрешается и даёт
+ * `type: [Boolean, String]`; так же написан `showTooltip` у `GrSlider`.
+ *
+ * От расхождения с `GR_TONES` держит `assertDotToneCoversTones` ниже: списки
+ * обязаны совпадать в обе стороны, иначе `vue-tsc` роняет сборку.
+ */
+export type GrBadgeDotTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'azure';
+type AssertMutual<A, B> = [A] extends [B] ? ([B] extends [A] ? true : never) : never;
+export declare const assertDotToneCoversTones: AssertMutual<GrBadgeDotTone, GrTone>;
 export type GrBadgeSize = GrComponentSize;
 export type GrBadgeRadius = 'square' | 'semi' | 'round';
 export declare const sizeClassBySize: Record<GrBadgeSize, string>;
@@ -42,3 +58,44 @@ export declare function grBadgeClass(options: {
     size: GrBadgeSize;
     radius: GrBadgeRadius;
 }): string;
+/**
+ * Точка-маркер перед подписью.
+ *
+ * Кружок мельче иконки и растёт медленнее: маркер обязан оставаться маркером,
+ * а не превращаться в третий элемент строки. Повтор значений на концах шкалы —
+ * тот же приём, что у `badgeIconSizeClassBySize`.
+ */
+export declare const badgeDotSizeClassBySize: Record<GrBadgeSize, string>;
+/** Маркер не жмётся: подпись бейджа не переносится, сжиматься нечему. */
+export declare const badgeDotClass = "shrink-0 rounded-[var(--gr-radius-full)]";
+/**
+ * Маркер на мягкой подложке красится **тем же покомпонентным слоем**, что и
+ * заливка filled-бейджа, и это не экономия на токенах.
+ *
+ * Роль тона напрямую здесь не работает ни в одном виде, и обе ветки измерены:
+ * `--gr-{tone}` в светлой теме — яркая заливка под тёмный текст, как маркер она
+ * не берёт 3:1 **ни на одной** подложке (`success` 2.06–2.32, `warning`
+ * 2.27–2.56); `--gr-{tone}-solid` берёт светлую тему и заваливает тёмную
+ * (до 1.37). Слой `--gr-badge-{tone}-bg` как раз и означает «насыщенный вес,
+ * который читается в этой теме»: `-solid` в светлой, роль тона в тёмной.
+ *
+ * На нём проходят все 128 пар «тон маркера × тон бейджа × тема», включая
+ * одноимённую, — поэтому булев `dot` берёт тон самого бейджа, а не отдельный
+ * цвет. Гейт — `__tests__/grBadgeContrast.test.ts`.
+ */
+export declare const badgeDotToneClass: Record<GrBadgeTone, string>;
+/**
+ * Маркер на **заливке** — цветом текста бейджа.
+ *
+ * Тон здесь не годится по построению: подложка filled-бейджа сама берётся из
+ * `--gr-badge-{tone}-bg`, и маркер того же тона слился бы с ней в один цвет.
+ * `currentColor` равен тексту бейджа, а он поверен на AA 4.5:1 — то есть
+ * заведомо проходит порог для графики.
+ */
+export declare const badgeDotCurrentColorClass = "bg-[currentColor]";
+export declare function badgeDotClassFor(options: {
+    tone: GrBadgeTone;
+    dark: boolean;
+    size: GrBadgeSize;
+}): string;
+export {};

package/dist/types/components/GrBadge/index.d.ts

@@ -2,6 +2,6 @@ export { default } from './GrBadge.vue';
 export { default as GrBadge } from './GrBadge.vue';
 export { grBadgeConfig } from './config';
 export type { GrBadgeConfigurableProps } from './defaults';
-export type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
+export type { GrBadgeDotTone, GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
 export { grBadgeSafelist } from './safelist';
 export type { GrBadgeProps } from './GrBadge.vue';

package/dist/types/components/GrDataTable/GrDataTable.vue.d.ts

@@ -150,6 +150,31 @@ export interface GrDataTableProps<TRow extends Record<string, unknown> = Record<
      * Не заданы — ширины компонент помнит сам.
      */
     columnWidths?: Record<string, number>;
+    /**
+     * Второй ярус строки: колонка с кнопкой раскрытия и блок подробностей под
+     * строкой. Содержимое рисует слот `#detail`.
+     */
+    expandable?: boolean;
+    /** Контролируемый список раскрытых ключей (`v-model:expandedKeys`). */
+    expandedKeys?: Array<string | number>;
+    /** У какой строки есть второй ярус. Остальные кнопки не получают. */
+    expandableRow?: (row: TRow) => boolean;
+    /**
+     * Подгрузка подробностей в момент раскрытия. Без неё содержимое берётся из
+     * самой строки. `signal` обязателен: строку сворачивают чаще, чем ждут.
+     */
+    loadDetail?: (row: TRow, signal: AbortSignal) => Promise<unknown>;
+    /** Раскрыта не больше одной строки. */
+    accordion?: boolean;
+    /**
+     * Рисовать ли служебную колонку с собственной кнопкой раскрытия.
+     *
+     * `false` — колонки нет, и раскрытием управляет разметка потребителя: слоты
+     * ячеек получают `expanded` и `toggleExpand`, чтобы кнопку можно было
+     * поставить в свой столбец действий рядом с остальными. Тогда `aria-expanded`
+     * и доступное имя ложатся на неё же — компоненту их вешать не на что.
+     */
+    expandColumn?: boolean;
 }
 export interface GrDataTableEmits<TRow extends Record<string, unknown> = Record<string, unknown>> {
     (e: 'update:sortKey', value: string): void;
@@ -175,10 +200,32 @@ export interface GrDataTableEmits<TRow extends Record<string, unknown> = Record<
         key: string;
         width: number;
     }): void;
+    (e: 'update:expandedKeys', value: Array<string | number>): void;
+    (e: 'expand', payload: {
+        row: TRow;
+        key: string | number;
+    }): void;
+    (e: 'collapse', payload: {
+        row: TRow;
+        key: string | number;
+    }): void;
+    (e: 'detailLoadError', payload: {
+        row: TRow;
+        key: string | number;
+        error: unknown;
+    }): void;
 }
 declare const __VLS_export: <TRow extends Record<string, unknown> = Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & __VLS_PrettifyLocal<GrDataTableProps<TRow> & {
+        onCollapse?: ((payload: {
+            row: TRow;
+            key: string | number;
+        }) => any) | undefined;
         "onUpdate:selected"?: ((value: (string | number)[]) => any) | undefined;
+        onExpand?: ((payload: {
+            row: TRow;
+            key: string | number;
+        }) => any) | undefined;
         "onUpdate:sortKey"?: ((value: string) => any) | undefined;
         "onUpdate:sortDir"?: ((value: GrDataTableSortDir) => any) | undefined;
         onSortChange?: ((value: {
@@ -201,6 +248,12 @@ declare const __VLS_export: <TRow extends Record<string, unknown> = Record<strin
             key: string;
             width: number;
         }) => any) | undefined;
+        "onUpdate:expandedKeys"?: ((value: (string | number)[]) => any) | undefined;
+        onDetailLoadError?: ((payload: {
+            row: TRow;
+            key: string | number;
+            error: unknown;
+        }) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -213,6 +266,12 @@ declare const __VLS_export: <TRow extends Record<string, unknown> = Record<strin
         clearSort: () => void;
         /** Отметить/снять все выбираемые строки. */
         toggleAll: () => void;
+        /**
+         * Сбросить загруженные подробности: у одной строки либо у всех.
+         * Нужен, когда запись изменилась на сервере, — само по себе раскрытие
+         * держит загруженное, пока строка жива.
+         */
+        invalidateDetail: (key?: import("./composables/useDataTableExpansion").GrDataTableRowKey) => void;
     }>) => void;
     attrs: any;
     slots: {

package/dist/types/components/GrDataTable/composables/useDataTableExpansion.d.ts

@@ -0,0 +1,46 @@
+import type { ComputedRef } from 'vue';
+export type GrDataTableDetailState = 'idle' | 'loading' | 'error' | 'ready';
+export type GrDataTableRowKey = string | number;
+/** Подгрузка подробностей строки. `signal` обязателен: строку сворачивают чаще, чем ждут. */
+export type GrDataTableLoadDetail<TRow> = (row: TRow, signal: AbortSignal) => Promise<unknown>;
+/**
+ * Раскрытие строк `GrDataTable`: состояние второго яруса и его подгрузка.
+ *
+ * Всё хранится **по ключу строки**, а не по индексу: сортировка и смена
+ * страницы переставляют строки, и привязка к позиции показывала бы подробности
+ * соседа.
+ *
+ * Асинхронность здесь по образцу `GrAutocomplete/useRemoteOptions`, а не
+ * `useTree`: у дерева ленивая загрузка живёт колбэком без пути ошибки — не
+ * позвал потребитель `resolve`, и узел грузится вечно. Строка обязана уметь
+ * показать отказ и дать повтор.
+ */
+export interface UseDataTableExpansionOptions<TRow extends Record<string, unknown>> {
+    /** Контролируемый список. `undefined` — состояние помнит компонент. */
+    expandedKeys: () => GrDataTableRowKey[] | undefined;
+    /** Идентичность набора: её смена сбрасывает кэш подробностей. */
+    rows: () => TRow[];
+    expandableRow: () => ((row: TRow) => boolean) | undefined;
+    loadDetail: () => GrDataTableLoadDetail<TRow> | undefined;
+    /** Раскрыта не больше одной строки. */
+    accordion: () => boolean;
+    rowKeyValue: (row: TRow) => GrDataTableRowKey;
+    onExpandedChange: (keys: GrDataTableRowKey[]) => void;
+    onExpand: (row: TRow, key: GrDataTableRowKey) => void;
+    onCollapse: (row: TRow, key: GrDataTableRowKey) => void;
+    onDetailLoadError: (row: TRow, key: GrDataTableRowKey, error: unknown) => void;
+}
+export interface DataTableExpansion<TRow extends Record<string, unknown>> {
+    expandedKeys: ComputedRef<Set<GrDataTableRowKey>>;
+    isRowExpandable: (row: TRow) => boolean;
+    isRowExpanded: (row: TRow) => boolean;
+    toggleRow: (row: TRow) => void;
+    collapseAll: () => void;
+    detailStateOf: (row: TRow) => GrDataTableDetailState;
+    detailDataOf: (row: TRow) => unknown;
+    /** Повтор после отказа — и он же ручной перезапрос. */
+    retryDetail: (row: TRow) => void;
+    /** Сбросить загруженное: у ключа либо целиком. */
+    invalidateDetail: (key?: GrDataTableRowKey) => void;
+}
+export declare function useDataTableExpansion<TRow extends Record<string, unknown>>(options: UseDataTableExpansionOptions<TRow>): DataTableExpansion<TRow>;

package/dist/types/components/GrDataTable/grDataTableStyles.d.ts

@@ -72,3 +72,26 @@ export declare const headerGaps: Record<GrDataTableSize, string>;
 export declare const spinnerSizes: Record<GrDataTableSize, string>;
 /** Стрелка сортировки берёт размер из шкалы `GrIcon` (`xs…lg` → `14…20px`). */
 export declare const sortIconSizes: Record<GrDataTableSize, GrComponentSize>;
+/**
+ * Второй ярус строки: подробности под ней.
+ *
+ * Фон мягче строки набора, а не ярче: подробности обязаны читаться как
+ * вложенное в строку, а не как следующая строка. Акцентная полоса слева
+ * связывает деталь с её строкой, когда между ними уже прокрутили.
+ */
+export declare const detailRowClass = "bg-[var(--gr-datatable-detail-bg,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+export declare const detailCellClass = "border-t border-[var(--gr-brd)] border-l-2 border-l-[var(--gr-datatable-detail-accent,var(--gr-primary))]";
+/** Содержимое липнет к левому краю: иначе при горизонтальной прокрутке его не видно. */
+export declare const detailContentClass = "sticky left-0";
+export declare const detailPaddings: Record<GrDataTableSize, string>;
+/** Колонка кнопки раскрытия — той же ширины, что колонка выбора: шапка не должна съезжать. */
+export declare const expandColumnWidths: Record<"xs" | "sm" | "md" | "lg", string>;
+export declare const expandButtonClass = "inline-flex items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+ * Поворот шеврона. Своего `motion-reduce:` здесь нет намеренно: движение пакет
+ * гасит одним глобальным блоком в `base.css`, а под `presetMini` этот вариант
+ * вдобавок не генерирует CSS вовсе (`docs/motion.md`).
+ */
+export declare const expandIconClass = "h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]";
+export declare const expandIconOpenClass = "rotate-90";
+export declare const detailErrorClass = "flex flex-wrap items-center gap-2 text-[var(--gr-invalid-text)]";

package/dist/types/components/GrOtpInput/GrOtpInput.vue.d.ts

@@ -0,0 +1,164 @@
+import { type GrOtpInputSize } from './grOtpInputStyles';
+import { type GrOtpInputType } from './otpValue';
+export type { GrOtpInputSize } from './grOtpInputStyles';
+export type { GrOtpInputType } from './otpValue';
+export interface GrOtpInputProps {
+    /** Код целиком, без разделителей. */
+    modelValue?: string;
+    /** Число ячеек. */
+    length?: number;
+    /** Допустимый алфавит и раскладка мобильной клавиатуры. */
+    type?: GrOtpInputType;
+    /** Свой алфавит регуляркой на **один символ**. Перекрывает `type`. */
+    pattern?: string;
+    /** Разбивка на группы: `[3, 3]` рисует `123 – 456`. Сумма обязана равняться `length`. */
+    groups?: number[];
+    /** Точки вместо символов — сценарий PIN. На `modelValue` не влияет. */
+    masked?: boolean;
+    /** Знак в пустой ячейке. */
+    placeholder?: string;
+    size?: GrOtpInputSize;
+    autofocus?: boolean;
+    /** `autocomplete="one-time-code"`: код из SMS подставляется на iOS и macOS. */
+    oneTimeCode?: boolean;
+    /**
+     * Приём кода из SMS на Android через WebOTP. Выключен: требует HTTPS и
+     * особого хвоста в тексте сообщения, который добавляет бэкенд.
+     */
+    webOtp?: boolean;
+    /** Имя поля для нативной отправки формы. */
+    name?: string;
+    /** `id` формы, если поле лежит вне неё. */
+    form?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+}
+export interface GrOtpInputEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    /** Код набран целиком. Точка автосабмита. */
+    (e: 'complete', value: string): void;
+}
+type __VLS_Slots = {
+    /** Своё оформление ячейки. Размер и рамку по-прежнему держит компонент. */
+    cell?: (props: {
+        char: string;
+        index: number;
+        active: boolean;
+        filled: boolean;
+        masked: boolean;
+    }) => any;
+    /** Знак между группами. По умолчанию — тире. */
+    separator?: (props: {
+        index: number;
+    }) => any;
+};
+declare function focus(): void;
+declare function blur(): void;
+/** Штатный сценарий: сервер отверг код, поле чистится и снова ждёт ввода. */
+declare function clear(): void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrOtpInputProps>, {
+    modelValue: string;
+    length: undefined;
+    type: string;
+    pattern: undefined;
+    groups: undefined;
+    masked: undefined;
+    placeholder: string;
+    size: undefined;
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: boolean;
+    name: undefined;
+    form: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    ariaLabel: undefined;
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+    clear: typeof clear;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+    change: (value: string) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+    complete: (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrOtpInputProps>, {
+    modelValue: string;
+    length: undefined;
+    type: string;
+    pattern: undefined;
+    groups: undefined;
+    masked: undefined;
+    placeholder: string;
+    size: undefined;
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: boolean;
+    name: undefined;
+    form: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    ariaLabel: undefined;
+}>>> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    length: number;
+    disabled: boolean;
+    readonly: boolean;
+    form: string;
+    pattern: string;
+    type: GrOtpInputType;
+    size: GrOtpInputSize;
+    masked: boolean;
+    name: string;
+    invalid: boolean;
+    ariaLabel: string;
+    modelValue: string;
+    required: boolean;
+    placeholder: string;
+    groups: number[];
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/components/GrOtpInput/config.d.ts

@@ -0,0 +1 @@
+export declare const grOtpInputConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrOtpInput">;

package/dist/types/components/GrOtpInput/defaults.d.ts

@@ -0,0 +1,15 @@
+import type { GrComponentSize } from '../GrConfigProvider/context';
+/**
+ * Пропы `GrOtpInput`, настраиваемые глобально через `componentDefaults`.
+ * Только оформление и поведение по умолчанию — см. `GrButton/defaults.ts`.
+ */
+export interface GrOtpInputConfigurableProps {
+    size: GrComponentSize;
+    length: number;
+    masked: boolean;
+}
+declare module '../../composables/useGrComponentConfig' {
+    interface GrComponentDefaultsRegistry {
+        GrOtpInput: GrOtpInputConfigurableProps;
+    }
+}

package/dist/types/components/GrOtpInput/grOtpInputStyles.d.ts

@@ -0,0 +1,62 @@
+import type { GrComponentSize } from '../shared/sizes';
+export type GrOtpInputSize = GrComponentSize;
+/**
+ * `w-fit` тут не украшение. Гридовый или флексовый родитель **блокифицирует**
+ * `inline-flex`, и ряд растягивался на всю колонку: сами ячейки оставались на
+ * месте, а невидимое поле поверх них ловило клики далеко справа от кода.
+ */
+export declare const rootBaseClass = "relative inline-flex w-fit items-center";
+export declare const rootGaps: Record<GrOtpInputSize, string>;
+/**
+ * Настоящее поле лежит **поверх** ряда ячеек и невидимо: текст, каретка и
+ * подсветка выделения прозрачны, всё видимое рисуют ячейки.
+ *
+ * Оно остаётся полноценным `<input>`, и потому даром достаются вставка,
+ * автозаполнение кода из SMS, отмена, выделение и вся каретка со стрелками —
+ * см. `docs/components/GrOtpInput.md`.
+ *
+ * `z-index` не нужен: поле позиционировано, ячейки — нет, а позиционированный
+ * элемент и так красится поверх статичных соседей. Литерал слоя тут был бы
+ * лишней записью в шкале `docs/z-index.md`.
+ */
+export declare const fieldClass = "absolute inset-0 w-full cursor-text bg-transparent text-transparent [caret-color:transparent] outline-none selection:bg-transparent disabled:cursor-not-allowed";
+export declare const cellBaseClass = "relative inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-control)] border [font-variant-numeric:tabular-nums] transition-colors duration-[var(--gr-duration-fast)]";
+/**
+ * Сторона ячейки повторяет высоту `GrInput` на той же ступени: код стоит в
+ * форме рядом с полями, и ряд обязан садиться с ними в одну линию.
+ *
+ * Через хук, а не классом-числом: квадратная ячейка — решение оформления, и
+ * макет вправе сделать её шире.
+ */
+export declare const cellSizes: Record<GrOtpInputSize, string>;
+export declare const cellIdleClass = "border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+/** Активная ячейка — та, в которой стоит каретка, и только пока поле в фокусе. */
+export declare const cellActiveClass = "border-[var(--gr-otp-input-active-brd,var(--gr-primary))] ring-2 ring-[var(--gr-ring)]";
+/**
+ * Вердикт валидации красится своей ролью, а не декоративным `danger`: тема
+ * вправе развести подсветку по решению разработчика и ошибку формы.
+ */
+export declare const cellInvalidClass = "border-[var(--gr-invalid-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+export declare const cellInvalidActiveClass = "ring-2 ring-[var(--gr-invalid-ring)]";
+/**
+ * Недоступность гасится фоном, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста и роняет контраст кода.
+ */
+export declare const cellDisabledClass = "border-[var(--gr-disabled-brd)] bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]";
+export declare const placeholderClass = "text-[var(--gr-muted-fg)]";
+/**
+ * Каретка рисуется своей, потому что настоящая скрыта вместе с текстом.
+ * Мигание — CSS-анимация, значит подчиняется глобальному клампу движения
+ * пакета (`docs/motion.md`), а не собственному таймеру.
+ */
+export declare const caretClass = "pointer-events-none absolute h-[1em] w-px bg-[var(--gr-otp-input-caret,var(--gr-primary))]";
+export declare const separatorClass = "select-none px-0.5 text-[var(--gr-muted-fg)]";
+export declare function grOtpInputRootClass(size: GrOtpInputSize): string;
+type GrOtpInputCellClassOptions = {
+    size: GrOtpInputSize;
+    active: boolean;
+    invalid: boolean;
+    disabled: boolean;
+};
+export declare function grOtpInputCellClass(options: GrOtpInputCellClassOptions): string;
+export {};

package/dist/types/components/GrOtpInput/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrOtpInputComponent from './GrOtpInput.vue';
+export { default } from './GrOtpInput.vue';
+export { default as GrOtpInput } from './GrOtpInput.vue';
+export { grOtpInputConfig } from './config';
+export type { GrOtpInputConfigurableProps } from './defaults';
+export { grOtpInputSafelist } from './safelist';
+export type { GrOtpInputEmits, GrOtpInputProps, GrOtpInputSize, GrOtpInputType } from './GrOtpInput.vue';
+export type GrOtpInputInstance = ComponentExposed<typeof GrOtpInputComponent>;