@feugene/granularity 0.13.0 → 0.16.0

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

@@ -0,0 +1,105 @@
+import type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles';
+export type GrCheckboxGroupDirection = 'vertical' | 'horizontal';
+export interface GrCheckboxGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface GrCheckboxGroupProps {
+    modelValue: string[];
+    options?: GrCheckboxGroupOption[];
+    /** Общее имя для нативной формы: значения уйдут как повторяющиеся поля. */
+    name?: string;
+    disabled?: boolean;
+    /** Только для чтения: выбор видно, но он не меняется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки для всей группы. */
+    invalid?: boolean;
+    /** Обязательная группа: `aria-required` объявляют сами чекбоксы. */
+    required?: boolean;
+    direction?: GrCheckboxGroupDirection;
+    size?: GrCheckboxSize;
+    ariaLabel?: string;
+}
+export interface GrCheckboxGroupEmits {
+    (e: 'update:modelValue', value: string[]): void;
+    (e: 'change', value: string[]): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+type __VLS_Slots = {
+    /** Собственная разметка флажков вместо генерации из `options`. */
+    default?: () => any;
+};
+declare function focus(): void;
+declare function blur(): void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCheckboxGroupProps>, {
+    options: undefined;
+    name: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    direction: string;
+    size: undefined;
+    ariaLabel: undefined;
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => void;
+    change: (value: string[]) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCheckboxGroupProps>, {
+    options: undefined;
+    name: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    direction: string;
+    size: undefined;
+    ariaLabel: undefined;
+}>>> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    size: GrCheckboxSize;
+    readonly: boolean;
+    name: string;
+    invalid: boolean;
+    direction: GrCheckboxGroupDirection;
+    options: GrCheckboxGroupOption[];
+    disabled: boolean;
+    required: boolean;
+    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/GrCheckboxGroup/config.d.ts

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

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

@@ -0,0 +1,14 @@
+import type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles';
+/**
+ * Пропы `GrCheckboxGroup`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrCheckboxGroup: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrCheckboxGroupConfigurableProps {
+    size: GrCheckboxSize;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrCheckboxGroup: GrCheckboxGroupConfigurableProps;
+    }
+}

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

@@ -0,0 +1,9 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrCheckboxGroupComponent from './GrCheckboxGroup.vue';
+export { default } from './GrCheckboxGroup.vue';
+export { default as GrCheckboxGroup } from './GrCheckboxGroup.vue';
+export { grCheckboxGroupConfig } from './config';
+export type { GrCheckboxGroupConfigurableProps } from './defaults';
+export type { GrCheckboxGroupDirection, GrCheckboxGroupOption, GrCheckboxGroupProps, } from './GrCheckboxGroup.vue';
+export type { GrCheckboxGroupEmits } from './GrCheckboxGroup.vue';
+export type GrCheckboxGroupInstance = ComponentExposed<typeof GrCheckboxGroupComponent>;

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

@@ -1,4 +1,6 @@
-import { type GrCollapseModelValue, type GrCollapseValue } from './grCollapseContext';
+import { type GrCollapseBeforeChange, type GrCollapseHeadingLevel, type GrCollapseIconPosition, type GrCollapseModelValue, type GrCollapseValue } from './grCollapseContext';
+import type { GrComponentSize } from '../shared/sizes';
+import './defaults';
 /**
  * GrCollapse — контейнер секций `GrCollapseItem`.
  *
@@ -6,22 +8,54 @@ import { type GrCollapseModelValue, type GrCollapseValue } from './grCollapseCon
  * @prop accordion — режим, когда одновременно может быть открыта только одна секция.
  * @prop disabled — блокирует взаимодействие со всеми секциями.
  * @prop divided — разделители между секциями.
+ * @prop borderless — без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара
+ *   иначе получает вторую рамку и вторую тень.
+ * @prop beforeChange — async-guard: `false` отменяет переключение.
  */
 export interface GrCollapseProps {
     modelValue?: GrCollapseModelValue;
     accordion?: boolean;
     disabled?: boolean;
     divided?: boolean;
+    borderless?: boolean;
+    /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */
+    headingLevel?: GrCollapseHeadingLevel;
+    /** Сторона шеврона относительно заголовка. */
+    expandIconPosition?: GrCollapseIconPosition;
+    beforeChange?: GrCollapseBeforeChange;
+    /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */
+    size?: GrComponentSize;
+    /**
+     * Пусто ли. Не задан — считается по содержимому: аккордеон без секций
+     * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —
+     * например, когда секции приезжают асинхронно и мигать текстом не надо.
+     */
+    empty?: boolean;
+    /** Текст пустого состояния. Слот `#empty` сильнее. */
+    emptyText?: string;
 }
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+export interface GrCollapseEmits {
+    (e: 'update:modelValue', value: GrCollapseModelValue): void;
+    (e: 'change', value: GrCollapseModelValue): void;
+}
+type __VLS_Slots = {
+    /** Секции аккордеона (`GrCollapseItem`). */
+    default?: () => any;
+    /** Содержимое пустого состояния вместо текста по умолчанию. */
+    empty?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCollapseProps>, {
     modelValue: undefined;
     accordion: boolean;
     disabled: boolean;
-    divided: boolean;
+    divided: undefined;
+    borderless: undefined;
+    headingLevel: undefined;
+    expandIconPosition: undefined;
+    beforeChange: undefined;
+    size: undefined;
+    empty: undefined;
+    emptyText: undefined;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: GrCollapseModelValue) => void;
     change: (value: GrCollapseModelValue) => void;
@@ -29,15 +63,29 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelValue: undefined;
     accordion: boolean;
     disabled: boolean;
-    divided: boolean;
+    divided: undefined;
+    borderless: undefined;
+    headingLevel: undefined;
+    expandIconPosition: undefined;
+    beforeChange: undefined;
+    size: undefined;
+    empty: undefined;
+    emptyText: undefined;
 }>>> & Readonly<{
     onChange?: ((value: GrCollapseModelValue) => any) | undefined;
     "onUpdate:modelValue"?: ((value: GrCollapseModelValue) => any) | undefined;
 }>, {
+    size: GrComponentSize;
+    divided: boolean;
+    borderless: boolean;
+    expandIconPosition: GrCollapseIconPosition;
+    headingLevel: GrCollapseHeadingLevel;
     disabled: boolean;
     modelValue: GrCollapseValue | GrCollapseValue[];
+    empty: boolean;
     accordion: boolean;
-    divided: boolean;
+    beforeChange: GrCollapseBeforeChange;
+    emptyText: 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/GrCollapse/GrCollapseItem.vue.d.ts

@@ -5,17 +5,27 @@ import { type GrCollapseValue } from './grCollapseContext';
  * @prop name — уникальный идентификатор секции (для `v-model` у `GrCollapse`); по умолчанию генерируется из `uid`.
  * @prop title — текст заголовка; можно заменить слотом `#title`.
  * @prop disabled — запрещает раскрытие/сворачивание секции.
+ *
+ * Слот `#extra` (счётчик, бейдж, кнопка) рендерится **рядом с** триггером, а не
+ * внутри него: `<button>` внутри `<button>` — невалидная разметка, а axe ловит
+ * это как `nested-interactive`.
  */
 export interface GrCollapseItemProps {
     name?: GrCollapseValue;
     title?: string;
     disabled?: boolean;
 }
-declare var __VLS_1: {}, __VLS_14: {};
+declare var __VLS_13: {}, __VLS_20: {}, __VLS_28: {}, __VLS_35: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_1) => any;
+    icon?: (props: typeof __VLS_13) => any;
+} & {
+    title?: (props: typeof __VLS_20) => any;
+} & {
+    icon?: (props: typeof __VLS_28) => any;
+} & {
+    extra?: (props: typeof __VLS_35) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCollapseItemProps>, {
     name: undefined;

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

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

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

@@ -0,0 +1,19 @@
+import type { GrComponentSize } from '../shared/sizes';
+import type { GrCollapseHeadingLevel, GrCollapseIconPosition } from './grCollapseContext';
+/**
+ * Пропы `GrCollapse`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrCollapse: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrCollapseConfigurableProps {
+    size: GrComponentSize;
+    divided: boolean;
+    borderless: boolean;
+    expandIconPosition: GrCollapseIconPosition;
+    headingLevel: GrCollapseHeadingLevel;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrCollapse: GrCollapseConfigurableProps;
+    }
+}

package/dist/types/src/components/GrCollapse/grCollapseContext.d.ts

@@ -1,9 +1,29 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { GrComponentSize } from '../shared/sizes';
 export type GrCollapseValue = string | number;
 export type GrCollapseModelValue = GrCollapseValue | GrCollapseValue[] | undefined;
+/**
+ * Уровень заголовка секции. APG для accordion требует, чтобы он соответствовал
+ * структуре страницы: аккордеон в разделе `<h4>` с захардкоженным `<h3>` рвёт
+ * навигацию по заголовкам.
+ */
+export declare const GR_COLLAPSE_HEADING_LEVELS: readonly [2, 3, 4, 5, 6];
+export type GrCollapseHeadingLevel = typeof GR_COLLAPSE_HEADING_LEVELS[number];
+/** Сторона шеврона относительно заголовка — логическая, не физическая (RTL). */
+export declare const GR_COLLAPSE_ICON_POSITIONS: readonly ["start", "end"];
+export type GrCollapseIconPosition = typeof GR_COLLAPSE_ICON_POSITIONS[number];
+/**
+ * Async-guard на переключение секции: `false` отменяет его. Второй аргумент —
+ * куда идёт секция (`true` — раскрывается), чтобы «сохранить изменения?»
+ * спрашивалось только на сворачивании.
+ */
+export type GrCollapseBeforeChange = (name: GrCollapseValue, expanding: boolean) => boolean | void | Promise<boolean | void>;
 export type GrCollapseContext = {
     accordion: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    size: ComputedRef<GrComponentSize>;
+    headingLevel: ComputedRef<GrCollapseHeadingLevel>;
+    expandIconPosition: ComputedRef<GrCollapseIconPosition>;
     isActive: (name: GrCollapseValue) => boolean;
     toggle: (name: GrCollapseValue) => void;
 };

package/dist/types/src/components/GrCollapse/grCollapseStyles.d.ts

@@ -0,0 +1,42 @@
+import type { GrComponentSize } from '../shared/sizes';
+/**
+ * Фон строки красит строка, а не кнопка-триггер.
+ *
+ * Слот `#extra` лежит рядом с триггером, а не внутри него (иначе
+ * `nested-interactive`), поэтому подсветка, нарисованная кнопкой, обрывалась перед
+ * ним: при `divided: false` она — единственная структура строк, и обрыв заметен.
+ * Disabled гасится тем же фоном, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста.
+ */
+export declare const collapseRowBase = "flex items-center transition-colors duration-[var(--gr-duration-fast)]";
+export declare const collapseRowEnabledClass = "hover:bg-[var(--gr-muted)]";
+export declare const collapseRowDisabledClass = "bg-[var(--gr-muted)]";
+export declare const collapseHeaderBase = "w-full flex items-center gap-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const collapseHeaderEnabledClass = "cursor-pointer";
+export declare const collapseHeaderDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+export declare const collapseHeaderPaddings: Record<GrComponentSize, string>;
+/** Правый инсет `#extra`: тот же горизонтальный отступ, что у заголовка строки. */
+export declare const collapseExtraPaddings: Record<GrComponentSize, string>;
+export declare const collapseTitleBase = "flex-1 min-w-0";
+export declare const collapseTitleTexts: Record<GrComponentSize, string>;
+export declare const collapseBodyPaddings: Record<GrComponentSize, string>;
+export declare const collapseBodyBase = "text-[var(--gr-muted-fg)]";
+/**
+ * Заглушка пустого аккордеона. Кегль и отступы берутся из тех же карт, что у
+ * секций: пустое состояние — часть той же поверхности, и выпадать из её ритма
+ * ему незачем.
+ */
+export declare const collapseEmptyBase = "text-center text-[var(--gr-muted-fg)]";
+export declare const collapseChevronBase = "shrink-0 transition-transform duration-[var(--gr-duration-fast)] text-[var(--gr-muted-fg)]";
+export declare const collapseChevronExpandedClass = "rotate-180";
+/** Размер шеврона отстаёт от размера секции на ступень — иначе он перевешивает заголовок. */
+export declare const collapseChevronSizes: Record<GrComponentSize, GrComponentSize>;
+export declare function grCollapseRowClass(disabled: boolean): string;
+export declare function grCollapseHeaderClass(options: {
+    size: GrComponentSize;
+    disabled: boolean;
+}): string;
+export declare function grCollapseTitleClass(size: GrComponentSize): string;
+export declare function grCollapseBodyClass(size: GrComponentSize): string;
+export declare function grCollapseEmptyClass(size: GrComponentSize): string;
+export declare function grCollapseChevronClass(expanded: boolean): string;

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

@@ -2,5 +2,8 @@ export { default } from './GrCollapse.vue';
 export { default as GrCollapse, type GrCollapseProps } from './GrCollapse.vue';
 export { default as GrCollapseItem, type GrCollapseItemProps } from './GrCollapseItem.vue';
 export { grCollapseConfig } from './config';
+export type { GrCollapseConfigurableProps } from './defaults';
+export { grCollapseSafelist } from './safelist';
 export type * from './grCollapseContext';
 export * from './grCollapseContext';
+export type { GrCollapseEmits } from './GrCollapse.vue';

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

@@ -0,0 +1,15 @@
+export declare const grCollapseClassTokens: {
+    readonly rowBase: string[];
+    readonly rowState: readonly string[];
+    readonly extraPaddings: string[];
+    readonly headerBase: string[];
+    readonly headerPaddings: string[];
+    readonly headerState: readonly string[];
+    readonly titleBase: string[];
+    readonly titleTexts: string[];
+    readonly bodyBase: string[];
+    readonly bodyPaddings: string[];
+    readonly empty: string[];
+    readonly chevron: readonly string[];
+};
+export declare const grCollapseSafelist: string[];

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

@@ -0,0 +1,104 @@
+import { type GrColorPickerSize } from './grColorPickerStyles';
+export type { GrColorPickerSize } from './grColorPickerStyles';
+export interface GrColorPickerProps {
+    /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */
+    modelValue: string;
+    /** Четвёртый слайдер и восьмизначная форма hex. */
+    alpha?: boolean;
+    /** Палитра быстрого выбора. Пусто — блок не рендерится. */
+    presets?: string[];
+    size?: GrColorPickerSize;
+    /** Контролируемое состояние панели (`v-model:open`). */
+    open?: boolean;
+    /** Сторона, с которой раскрывается панель. */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** Имя для нативной формы: значение уходит скрытым полем. */
+    name?: string;
+    disabled?: boolean;
+    /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */
+    readonly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+}
+export interface GrColorPickerEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'update:open', value: boolean): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+declare function focus(): void;
+declare function blur(): void;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrColorPickerProps>, {
+    alpha: boolean;
+    presets: () => never[];
+    size: undefined;
+    open: undefined;
+    placement: string;
+    name: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    ariaLabel: undefined;
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+    change: (value: string) => void;
+    "update:open": (value: boolean) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrColorPickerProps>, {
+    alpha: boolean;
+    presets: () => never[];
+    size: undefined;
+    open: undefined;
+    placement: string;
+    name: 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;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: GrColorPickerSize;
+    readonly: boolean;
+    name: string;
+    invalid: boolean;
+    placement: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    alpha: boolean;
+    open: boolean;
+    disabled: boolean;
+    required: boolean;
+    ariaLabel: string;
+    presets: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/src/components/GrColorPicker/color.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Арифметика цвета для `GrColorPicker` — чистый модуль без Vue.
+ *
+ * Модель компонента — hex-строка (в такой форме цвет лежит в токенах темы),
+ * а панель работает в HSL: у оттенка, насыщенности и светлоты есть шкала, по
+ * которой можно вести слайдер, а у каналов RGB её нет.
+ *
+ * Свой парсер, а не `__tests__/cssContrast.ts`: тот — инфраструктура гейтов, и
+ * тянуть тестовый модуль в поставляемый код нельзя.
+ */
+export type GrHsla = {
+    /** Оттенок, 0…359 (круговой: 360 — это 0). */
+    h: number;
+    /** Насыщенность, 0…100. */
+    s: number;
+    /** Светлота, 0…100. */
+    l: number;
+    /** Непрозрачность, 0…1. */
+    a: number;
+};
+/**
+ * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),
+ * регистр и решётка необязательны.
+ *
+ * Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и
+ * из поля ввода, и упавший компонент — худший ответ на опечатку.
+ */
+export declare function parseHexColor(value: unknown): GrHsla | null;
+/**
+ * Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до
+ * непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную
+ * форму, которую потребитель не ждёт.
+ */
+export declare function formatHexColor(color: GrHsla, withAlpha?: boolean): string;
+/** CSS-запись цвета для превью и градиентов. */
+export declare function hslaToCss(color: GrHsla): string;
+/** Приводит произвольный объект к валидному диапазону каналов. */
+export declare function normalizeHsla(color: GrHsla): GrHsla;

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

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

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

@@ -0,0 +1,15 @@
+import type { GrColorPickerSize } from './grColorPickerStyles';
+/**
+ * Пропы `GrColorPicker`, настраиваемые глобально через `componentDefaults`.
+ *
+ * Только оформление: значение, пресеты и состояние панели принадлежат
+ * конкретному экземпляру.
+ */
+export interface GrColorPickerConfigurableProps {
+    size: GrColorPickerSize;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrColorPicker: GrColorPickerConfigurableProps;
+    }
+}

package/dist/types/src/components/GrColorPicker/grColorPickerStyles.d.ts

@@ -0,0 +1,39 @@
+import type { GrComponentSize } from '../shared/sizes';
+export type GrColorPickerSize = GrComponentSize;
+/**
+ * Триггер повторяет геометрию поля ввода: пикер чаще всего стоит в форме рядом
+ * с `GrInput`, и своя лестница высот выдала бы его из ряда.
+ */
+export declare const triggerSizeClassBySize: Record<GrColorPickerSize, string>;
+/** Образец в триггере: квадрат со стороной чуть меньше высоты поля. */
+export declare const triggerSwatchSizeBySize: Record<GrColorPickerSize, string>;
+export declare const panelSizeClassBySize: Record<GrColorPickerSize, string>;
+export declare const triggerBaseClass = "inline-flex w-full min-w-0 items-center rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/** Недоступное поле гасится токенами, а не `opacity`: прозрачность роняет контраст подписи. */
+export declare const triggerDisabledClass = "cursor-not-allowed border-[var(--gr-brd)] bg-[var(--gr-muted)] text-[var(--gr-disabled-fg)]";
+export declare const triggerEnabledClass = "cursor-pointer hover:border-[var(--gr-primary)]";
+export declare const triggerInvalidClass = "border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]";
+export declare const triggerValueClass = "min-w-0 flex-1 truncate text-left [font-variant-numeric:tabular-nums]";
+/**
+ * Шахматка под прозрачным цветом. Живёт классом-маркером, а сами клетки рисует
+ * `<style>` компонента: два `conic-gradient` в утилите не выражаются.
+ */
+export declare const checkerClass = "gr-color-picker-checker";
+export declare const swatchBaseClass = "relative shrink-0 overflow-hidden rounded-[var(--gr-radius-sm)] border border-[color-mix(in_srgb,var(--gr-fg)_18%,transparent)]";
+/** Заливка образца лежит поверх шахматки отдельным слоем. */
+export declare const swatchFillClass = "absolute inset-0";
+export declare const panelBaseClass = "grid";
+export declare const previewClass = "relative h-10 w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[color-mix(in_srgb,var(--gr-fg)_18%,transparent)]";
+export declare const rowClass = "grid grid-cols-[1.25rem_minmax(0,1fr)_2.75rem] items-center gap-2";
+export declare const rowLabelClass = "text-[var(--gr-muted-fg)]";
+export declare const rowValueClass = "text-right text-[var(--gr-muted-fg)] [font-variant-numeric:tabular-nums]";
+export declare const presetsGridClass = "flex flex-wrap gap-1.5";
+export declare const presetBaseClass = "relative h-5 w-5 shrink-0 overflow-hidden rounded-[var(--gr-radius-sm)] border border-[color-mix(in_srgb,var(--gr-fg)_18%,transparent)] transition-shadow duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const presetSelectedClass = "ring-2 ring-[var(--gr-primary)] ring-offset-1 ring-offset-[var(--gr-popover)]";
+export declare function grColorPickerTriggerClass(options: {
+    size: GrColorPickerSize;
+    disabled: boolean;
+    invalid: boolean;
+}): string;
+export declare function grColorPickerPanelClass(size: GrColorPickerSize): string;
+export declare function grColorPickerPresetClass(selected: boolean): string;

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

@@ -0,0 +1,11 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrColorPickerComponent from './GrColorPicker.vue';
+export { default } from './GrColorPicker.vue';
+export { default as GrColorPicker } from './GrColorPicker.vue';
+export { grColorPickerConfig } from './config';
+export type { GrColorPickerConfigurableProps } from './defaults';
+export type { GrColorPickerEmits, GrColorPickerProps } from './GrColorPicker.vue';
+export type { GrColorPickerSize } from './grColorPickerStyles';
+export { formatHexColor, type GrHsla, parseHexColor } from './color';
+export { grColorPickerSafelist } from './safelist';
+export type GrColorPickerInstance = ComponentExposed<typeof GrColorPickerComponent>;

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

@@ -0,0 +1 @@
+export declare const grColorPickerSafelist: string[];