@feugene/granularity 0.13.0 → 0.16.0

package/dist/types/src/components/GrAutocomplete/GrAutocomplete.vue.d.ts

@@ -1,5 +1,6 @@
-import { type GrAutocompleteModelValue, type GrAutocompleteOption, type GrAutocompleteSize } from './grAutocompleteStyles';
-export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteSize, } from './grAutocompleteStyles';
+import type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge/grBadgeStyles';
+import { type GrAutocompleteModelValue, type GrAutocompleteOption, type GrAutocompleteValue, type GrAutocompleteSize } from './grAutocompleteStyles';
+export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteSize, GrAutocompleteValue, } from './grAutocompleteStyles';
 /**
  * Публичный GR-примитив «Autocomplete / Combobox» (WAI-ARIA editable combobox).
  *
@@ -9,17 +10,32 @@ export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteSize
  * удалённую (async) загрузку через событие `search` + внешний проп `loading`,
  * произвольные значения (`allowCustomValue`) и multiple с удаляемыми chips.
  */
-export interface GrAutocompleteProps {
+export interface GrAutocompleteProps<TValue extends GrAutocompleteValue = string> {
     /** Выбранное значение (single — строка, multiple — массив строк). */
-    modelValue: GrAutocompleteModelValue;
+    modelValue: GrAutocompleteModelValue<TValue>;
     /**
      * Доступные опции. Для локального режима — полный список (фильтруется на клиенте).
      * Для remote-режима (`filterable=false`) — список, который родитель обновляет
      * в ответ на событие `search`.
      */
-    options?: GrAutocompleteOption[];
+    options?: GrAutocompleteOption<TValue>[];
     multiple?: boolean;
+    /**
+     * Вид чипов выбранных значений в режиме `multiple`. Чип — это `GrBadge`, а не
+     * своя плашка: на светлой теме собственная заливка чипа (примесь `--gr-muted`
+     * без рамки) давала 1.02:1 к фону поля, то есть была невидима.
+     */
+    tagTone?: GrBadgeTone;
+    tagDark?: boolean;
+    tagSize?: GrBadgeSize;
+    tagRadius?: GrBadgeRadius;
     disabled?: boolean;
+    /** Только для чтения: значение видно и уходит в форму, но не редактируется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     size?: GrAutocompleteSize;
     placeholder?: string;
     ariaLabel?: string;
@@ -34,7 +50,18 @@ export interface GrAutocompleteProps {
      */
     filterable?: boolean;
     /** Кастомный матчер локальной фильтрации. По умолчанию — подстрока в `label`/`value`. */
-    filter?: (option: GrAutocompleteOption, query: string) => boolean;
+    filter?: (option: GrAutocompleteOption<TValue>, query: string) => boolean;
+    /**
+     * Удалённая загрузка опций под управлением компонента: дебаунс, отмена
+     * устаревшего запроса и `loading` берёт на себя он. Ответ на отменённый
+     * запрос игнорируется — при быстром вводе в списке всегда результат
+     * последнего запроса, а не того, который вернулся позже.
+     *
+     * `signal` пробрасывается в `fetch`. Локальная фильтрация в этом режиме
+     * выключена: список фильтрует сервер. Альтернатива — событие `search`, если
+     * запрос ведёт само приложение.
+     */
+    fetchOptions?: (query: string, signal: AbortSignal) => Promise<GrAutocompleteOption<TValue>[]>;
     /** Минимальная длина запроса до эмита `search` (для дебаунса remote-загрузки). */
     minQueryLength?: number;
     /** Задержка дебаунса события `search`, мс. */
@@ -45,107 +72,93 @@ export interface GrAutocompleteProps {
     closeOnSelect?: boolean;
     /** Максимальная высота панели, px. */
     dropdownMaxHeight?: number;
+    /**
+     * Виртуализация панели: в DOM живёт только окно вокруг вьюпорта.
+     *
+     * Высоту окна задаёт `dropdownMaxHeight`. Включается осознанно: на сотне
+     * опций выигрыша нет, а в разметке остаётся только окно — вместе с ним
+     * меняется и то, что находит `querySelector` потребителя. Профильный
+     * сценарий — удалённый поиск по справочнику на тысячи позиций.
+     */
+    virtual?: boolean;
     /** i18n-тексты состояний панели / aria. */
     loadingText?: string;
     noResultsText?: string;
     clearLabel?: string;
+    /**
+     * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт
+     * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.
+     */
+    open?: boolean;
+    /** Имя для нативной формы: hidden input по значению модели (не по тексту запроса). */
+    name?: string;
+    /**
+     * Ширины аддонов `prefix`/`suffix` — общий контракт контролов пакета
+     * (`docs/form-controls.md`).
+     */
+    prefixMinWidth?: string;
+    prefixMaxWidth?: string;
+    suffixMinWidth?: string;
+    suffixMaxWidth?: string;
+    prefixFixed?: boolean;
+    suffixFixed?: boolean;
+}
+export interface GrAutocompleteEmits<TValue extends GrAutocompleteValue = string> {
+    (e: 'update:modelValue', value: GrAutocompleteModelValue<TValue>): void;
+    /** Дебаунснутый поисковый запрос — точка входа для удалённой загрузки опций. */
+    (e: 'search', query: string): void;
+    /** Запрос `fetchOptions` завершился ошибкой (отмена устаревшего сюда не приходит). */
+    (e: 'searchError', error: unknown): void;
+    /** Значение зафиксировано выбором или снятием опции. */
+    (e: 'change', value: GrAutocompleteModelValue<TValue>): void;
+    /** Панель открылась/закрылась (`v-model:open`). */
+    (e: 'update:open', value: boolean): void;
+    /** Значение снято кнопкой очистки; только при `clearable`. */
+    (e: 'clear'): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
 }
-declare var __VLS_13: {
-    option: GrAutocompleteOption;
-    selected: boolean;
-}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    option?: (props: typeof __VLS_13) => any;
-} & {
-    loading?: (props: typeof __VLS_15) => any;
-} & {
-    empty?: (props: typeof __VLS_17) => any;
+declare const __VLS_export: <TValue extends GrAutocompleteValue = string>(__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<GrAutocompleteProps<TValue> & {
+        onSearch?: ((query: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: GrAutocompleteModelValue<TValue>) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GrAutocompleteModelValue<TValue>) => any) | undefined;
+        onSearchError?: ((error: unknown) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Аддон слева от поля ввода. */
+        prefix?: () => any;
+        /** Аддон справа, перед спиннером и крестиком. */
+        suffix?: () => any;
+        /** Строка списка вместо подписи опции. */
+        option?: (props: {
+            option: GrAutocompleteOption<TValue>;
+            selected: boolean;
+        }) => any;
+        /** Содержимое панели, пока едут опции. */
+        loading?: () => any;
+        /** Содержимое панели, когда подходящих опций нет. */
+        empty?: () => any;
+    };
+    emit: GrAutocompleteEmits<TValue>;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAutocompleteProps>, {
-    options: undefined;
-    multiple: boolean;
-    disabled: boolean;
-    size: undefined;
-    placeholder: undefined;
-    ariaLabel: undefined;
-    clearable: undefined;
-    loading: boolean;
-    filterable: boolean;
-    filter: undefined;
-    minQueryLength: number;
-    debounce: number;
-    allowCustomValue: boolean;
-    closeOnSelect: boolean;
-    dropdownMaxHeight: number;
-    loadingText: undefined;
-    noResultsText: undefined;
-    clearLabel: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: GrAutocompleteModelValue) => void;
-    search: (query: string) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAutocompleteProps>, {
-    options: undefined;
-    multiple: boolean;
-    disabled: boolean;
-    size: undefined;
-    placeholder: undefined;
-    ariaLabel: undefined;
-    clearable: undefined;
-    loading: boolean;
-    filterable: boolean;
-    filter: undefined;
-    minQueryLength: number;
-    debounce: number;
-    allowCustomValue: boolean;
-    closeOnSelect: boolean;
-    dropdownMaxHeight: number;
-    loadingText: undefined;
-    noResultsText: undefined;
-    clearLabel: undefined;
-}>>> & Readonly<{
-    onSearch?: ((query: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: GrAutocompleteModelValue) => any) | undefined;
-}>, {
-    size: GrAutocompleteSize;
-    clearable: boolean;
-    filter: (option: GrAutocompleteOption, query: string) => boolean;
-    loading: boolean;
-    options: GrAutocompleteOption[];
-    multiple: boolean;
-    disabled: boolean;
-    placeholder: string;
-    ariaLabel: string;
-    filterable: boolean;
-    minQueryLength: number;
-    debounce: number;
-    allowCustomValue: boolean;
-    closeOnSelect: boolean;
-    dropdownMaxHeight: number;
-    loadingText: string;
-    noResultsText: string;
-    clearLabel: string;
-}, {}, {}, {}, 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];
 } : {

package/dist/types/src/components/GrAutocomplete/config.d.ts

@@ -1 +1 @@
-export declare const grAutocompleteConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrAutocomplete">;
+export declare const grAutocompleteConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrAutocomplete">;

package/dist/types/src/components/GrAutocomplete/grAutocompleteStyles.d.ts

@@ -1,24 +1,60 @@
-export type GrAutocompleteSize = 'xs' | 'sm' | 'md' | 'lg';
-/** Опция автокомплита. Значение и метка — строки (как у `GrSelect`). */
-export type GrAutocompleteOption = {
-    value: string;
+import type { GrComponentSize } from '../shared/sizes';
+export type GrAutocompleteSize = GrComponentSize;
+/**
+ * Тип значения опции — те же примитивы, что у `GrSelect`: значение должно
+ * однозначно восстанавливаться из строкового представления.
+ */
+export type GrAutocompleteValue = string | number;
+/** Опция автокомплита. Метка — строка, значение параметризуется. */
+export type GrAutocompleteOption<TValue extends GrAutocompleteValue = string> = {
+    value: TValue;
     label: string;
     disabled?: boolean;
 };
-export type GrAutocompleteModelValue = string | string[];
+export type GrAutocompleteModelValue<TValue extends GrAutocompleteValue = string> = TValue | TValue[];
 /**
  * Оболочка (визуально повторяет `GrInput`): бордер + focus-ring по `focus-within`,
  * т.к. фокус живёт на вложенном `<input role="combobox">`. Flex-контейнер с
  * `flex-wrap` — чтобы chips в multiple-режиме переносились и коробка росла в высоту.
  */
-export declare const autocompleteShellBase = "relative flex w-full flex-wrap items-center gap-1 rounded-md border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--gr-ring)]";
+export declare const autocompleteShellBase = "relative flex w-full flex-wrap items-center gap-1 rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus-within:ring-2 focus-within:ring-[var(--gr-ring)]";
+export declare const autocompleteShellEnabledClass = "bg-[var(--gr-bg)]";
+/**
+ * Заблокированная оболочка гасится фоном, а не `opacity` (как `GrInput`):
+ * прозрачность разбавляет выверенные на AA токены текста и роняет контраст.
+ * Фон взаимоисключающий с `autocompleteShellEnabledClass` — два `bg-*` одной
+ * специфичности разрулил бы порядок в сгенерированном CSS, а не порядок в
+ * списке классов.
+ */
+export declare const autocompleteShellDisabledClass = "bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed";
+/**
+ * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+ * тема вправе развести вердикт валидации и подсветку по решению разработчика.
+ */
+export declare const invalidShellClass = "border-[var(--gr-invalid-brd)] focus-within:ring-[var(--gr-invalid-ring)]";
 export declare const autocompleteSizeClassBySize: Record<GrAutocompleteSize, string>;
-export declare const autocompleteChipClass = "inline-flex max-w-full items-center gap-1 rounded-[6px] bg-[color-mix(in_srgb,var(--gr-muted)_35%,transparent)] px-1.5 py-0.5 text-[12px] leading-tight text-[var(--gr-fg)]";
 export declare function autocompleteShellClass(options: {
     size: GrAutocompleteSize;
     disabled: boolean;
     invalid: boolean;
 }): string;
+export declare const autocompleteOptionBaseClass = "w-full rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)]";
+export declare const autocompleteOptionActiveClass = "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+export declare const autocompleteOptionEnabledClass = "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+/** Выключенная опция гасится токеном текста — по той же причине, что и оболочка. */
+export declare const autocompleteOptionDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+export declare function autocompleteOptionClass(options: {
+    disabled: boolean;
+    active: boolean;
+}): string;
+/**
+ * Строка состояния панели: загрузка, «введите ещё N», «ничего не найдено».
+ *
+ * По центру и с двойным вертикальным воздухом — как у `GrSelect` и палитры команд.
+ * Слева, как у опций, она стоять не может: опции лежат внутри listbox с его `p-1`,
+ * а состояние — сиблинг, и текст расходился с опциями на 4px.
+ */
+export declare const autocompleteStateClass = "flex items-center justify-center gap-2 px-3 py-4 text-center text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]";
 /**
  * Панель списка опций — тот же «язык» поверхностей, что у `GrSelect`
  * (card + бордер + shadow-2 + скругление). Держим локальную копию строки,

package/dist/types/src/components/GrAutocomplete/index.d.ts

@@ -1,6 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrAutocompleteComponent from './GrAutocomplete.vue';
 export { default } from './GrAutocomplete.vue';
 export { default as GrAutocomplete } from './GrAutocomplete.vue';
 export { grAutocompleteConfig } from './config';
 export type { GrAutocompleteConfigurableProps } from './defaults';
 export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteProps, GrAutocompleteSize, } from './GrAutocomplete.vue';
 export { grAutocompleteSafelist } from './safelist';
+export type { GrAutocompleteEmits } from './GrAutocomplete.vue';
+export type GrAutocompleteInstance = ComponentExposed<typeof GrAutocompleteComponent>;

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

@@ -1,29 +1,52 @@
-import type { GrAvatarShape } from './grAvatarStyles';
-type __VLS_Props = {
-    size?: number;
+import type { GrSizeWithPx } from '../shared/sizes';
+import { type GrAvatarShape, type GrAvatarStatus } from './grAvatarStyles';
+export type { GrAvatarShape, GrAvatarStatus } from './grAvatarStyles';
+export interface GrAvatarProps {
+    /**
+     * Размер по канонической шкале (`xs|sm|md|lg`) — тогда работает
+     * `GrConfigProvider`. Число — escape-hatch: аватар нужен произвольного
+     * диаметра (24px в строке списка, 96px в профиле), и четыре ступени шкалы
+     * этого не закрывают.
+     */
+    size?: GrSizeWithPx;
     src?: string;
+    /** Резервная картинка: показывается, когда `src` не загрузился. */
+    fallbackSrc?: string;
     alt?: string;
+    /** Имя участника: даёт инициалы и доступное имя аватара. */
+    name?: string;
     shape?: GrAvatarShape;
+    /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */
+    status?: GrAvatarStatus;
+}
+type __VLS_Slots = {
+    /** Содержимое вместо картинки и инициалов. */
+    default?: () => unknown;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    size: number;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAvatarProps>, {
+    size: undefined;
     src: undefined;
-    alt: string;
-    shape: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    size: number;
+    fallbackSrc: undefined;
+    alt: undefined;
+    name: undefined;
+    shape: undefined;
+    status: undefined;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAvatarProps>, {
+    size: undefined;
     src: undefined;
-    alt: string;
-    shape: string;
+    fallbackSrc: undefined;
+    alt: undefined;
+    name: undefined;
+    shape: undefined;
+    status: undefined;
 }>>> & Readonly<{}>, {
-    size: number;
+    size: GrSizeWithPx;
+    shape: GrAvatarShape;
+    status: GrAvatarStatus;
+    name: string;
     alt: string;
     src: string;
-    shape: GrAvatarShape;
+    fallbackSrc: string;
 }, {}, {}, {}, 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/src/components/GrAvatar/GrAvatarGroup.vue.d.ts

@@ -0,0 +1,70 @@
+/**
+ * GrAvatarGroup — ряд аватаров со стекингом и счётчиком скрытых.
+ *
+ * Группа объявлена `role="group"` с именем и числом участников: без этого
+ * скринридер читает набор безымянных картинок и не понимает, что их больше,
+ * чем видно.
+ */
+import { type VNode } from 'vue';
+import type { GrSizeWithPx } from '../shared/sizes';
+import { type GrAvatarShape } from './grAvatarStyles';
+export interface GrAvatarGroupProps {
+    /** Размер и форма ряда: дети берут их из контекста. */
+    size?: GrSizeWithPx;
+    shape?: GrAvatarShape;
+    /** Сколько аватаров показывать; остальные сворачиваются в «+N». */
+    max?: number;
+    /** Сколько участников всего, если в слоте лежит лишь часть. */
+    total?: number;
+    /** Имя группы. Не задано — берётся из локали. */
+    ariaLabel?: string;
+}
+type __VLS_Slots = {
+    /** Аватары ряда. */
+    default?: () => VNode[];
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAvatarGroupProps>, {
+    size: undefined;
+    shape: undefined;
+    max: undefined;
+    total: undefined;
+    ariaLabel: undefined;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrAvatarGroupProps>, {
+    size: undefined;
+    shape: undefined;
+    max: undefined;
+    total: undefined;
+    ariaLabel: undefined;
+}>>> & Readonly<{}>, {
+    size: GrSizeWithPx;
+    shape: GrAvatarShape;
+    total: number;
+    max: number;
+    ariaLabel: string;
+}, {}, {}, {}, 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/src/components/GrAvatar/avatarContext.d.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey } from 'vue';
+import type { GrAvatarShape } from './grAvatarStyles';
+import type { GrSizeWithPx } from '../shared/sizes';
+/**
+ * Контекст `GrAvatarGroup`: размер и форма задаются на группе, чтобы ряд
+ * аватаров не расползался, когда потребитель забыл повторить пропы у каждого.
+ */
+export interface GrAvatarGroupContext {
+    size?: GrSizeWithPx;
+    shape?: GrAvatarShape;
+}
+export declare const GR_AVATAR_GROUP_KEY: InjectionKey<GrAvatarGroupContext>;

package/dist/types/src/components/GrAvatar/config.d.ts

@@ -1 +1 @@
-export declare const grAvatarConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrAvatar">;
+export declare const grAvatarConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrAvatar">;

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

@@ -0,0 +1,16 @@
+import type { GrComponentSize } from '../shared/sizes';
+import type { GrAvatarShape } from './grAvatarStyles';
+/**
+ * Пропы `GrAvatar`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrAvatar: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrAvatarConfigurableProps {
+    size: GrComponentSize;
+    shape: GrAvatarShape;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrAvatar: GrAvatarConfigurableProps;
+    }
+}

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

@@ -1,3 +1,41 @@
 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 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>;
+/**
+ * Статус рисуется поверх картинки, поэтому у корня со статусом не может быть
+ * `overflow-hidden` — точка обрезалась бы кругом. Скругление вместо этого
+ * держит внутренняя обёртка изображения.
+ */
+export declare const rootStatusClass = "overflow-visible";
+/**
+ * Обёртка растянута на весь аватар, поэтому корневой `justify-center`
+ * центрирует её саму, а не содержимое: центрирование обязано быть здесь.
+ */
+export declare const mediaClass = "flex h-full w-full items-center justify-center";
+/**
+ * Со статусом корень уходит в `overflow-visible`, чтобы не срезать точку, и
+ * резать по форме становится некому — тогда это берёт на себя обёртка.
+ */
+export declare const mediaClipClass = "overflow-hidden";
+/**
+ * Размер бывает произвольным числом пикселей, поэтому кегль считается, а не
+ * берётся картой по ступеням. Пол в 10px: у аватара 24px пропорциональные 8px
+ * не читаются.
+ */
+export declare function avatarFontSizePx(sizePx: number): number;
+export declare const groupBaseClass = "inline-flex items-center";
+/** Перекрытие соседей: кольцо цветом фона отделяет аватары друг от друга. */
+export declare const groupItemClass = "-ml-2 first:ml-0 ring-2 ring-[var(--gr-bg)]";
+export declare const groupOverflowClass = "inline-flex items-center justify-center bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] font-700";
 export declare function grAvatarClass(shape: GrAvatarShape): string;
+/**
+ * Инициалы из имени: первые буквы двух первых слов. Вынесено чистой функцией —
+ * тестируется без монтирования.
+ */
+export declare function initialsFrom(name: string): string;

package/dist/types/src/components/GrAvatar/index.d.ts

@@ -1,5 +1,10 @@
 export { default } from './GrAvatar.vue';
 export { default as GrAvatar } from './GrAvatar.vue';
+export { default as GrAvatarGroup, type GrAvatarGroupProps } from './GrAvatarGroup.vue';
 export { grAvatarConfig } from './config';
+export { GR_AVATAR_STATUSES } from './grAvatarStyles';
+export type { GrAvatarProps, GrAvatarStatus } from './GrAvatar.vue';
 export type { GrAvatarShape } from './grAvatarStyles';
+export { initialsFrom } from './grAvatarStyles';
 export { grAvatarSafelist } from './safelist';
+export type { GrAvatarConfigurableProps } from './defaults';

package/dist/types/src/components/GrAvatar/safelist.d.ts

@@ -1,4 +1,8 @@
 export declare const grAvatarClassTokens: {
     readonly shapes: string[];
+    readonly root: readonly string[];
+    readonly media: readonly string[];
+    readonly status: readonly string[];
+    readonly group: readonly string[];
 };
 export declare const grAvatarSafelist: string[];

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

@@ -1,21 +1,21 @@
 export type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
 import { type GrBadgeRadius, type GrBadgeSize, type GrBadgeTone } from './grBadgeStyles';
-type __VLS_Props = {
+export interface GrBadgeProps {
     tone?: GrBadgeTone;
     dark?: boolean;
     size?: GrBadgeSize;
     radius?: GrBadgeRadius;
-};
+}
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBadgeProps>, {
     tone: undefined;
     dark: boolean;
     size: undefined;
     radius: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}>>, {}, {}, {}, {}, 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;

package/dist/types/src/components/GrBadge/config.d.ts

@@ -1 +1 @@
-export declare const grBadgeConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrBadge">;
+export declare const grBadgeConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrBadge">;

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

@@ -1,10 +1,22 @@
+import type { GrComponentSize } from '../shared/sizes';
 import type { GrTone } from '../shared/tones';
 export type GrBadgeTone = GrTone;
-export type GrBadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrBadgeSize = GrComponentSize;
 export type GrBadgeRadius = 'square' | 'semi' | 'round';
 export declare const sizeClassBySize: Record<GrBadgeSize, string>;
 export declare const semiRadiusClassBySize: Record<GrBadgeSize, string>;
 export declare const lightToneClassByTone: Record<GrBadgeTone, string>;
+/**
+ * Заливка filled-бейджа идёт через покомпонентный слой `--gr-badge-{tone}-*`, а
+ * не напрямую из роли тона, потому что нужный вес у тем разный.
+ *
+ * В светлой теме `--gr-{tone}` — это яркая заливка под **тёмный** текст (`-fg`
+ * там обязан быть тёмным: белый на `--gr-success` даёт 2.54:1), и filled-бейдж
+ * читался как тяжёлая почти чёрная плашка. Слой уводит его на `-solid`/`-solid-fg`
+ * — заливку кнопочного веса под светлый текст, ту же, что у solid-кнопок.
+ * В тёмной теме пастельная заливка с тёмным текстом — штатная конвенция, и слой
+ * оставляет прежние роли. Значения — `themes/{light,dark}.css`.
+ */
 export declare const darkToneClassByTone: Record<GrBadgeTone, string>;
 export declare function grBadgeClass(options: {
     tone: GrBadgeTone;

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

@@ -4,3 +4,4 @@ export { grBadgeConfig } from './config';
 export type { GrBadgeConfigurableProps } from './defaults';
 export type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
 export { grBadgeSafelist } from './safelist';
+export type { GrBadgeProps } from './GrBadge.vue';