@feugene/granularity 0.30.0 → 0.31.1

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

@@ -2,10 +2,10 @@ import type { GrComponentSize } from '../shared/sizes';
 import type { InputHTMLAttributes } from 'vue';
 export interface GrInputProps {
     /**
-     * Значение поля. Необязательное: без `v-model` поле рисуется пустым.
-     * Дефолт — пустая строка, а не `undefined`: длина значения читается
-     * напрямую (`showClear`), и `undefined` уронил бы рендер.
-     */
+       * Значение поля. Необязательное: без `v-model` поле рисуется пустым.
+       * Дефолт — пустая строка, а не `undefined`: длина значения читается
+       * напрямую (`showClear`), и `undefined` уронил бы рендер.
+       */
     modelValue?: string;
     type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
     placeholder?: string;
@@ -32,10 +32,10 @@ export interface GrInputProps {
     /** Показывать счётчик символов (`len` или `len/maxlength`). */
     showCount?: boolean;
     /**
-     * Фоновая работа по полю (проверка занятости логина, автосохранение):
-     * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —
-     * для этого есть `disabled`/`readonly`.
-     */
+       * Фоновая работа по полю (проверка занятости логина, автосохранение):
+       * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —
+       * для этого есть `disabled`/`readonly`.
+       */
     loading?: boolean;
     /** Кнопка показать/скрыть пароль (только при `type="password"`). */
     passwordToggle?: boolean;
@@ -48,13 +48,26 @@ export interface GrInputProps {
     suffixMinWidth?: string;
     suffixMaxWidth?: string;
     /**
-     * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину
-     * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю
-     * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»
-     * под контент (в пределах min/max), а излишек клипается оболочкой.
-     */
+       * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину
+       * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю
+       * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»
+       * под контент (в пределах min/max), а излишек клипается оболочкой.
+       */
     prefixFixed?: boolean;
     suffixFixed?: boolean;
+    /**
+       * Как выглядят аддоны `#prefix`/`#suffix`.
+       *
+       * `segment` (по умолчанию) — отдельный отсек, отрезанный рамкой и выровненный
+       * по ступени размера: так поле с «₽» и поле с «USD» стоят в колонку.
+       * `inline` — украшение внутри рамки: ни разделителя, ни своей ширины.
+       *
+       * Разница не косметическая. Поисковая строка с лупой в сегменте читается
+       * составным элементом — полем с приклеенной кнопкой, — а не одним полем;
+       * именно поэтому иконку внутри рамки нельзя было выразить аддоном, и
+       * потребители отказывались от неё вовсе.
+       */
+    addon?: 'segment' | 'inline';
 }
 export interface GrInputEmits {
     (e: 'update:modelValue', value: string): void;
@@ -110,6 +123,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     suffixMaxWidth: undefined;
     prefixFixed: boolean;
     suffixFixed: boolean;
+    addon: string;
 }>>, {
     focus: typeof focus;
     blur: typeof blur;
@@ -150,6 +164,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     suffixMaxWidth: undefined;
     prefixFixed: boolean;
     suffixFixed: boolean;
+    addon: string;
 }>>> & Readonly<{
     onClear?: (() => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -186,6 +201,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     passwordToggle: boolean;
     passwordShowLabel: string;
     passwordHideLabel: string;
+    addon: "segment" | "inline";
 }, {}, {}, {}, 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/GrInput/grInputStyles.d.ts

@@ -61,3 +61,19 @@ export declare function grInputFieldClass(options: {
     size: keyof typeof sizes;
     align: keyof typeof textAlign;
 }): string;
+/**
+ * Аддон-сегмент: отрезан рамкой и держит ширину не меньше ступени размера — так
+ * поле с «₽» и поле с «USD» выстраиваются в колонку, а не пляшут по ширине.
+ */
+export declare const addonSegmentPrefixClass = "border-r border-[var(--gr-brd)] px-2";
+export declare const addonSegmentSuffixClass = "border-l border-[var(--gr-brd)] px-2";
+/**
+ * Украшение внутри рамки: ни разделителя, ни своей ширины — лупа в поисковой
+ * строке, единица измерения, счётчик.
+ *
+ * Отдельный режим, а не «сегмент без рамки»: у сегмента ширина выровнена по
+ * ступени размера, и иконка в нём висела бы в пустом отсеке. Здесь поле берёт
+ * ровно ту ширину, что заняло содержимое, а текст начинается сразу за ним.
+ */
+export declare const addonInlinePrefixClass = "pl-3 pr-2";
+export declare const addonInlineSuffixClass = "pl-2 pr-3";

package/dist/types/components/GrSlider/grSliderStyles.d.ts

@@ -26,7 +26,15 @@ export declare const sliderTrackWidthBySize: Record<GrSliderSize, string>;
 export declare const sliderTrackVerticalLengthClass = "h-[var(--gr-slider-length,10rem)]";
 export declare const sliderThumbSizeBySize: Record<GrSliderSize, string>;
 export declare const sliderPaddingBySize: Record<GrSliderSize, string>;
-export declare const sliderRailClass = "absolute inset-0 rounded-[var(--gr-radius-full)] bg-[var(--gr-slider-rail,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+/**
+ * Дорожка — `--gr-brd`, а не полупрозрачный `--gr-muted`.
+ *
+ * Прежний дефолт (`color-mix(--gr-muted 45%, transparent)`) на светлой теме
+ * давал #f1f5f9 при 45 % поверх почти такой же поверхности: непройденная часть
+ * шкалы не читалась вовсе, и слайдер выглядел точкой на пустом месте — по нему
+ * нельзя было понять ни диапазон, ни положение внутри него.
+ */
+export declare const sliderRailClass = "absolute inset-0 rounded-[var(--gr-radius-full)] bg-[var(--gr-slider-rail,var(--gr-brd))]";
 export declare const sliderFillBaseClass = "absolute rounded-[var(--gr-radius-full)]";
 /** Заливка растёт вдоль дорожки: по горизонтали — влево-вправо, по вертикали — снизу вверх. */
 export declare const sliderFillOrientationClass: Record<GrSliderOrientation, string>;

package/dist/types/components/GrTabPanels/GrTabPanel.vue.d.ts

@@ -2,9 +2,9 @@ export interface GrTabPanelProps {
     value: string;
     keepAlive?: boolean;
     /**
-     * Не монтировать содержимое, пока панель не показали впервые. Имеет смысл
-     * вместе с `keepAlive`: без него неактивная панель и так не в DOM.
-     */
+       * Не монтировать содержимое, пока панель не показали впервые. Имеет смысл
+       * вместе с `keepAlive`: без него неактивная панель и так не в DOM.
+       */
     lazy?: boolean;
 }
 type __VLS_Slots = {

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/vue/plugin.ts"],"sourcesContent":["import type { App, Component, Directive, Plugin } from 'vue'\n\n/**\n * Лёгкий контейнер, который может быть зарегистрирован в Vue:\n * - SFC-компонент (Vue сам компилирует `__name` из имени файла) — достаточно просто передать сам компонент,\n * - SFC-компонент с опциональным `install` (по аналогии с Element Plus / Naive UI),\n * - объект с собственным `install`,\n * - либо объект `{ name, component }`, если имя нужно задать явно.\n */\nexport type GranularityInstallableComponent =\n    | (Component & { name?: string; __name?: string; install?: (app: App) => void })\n    | { install: (app: App) => void }\n    | { name: string; component: Component }\n\n/**\n * Директива — либо пара `{ name, directive }`, либо объект с `install`.\n */\nexport type GranularityInstallableDirective =\n    | { name: string; directive: Directive }\n    | { install: (app: App) => void }\n\nexport interface CreateGranularityOptions {\n    /**\n     * Список компонентов для глобальной регистрации.\n     * Пакет сам по себе ничего не импортирует — пользователь передаёт сюда только те компоненты,\n     * которые ему действительно нужны. За счёт этого tree-shaking остаётся полным.\n     */\n    components?: GranularityInstallableComponent[]\n    /**\n     * Список директив. Передавайте ровно те, что нужны, по аналогии с компонентами.\n     */\n    directives?: GranularityInstallableDirective[]\n    /**\n     * Произвольные `provide`-значения. Ключи могут быть `symbol` или строкой.\n     * Пакет не навязывает конкретные ключи (например, i18n) — выбор за пользователем.\n     */\n    provides?: Array<{ key: string | symbol; value: unknown }>\n    /**\n     * Произвольные `app.config.globalProperties` — по умолчанию ничего не ставим.\n     */\n    globalProperties?: Record<string, unknown>\n}\n\n/**\n * Вспомогательная обёртка: превращает произвольный компонент в `GranularityInstallableComponent`\n * с явным именем регистрации.\n *\n * ```ts\n * import { GrButton } from '@feugene/granularity/components/GrButton'\n * import { defineInstallable } from '@feugene/granularity/vue'\n *\n * const installable = defineInstallable(GrButton, 'GrButton')\n * ```\n */\nexport function defineInstallable<T extends Component>(component: T, name: string): GranularityInstallableComponent {\n    return {\n        install(app: App) {\n            app.component(name, component)\n        },\n    }\n}\n\nfunction installComponent(app: App, c: GranularityInstallableComponent): void {\n    if (typeof (c as any).install === 'function') {\n        ;(c as any).install(app)\n        return\n    }\n\n    // Форма `{ name, component }` — явное указание имени для произвольного компонента.\n    // Допускаем как object-компоненты (SFC / options), так и functional-компоненты.\n    if (\n        typeof (c as any).name === 'string'\n        && (c as any).component\n        && (typeof (c as any).component === 'object' || typeof (c as any).component === 'function')\n    ) {\n        const {name, component} = c as { name: string; component: Component }\n        app.component(name, component)\n        return\n    }\n\n    // SFC: Vue 3 компилирует имя компонента из имени файла в поле `__name`\n    // (например, `GrButton.vue` → `__name: 'GrButton'`). Также поддерживаем явное `name`.\n    const resolvedName\n        = (c as Component & { name?: string }).name\n            ?? (c as { __name?: string }).__name\n    if (resolvedName) {\n        app.component(resolvedName, c as Component)\n        return\n    }\n\n    // Сознательно без throw — просто сообщаем в dev-режиме.\n    if (!__GR_DEV__) return\n\n    console.warn('[granularity] component passed to createGranularity has no `install`, `name`, or `__name` — skipped.')\n}\n\nfunction installDirective(app: App, d: GranularityInstallableDirective): void {\n    if ('install' in d && typeof d.install === 'function') {\n        d.install(app)\n        return\n    }\n\n    if ('name' in d && 'directive' in d) {\n        app.directive(d.name, d.directive)\n        return\n    }\n\n    // Сознательно без throw — согласовано с `installComponent`.\n    if (!__GR_DEV__) return\n\n    console.warn('[granularity] directive passed to createGranularity has no `install` or `{ name, directive }` — skipped.')\n}\n\n/**\n * Применяет опции к переданному приложению. Экспортируется отдельно от фабрики —\n * удобно, когда плагин не нужен (например, в тестах).\n */\nexport function installGranularity(app: App, options: CreateGranularityOptions = {}): void {\n    for (const c of options.components ?? [])\n        installComponent(app, c)\n\n    for (const d of options.directives ?? [])\n        installDirective(app, d)\n\n    for (const {key, value} of options.provides ?? [])\n        app.provide(key as any, value)\n\n    if (options.globalProperties) {\n        for (const [key, value] of Object.entries(options.globalProperties))\n            app.config.globalProperties[key] = value\n    }\n}\n\n/**\n * Создаёт Vue-плагин `{ install }`, который при `app.use(...)` зарегистрирует переданные\n * компоненты, директивы и provide-значения. Сам модуль НЕ импортирует ни компонентов,\n * ни директив из пакета — всё приходит снаружи. Это сохраняет гранулярность:\n * бандлер увидит только те символы, которые вы реально передали.\n *\n * ```ts\n * import { createApp } from 'vue'\n * import { createGranularity } from '@feugene/granularity/vue'\n * import { GrButton } from '@feugene/granularity/components/GrButton'\n * import { GrInput }  from '@feugene/granularity/components/GrInput'\n * import { vHotkey }  from '@feugene/granularity/directives/hotkey'\n *\n * createApp(App)\n *   .use(createGranularity({\n *     // Достаточно передать сами компоненты — имя будет взято из `__name` (Vue SFC)\n *     // или из `name`; можно также указать явно через `{ name, component }`.\n *     components: [GrButton, GrInput],\n *     directives: [{ name: 'hotkey', directive: vHotkey }],\n *   }))\n *   .mount('#app')\n * ```\n */\nexport function createGranularity(options: CreateGranularityOptions = {}): Plugin {\n    return {\n        install(app: App) {\n            installGranularity(app, options)\n        },\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,kBAAuC,WAAc,MAA+C;CAChH,OAAO,EACH,QAAQ,KAAU;EACd,IAAI,UAAU,MAAM,SAAS;CACjC,EACJ;AACJ;AAEA,SAAS,iBAAiB,KAAU,GAA0C;CAC1E,IAAI,OAAQ,EAAU,YAAY,YAAY;EACzC,EAAW,QAAQ,GAAG;EACvB;CACJ;CAIA,IACI,OAAQ,EAAU,SAAS,YACvB,EAAU,cACV,OAAQ,EAAU,cAAc,YAAY,OAAQ,EAAU,cAAc,aAClF;EACE,MAAM,EAAC,MAAM,cAAa;EAC1B,IAAI,UAAU,MAAM,SAAS;EAC7B;CACJ;CAIA,MAAM,eACC,EAAoC,QAC/B,EAA0B;CACtC,IAAI,cAAc;EACd,IAAI,UAAU,cAAc,CAAc;EAC1C;CACJ;CAGA,IAAI,EAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,eAAa;CAEjB,QAAQ,KAAK,sGAAsG;AACvH;AAEA,SAAS,iBAAiB,KAAU,GAA0C;CAC1E,IAAI,aAAa,KAAK,OAAO,EAAE,YAAY,YAAY;EACnD,EAAE,QAAQ,GAAG;EACb;CACJ;CAEA,IAAI,UAAU,KAAK,eAAe,GAAG;EACjC,IAAI,UAAU,EAAE,MAAM,EAAE,SAAS;EACjC;CACJ;CAGA,IAAI,EAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,eAAa;CAEjB,QAAQ,KAAK,0GAA0G;AAC3H;;;;;AAMA,SAAgB,mBAAmB,KAAU,UAAoC,CAAC,GAAS;CACvF,KAAK,MAAM,KAAK,QAAQ,cAAc,CAAC,GACnC,iBAAiB,KAAK,CAAC;CAE3B,KAAK,MAAM,KAAK,QAAQ,cAAc,CAAC,GACnC,iBAAiB,KAAK,CAAC;CAE3B,KAAK,MAAM,EAAC,KAAK,WAAU,QAAQ,YAAY,CAAC,GAC5C,IAAI,QAAQ,KAAY,KAAK;CAEjC,IAAI,QAAQ,kBACR,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAQ,gBAAgB,GAC9D,IAAI,OAAO,iBAAiB,OAAO;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,kBAAkB,UAAoC,CAAC,GAAW;CAC9E,OAAO,EACH,QAAQ,KAAU;EACd,mBAAmB,KAAK,OAAO;CACnC,EACJ;AACJ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/vue/plugin.ts"],"sourcesContent":["import type { App, Component, Directive, Plugin } from 'vue'\n\n/**\n * Лёгкий контейнер, который может быть зарегистрирован в Vue:\n * - SFC-компонент (Vue сам компилирует `__name` из имени файла) — достаточно просто передать сам компонент,\n * - SFC-компонент с опциональным `install` (по аналогии с Element Plus / Naive UI),\n * - объект с собственным `install`,\n * - либо объект `{ name, component }`, если имя нужно задать явно.\n */\nexport type GranularityInstallableComponent\n  = | (Component & { name?: string, __name?: string, install?: (app: App) => void })\n    | { install: (app: App) => void }\n    | { name: string, component: Component }\n\n/**\n * Директива — либо пара `{ name, directive }`, либо объект с `install`.\n */\nexport type GranularityInstallableDirective\n  = | { name: string, directive: Directive }\n    | { install: (app: App) => void }\n\nexport interface CreateGranularityOptions {\n  /**\n   * Список компонентов для глобальной регистрации.\n   * Пакет сам по себе ничего не импортирует — пользователь передаёт сюда только те компоненты,\n   * которые ему действительно нужны. За счёт этого tree-shaking остаётся полным.\n   */\n  components?: GranularityInstallableComponent[]\n  /**\n   * Список директив. Передавайте ровно те, что нужны, по аналогии с компонентами.\n   */\n  directives?: GranularityInstallableDirective[]\n  /**\n   * Произвольные `provide`-значения. Ключи могут быть `symbol` или строкой.\n   * Пакет не навязывает конкретные ключи (например, i18n) — выбор за пользователем.\n   */\n  provides?: Array<{ key: string | symbol, value: unknown }>\n  /**\n   * Произвольные `app.config.globalProperties` — по умолчанию ничего не ставим.\n   */\n  globalProperties?: Record<string, unknown>\n}\n\n/**\n * Вспомогательная обёртка: превращает произвольный компонент в `GranularityInstallableComponent`\n * с явным именем регистрации.\n *\n * ```ts\n * import { GrButton } from '@feugene/granularity/components/GrButton'\n * import { defineInstallable } from '@feugene/granularity/vue'\n *\n * const installable = defineInstallable(GrButton, 'GrButton')\n * ```\n */\nexport function defineInstallable<T extends Component>(component: T, name: string): GranularityInstallableComponent {\n  return {\n    install(app: App) {\n      app.component(name, component)\n    },\n  }\n}\n\nfunction installComponent(app: App, c: GranularityInstallableComponent): void {\n  if (typeof (c as any).install === 'function') {\n    ;(c as any).install(app)\n    return\n  }\n\n  // Форма `{ name, component }` — явное указание имени для произвольного компонента.\n  // Допускаем как object-компоненты (SFC / options), так и functional-компоненты.\n  if (\n    typeof (c as any).name === 'string'\n    && (c as any).component\n    && (typeof (c as any).component === 'object' || typeof (c as any).component === 'function')\n  ) {\n    const { name, component } = c as { name: string, component: Component }\n    app.component(name, component)\n    return\n  }\n\n  // SFC: Vue 3 компилирует имя компонента из имени файла в поле `__name`\n  // (например, `GrButton.vue` → `__name: 'GrButton'`). Также поддерживаем явное `name`.\n  const resolvedName\n    = (c as Component & { name?: string }).name\n      ?? (c as { __name?: string }).__name\n  if (resolvedName) {\n    app.component(resolvedName, c as Component)\n    return\n  }\n\n  // Сознательно без throw — просто сообщаем в dev-режиме.\n  if (!__GR_DEV__)\n    return\n\n  console.warn('[granularity] component passed to createGranularity has no `install`, `name`, or `__name` — skipped.')\n}\n\nfunction installDirective(app: App, d: GranularityInstallableDirective): void {\n  if ('install' in d && typeof d.install === 'function') {\n    d.install(app)\n    return\n  }\n\n  if ('name' in d && 'directive' in d) {\n    app.directive(d.name, d.directive)\n    return\n  }\n\n  // Сознательно без throw — согласовано с `installComponent`.\n  if (!__GR_DEV__)\n    return\n\n  console.warn('[granularity] directive passed to createGranularity has no `install` or `{ name, directive }` — skipped.')\n}\n\n/**\n * Применяет опции к переданному приложению. Экспортируется отдельно от фабрики —\n * удобно, когда плагин не нужен (например, в тестах).\n */\nexport function installGranularity(app: App, options: CreateGranularityOptions = {}): void {\n  for (const c of options.components ?? [])\n    installComponent(app, c)\n\n  for (const d of options.directives ?? [])\n    installDirective(app, d)\n\n  for (const { key, value } of options.provides ?? [])\n    app.provide(key as any, value)\n\n  if (options.globalProperties) {\n    for (const [key, value] of Object.entries(options.globalProperties))\n      app.config.globalProperties[key] = value\n  }\n}\n\n/**\n * Создаёт Vue-плагин `{ install }`, который при `app.use(...)` зарегистрирует переданные\n * компоненты, директивы и provide-значения. Сам модуль НЕ импортирует ни компонентов,\n * ни директив из пакета — всё приходит снаружи. Это сохраняет гранулярность:\n * бандлер увидит только те символы, которые вы реально передали.\n *\n * ```ts\n * import { createApp } from 'vue'\n * import { createGranularity } from '@feugene/granularity/vue'\n * import { GrButton } from '@feugene/granularity/components/GrButton'\n * import { GrInput }  from '@feugene/granularity/components/GrInput'\n * import { vHotkey }  from '@feugene/granularity/directives/hotkey'\n *\n * createApp(App)\n *   .use(createGranularity({\n *     // Достаточно передать сами компоненты — имя будет взято из `__name` (Vue SFC)\n *     // или из `name`; можно также указать явно через `{ name, component }`.\n *     components: [GrButton, GrInput],\n *     directives: [{ name: 'hotkey', directive: vHotkey }],\n *   }))\n *   .mount('#app')\n * ```\n */\nexport function createGranularity(options: CreateGranularityOptions = {}): Plugin {\n  return {\n    install(app: App) {\n      installGranularity(app, options)\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,kBAAuC,WAAc,MAA+C;CAClH,OAAO,EACL,QAAQ,KAAU;EAChB,IAAI,UAAU,MAAM,SAAS;CAC/B,EACF;AACF;AAEA,SAAS,iBAAiB,KAAU,GAA0C;CAC5E,IAAI,OAAQ,EAAU,YAAY,YAAY;EAC3C,EAAW,QAAQ,GAAG;EACvB;CACF;CAIA,IACE,OAAQ,EAAU,SAAS,YACvB,EAAU,cACV,OAAQ,EAAU,cAAc,YAAY,OAAQ,EAAU,cAAc,aAChF;EACA,MAAM,EAAE,MAAM,cAAc;EAC5B,IAAI,UAAU,MAAM,SAAS;EAC7B;CACF;CAIA,MAAM,eACD,EAAoC,QACjC,EAA0B;CAClC,IAAI,cAAc;EAChB,IAAI,UAAU,cAAc,CAAc;EAC1C;CACF;CAGA,IAAI,EAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,eACF;CAEF,QAAQ,KAAK,sGAAsG;AACrH;AAEA,SAAS,iBAAiB,KAAU,GAA0C;CAC5E,IAAI,aAAa,KAAK,OAAO,EAAE,YAAY,YAAY;EACrD,EAAE,QAAQ,GAAG;EACb;CACF;CAEA,IAAI,UAAU,KAAK,eAAe,GAAG;EACnC,IAAI,UAAU,EAAE,MAAM,EAAE,SAAS;EACjC;CACF;CAGA,IAAI,EAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,eACF;CAEF,QAAQ,KAAK,0GAA0G;AACzH;;;;;AAMA,SAAgB,mBAAmB,KAAU,UAAoC,CAAC,GAAS;CACzF,KAAK,MAAM,KAAK,QAAQ,cAAc,CAAC,GACrC,iBAAiB,KAAK,CAAC;CAEzB,KAAK,MAAM,KAAK,QAAQ,cAAc,CAAC,GACrC,iBAAiB,KAAK,CAAC;CAEzB,KAAK,MAAM,EAAE,KAAK,WAAW,QAAQ,YAAY,CAAC,GAChD,IAAI,QAAQ,KAAY,KAAK;CAE/B,IAAI,QAAQ,kBACV,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAQ,gBAAgB,GAChE,IAAI,OAAO,iBAAiB,OAAO;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,kBAAkB,UAAoC,CAAC,GAAW;CAChF,OAAO,EACL,QAAQ,KAAU;EAChB,mBAAmB,KAAK,OAAO;CACjC,EACF;AACF"}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@feugene/granularity",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "framework": "vue",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
@@ -5545,6 +5545,15 @@
                 "kind": "expression",
                 "type": "GrInputTextAlign | undefined"
               }
+            },
+            {
+              "name": "addon",
+              "description": "Как выглядят аддоны `#prefix`/`#suffix`. `segment` (по умолчанию) — отдельный отсек, отрезанный рамкой и выровненный по ступени размера: так поле с «₽» и поле с «USD» стоят в колонку. `inline` — украшение внутри рамки: ни разделителя, ни своей ширины. Разница не косметическая. Поисковая строка с лупой в сегменте читается составным элементом — полем с приклеенной кнопкой, — а не одним полем; именно поэтому иконку внутри рамки нельзя было выразить аддоном, и потребители отказывались от неё вовсе.",
+              "default": "\"segment\"",
+              "value": {
+                "kind": "expression",
+                "type": "\"inline\" | \"segment\" | undefined"
+              }
             }
           ],
           "slots": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feugene/granularity",
   "description": "Granularity design system package with Vue 3 components, consumed via the `@feugene/unocss-preset-granular` preset.",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",
@@ -592,7 +592,7 @@
   },
   "peerDependencies": {
     "@feugene/fint-i18n": "^0.6.0",
-    "@feugene/unocss-preset-granular": "^0.10.1",
+    "@feugene/unocss-preset-granular": "^0.11.0",
     "@floating-ui/dom": "^1.8.0",
     "vue": "^3.5.0"
   },
@@ -608,7 +608,7 @@
     "@antfu/eslint-config": "^9.1.0",
     "@feugene/fint-i18n": "^0.6.0",
     "@feugene/granularity-test-kit": "^0.7.0",
-    "@feugene/unocss-preset-granular": "^0.10.1",
+    "@feugene/unocss-preset-granular": "^0.11.0",
     "@floating-ui/dom": "^1.8.0",
     "@iconify-json/lucide": "^1.2.117",
     "@types/node": "^25.9.5",

package/dist/chunks/config-DO8mjeIo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-DO8mjeIo.js","names":[],"sources":["../../src/components/GrInput/safelist.ts","../../src/components/GrInput/config.ts"],"sourcesContent":["import { splitClassTokens } from '../shared/classTokens'\nimport { invalidClass, shellBaseClass, shellDisabledClass, shellEnabledClass, sizes, states, textAlign } from './grInputStyles'\n\nexport const grInputSafelist = [...new Set([\n  ...Object.values(sizes).flatMap(splitClassTokens),\n  ...Object.values(textAlign).flatMap(splitClassTokens),\n  ...Object.values(states).flatMap(splitClassTokens),\n  ...splitClassTokens(invalidClass),\n  ...splitClassTokens(shellBaseClass),\n  ...splitClassTokens(shellEnabledClass),\n  ...splitClassTokens(shellDisabledClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\nimport { grInputSafelist } from './safelist'\n\nexport const grInputConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrInput',\n  safelist: grInputSafelist,\n})\n"],"mappings":";;;;AAGA,IAAa,kBAAkB,CAAC,mBAAG,IAAI,IAAI;CACzC,GAAG,OAAO,OAAO,KAAK,CAAC,CAAC,QAAQ,gBAAgB;CAChD,GAAG,OAAO,OAAO,SAAS,CAAC,CAAC,QAAQ,gBAAgB;CACpD,GAAG,OAAO,OAAO,MAAM,CAAC,CAAC,QAAQ,gBAAgB;CACjD,GAAG,iBAAiB,YAAY;CAChC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,kBAAkB;AACxC,CAAC,CAAC;;;ACRF,IAAa,gBAAgB,wBAAwB,OAAO,KAAK,KAAK;CACpE,MAAM;CACN,UAAU;AACZ,CAAC"}

package/dist/chunks/grButtonStyles-B_-YRE__.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grButtonStyles-B_-YRE__.js","names":[],"sources":["../../src/components/GrButton/grButtonStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nimport type { GrTone } from '../shared/tones'\n\nexport type GrButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-border'\nexport type GrButtonTone = GrTone\nexport type GrButtonSize = GrComponentSize\n\nexport type GrButtonClassOptions = {\n  variant: GrButtonVariant\n  tone: GrButtonTone\n  size: GrButtonSize\n  square: boolean\n  /** Необязательные: `grButtonClass` — публичный хелпер, его зовёт и `GrRadio`. */\n  disabled?: boolean\n  block?: boolean\n}\n\nexport type GrButtonToneTokens = {\n  solidBackground: string\n  solidBackgroundHover: string\n  solidBackgroundActive: string\n  solidForeground: string\n  accentText: string\n  softBackground: string\n  softBackgroundHover: string\n  softBackgroundActive: string\n  softForeground: string\n  border: string\n  borderHover: string\n  borderActive: string\n}\n\nexport const base =\n  'inline-flex items-center justify-center gap-2 select-none whitespace-nowrap rounded-[var(--gr-button-radius,0.375rem)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed'\n\n/** Кнопка на всю ширину контейнера. */\nexport const blockClass = 'w-full'\n\n/**\n * Отключённая кнопка гасится токенами, а не `opacity`: прозрачность разбавляет\n * выверенные на AA цвета, а кнопка чаще всего оказывается на цветной подложке,\n * где разбавленный текст проваливается первым.\n *\n * Классы применяются ВМЕСТО вариантных, а не поверх: два `bg-*` одной\n * специфичности разрулил бы порядок в сгенерированном CSS, а не порядок в\n * списке классов. Отсюда же и разбиение по вариантам: у прозрачных\n * (`outline`, `ghost`, `ghost-border`) заливки нет и в отключённом виде —\n * иначе стрелка пагинации превращалась бы в залитую плашку.\n */\nexport const disabledClassByVariant: Record<GrButtonVariant, string> = {\n  primary: 'bg-[var(--gr-button-disabled-bg)] text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed',\n  secondary: 'bg-[var(--gr-button-disabled-bg)] text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed',\n  outline: 'bg-transparent text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed',\n  ghost: 'bg-transparent text-[var(--gr-button-disabled-fg)] cursor-not-allowed',\n  'ghost-border': 'bg-transparent text-[var(--gr-button-disabled-fg)] border border-transparent cursor-not-allowed',\n}\n\nexport const grButtonBaseClass = base\n\nexport const sizes: Record<GrButtonSize, string> = {\n  xs: 'h-7 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] px-2.5',\n  sm: 'h-8 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] px-3',\n  md: 'h-10 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] px-4',\n  lg: 'h-11 text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)] px-5',\n}\n\n/**\n * Квадратный режим — через `--gr-button-square-size` с размерным дефолтом в\n * fallback: потребитель задаёт переменную в своём CSS и подгоняет кнопку под\n * свою сетку (приём из `GrSlider`). Размер задаётся только здесь: инлайн-стиль\n * в SFC перекрыл бы эти классы, и переменная перестала бы что-либо значить.\n */\nexport const squareSizes: Record<GrButtonSize, string> = {\n  xs: 'h-[var(--gr-button-square-size,1.75rem)] w-[var(--gr-button-square-size,1.75rem)] min-w-[var(--gr-button-square-size,1.75rem)] p-0',\n  sm: 'h-[var(--gr-button-square-size,2rem)] w-[var(--gr-button-square-size,2rem)] min-w-[var(--gr-button-square-size,2rem)] p-0',\n  md: 'h-[var(--gr-button-square-size,2.5rem)] w-[var(--gr-button-square-size,2.5rem)] min-w-[var(--gr-button-square-size,2.5rem)] p-0',\n  lg: 'h-[var(--gr-button-square-size,2.75rem)] w-[var(--gr-button-square-size,2.75rem)] min-w-[var(--gr-button-square-size,2.75rem)] p-0',\n}\n\nexport const tones: Record<GrButtonTone, GrButtonToneTokens> = {\n  primary: {\n    solidBackground: 'var(--gr-button-primary-bg,var(--gr-primary))',\n    solidBackgroundHover: 'var(--gr-button-primary-bg-hover,var(--gr-primary-hover))',\n    solidBackgroundActive: 'var(--gr-button-primary-bg-active,var(--gr-primary-active))',\n    solidForeground: 'var(--gr-button-primary-fg,var(--gr-primary-fg))',\n    accentText: 'var(--gr-accent-fg)',\n    softBackground: 'var(--gr-button-primary-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-primary-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-primary-soft-bg-active)',\n    softForeground: 'var(--gr-accent-fg)',\n    border: 'var(--gr-primary)',\n    borderHover: 'var(--gr-primary-hover)',\n    borderActive: 'var(--gr-primary-active)',\n  },\n  neutral: {\n    solidBackground: 'var(--gr-secondary)',\n    solidBackgroundHover: 'var(--gr-secondary-hover)',\n    solidBackgroundActive: 'var(--gr-secondary-active)',\n    solidForeground: 'var(--gr-secondary-fg)',\n    accentText: 'var(--gr-fg)',\n    softBackground: 'var(--gr-secondary)',\n    softBackgroundHover: 'var(--gr-secondary-hover)',\n    softBackgroundActive: 'var(--gr-secondary-active)',\n    softForeground: 'var(--gr-secondary-fg)',\n    border: 'var(--gr-brd)',\n    borderHover: 'var(--gr-brd-hover,var(--gr-brd))',\n    borderActive: 'var(--gr-brd-active,var(--gr-brd))',\n  },\n  success: {\n    solidBackground: 'var(--gr-button-success-bg,var(--gr-success))',\n    solidBackgroundHover: 'var(--gr-button-success-bg-hover,var(--gr-success-hover))',\n    solidBackgroundActive: 'var(--gr-button-success-bg-active,var(--gr-success-active))',\n    solidForeground: 'var(--gr-button-success-fg,var(--gr-success-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-success-text,var(--gr-success))',\n    softBackground: 'var(--gr-button-success-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-success-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-success-soft-bg-active)',\n    softForeground: 'var(--gr-success-text,var(--gr-success))',\n    border: 'var(--gr-success)',\n    borderHover: 'var(--gr-success-hover)',\n    borderActive: 'var(--gr-success-active)',\n  },\n  warning: {\n    solidBackground: 'var(--gr-button-warning-bg,var(--gr-warning))',\n    solidBackgroundHover: 'var(--gr-button-warning-bg-hover,var(--gr-warning-hover))',\n    solidBackgroundActive: 'var(--gr-button-warning-bg-active,var(--gr-warning-active))',\n    solidForeground: 'var(--gr-button-warning-fg,var(--gr-warning-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-warning-text,var(--gr-warning))',\n    softBackground: 'var(--gr-button-warning-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-warning-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-warning-soft-bg-active)',\n    softForeground: 'var(--gr-warning-text,var(--gr-warning))',\n    border: 'var(--gr-warning)',\n    borderHover: 'var(--gr-warning-hover)',\n    borderActive: 'var(--gr-warning-active)',\n  },\n  danger: {\n    solidBackground: 'var(--gr-button-danger-bg,var(--gr-danger))',\n    solidBackgroundHover: 'var(--gr-button-danger-bg-hover,var(--gr-danger-hover))',\n    solidBackgroundActive: 'var(--gr-button-danger-bg-active,var(--gr-danger-active))',\n    solidForeground: 'var(--gr-button-danger-fg,var(--gr-danger-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-danger-text,var(--gr-danger))',\n    softBackground: 'var(--gr-button-danger-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-danger-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-danger-soft-bg-active)',\n    softForeground: 'var(--gr-danger-text,var(--gr-danger))',\n    border: 'var(--gr-danger)',\n    borderHover: 'var(--gr-danger-hover)',\n    borderActive: 'var(--gr-danger-active)',\n  },\n  info: {\n    solidBackground: 'var(--gr-button-info-bg,var(--gr-info))',\n    solidBackgroundHover: 'var(--gr-button-info-bg-hover,var(--gr-info-hover))',\n    solidBackgroundActive: 'var(--gr-button-info-bg-active,var(--gr-info-active))',\n    solidForeground: 'var(--gr-button-info-fg,var(--gr-info-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-info-text,var(--gr-info))',\n    softBackground: 'var(--gr-button-info-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-info-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-info-soft-bg-active)',\n    softForeground: 'var(--gr-info-text,var(--gr-info))',\n    border: 'var(--gr-info)',\n    borderHover: 'var(--gr-info-hover)',\n    borderActive: 'var(--gr-info-active)',\n  },\n  slate: {\n    solidBackground: 'var(--gr-button-slate-bg,var(--gr-slate))',\n    solidBackgroundHover: 'var(--gr-button-slate-bg-hover,var(--gr-slate-hover))',\n    solidBackgroundActive: 'var(--gr-button-slate-bg-active,var(--gr-slate-active))',\n    solidForeground: 'var(--gr-button-slate-fg,var(--gr-slate-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-slate-text,var(--gr-slate))',\n    softBackground: 'var(--gr-button-slate-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-slate-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-slate-soft-bg-active)',\n    softForeground: 'var(--gr-slate-text,var(--gr-slate))',\n    border: 'var(--gr-slate)',\n    borderHover: 'var(--gr-slate-hover)',\n    borderActive: 'var(--gr-slate-active)',\n  },\n  azure: {\n    solidBackground: 'var(--gr-button-azure-bg,var(--gr-azure))',\n    solidBackgroundHover: 'var(--gr-button-azure-bg-hover,var(--gr-azure-hover))',\n    solidBackgroundActive: 'var(--gr-button-azure-bg-active,var(--gr-azure-active))',\n    solidForeground: 'var(--gr-button-azure-fg,var(--gr-azure-fg,var(--gr-fg)))',\n    accentText: 'var(--gr-azure-text,var(--gr-azure))',\n    softBackground: 'var(--gr-button-azure-soft-bg)',\n    softBackgroundHover: 'var(--gr-button-azure-soft-bg-hover)',\n    softBackgroundActive: 'var(--gr-button-azure-soft-bg-active)',\n    softForeground: 'var(--gr-azure-text,var(--gr-azure))',\n    border: 'var(--gr-azure)',\n    borderHover: 'var(--gr-azure-hover)',\n    borderActive: 'var(--gr-azure-active)',\n  },\n}\n\nfunction withVar(token: string): string {\n  return `[${token}]`\n}\n\nexport function variantClass(variant: GrButtonVariant, tone: GrButtonTone): string {\n  const tokens = tones[tone]\n\n  if (variant === 'primary') {\n    return [\n      `bg-${withVar(tokens.solidBackground)}`,\n      `text-${withVar(tokens.solidForeground)}`,\n      `border border-${withVar(tokens.solidBackground)}`,\n      `hover:bg-${withVar(tokens.solidBackgroundHover)}`,\n      `hover:border-${withVar(tokens.solidBackgroundHover)}`,\n      `active:bg-${withVar(tokens.solidBackgroundActive)}`,\n      `hover:active:bg-${withVar(tokens.solidBackgroundActive)}`,\n      `active:border-${withVar(tokens.solidBackgroundActive)}`,\n      `hover:active:border-${withVar(tokens.solidBackgroundActive)}`,\n    ].join(' ')\n  }\n\n  if (variant === 'secondary') {\n    return [\n      `bg-${withVar(tokens.softBackground)}`,\n      `text-${withVar(tokens.softForeground)}`,\n      `border border-${withVar(tokens.border)}`,\n      `hover:bg-${withVar(tokens.softBackgroundHover)}`,\n      `hover:border-${withVar(tokens.borderHover)}`,\n      `active:bg-${withVar(tokens.softBackgroundActive)}`,\n      `hover:active:bg-${withVar(tokens.softBackgroundActive)}`,\n      `active:border-${withVar(tokens.borderActive)}`,\n      `hover:active:border-${withVar(tokens.borderActive)}`,\n    ].join(' ')\n  }\n\n  if (variant === 'outline') {\n    return [\n      'bg-transparent',\n      `text-${withVar(tokens.accentText)}`,\n      `border border-${withVar(tokens.border)}`,\n      `hover:bg-${withVar(tokens.softBackgroundHover)}`,\n      `hover:border-${withVar(tokens.borderHover)}`,\n      `active:bg-${withVar(tokens.softBackgroundActive)}`,\n      `hover:active:bg-${withVar(tokens.softBackgroundActive)}`,\n      `active:border-${withVar(tokens.borderActive)}`,\n      `hover:active:border-${withVar(tokens.borderActive)}`,\n    ].join(' ')\n  }\n\n  if (variant === 'ghost') {\n    return [\n      'bg-transparent',\n      `text-${withVar(tokens.accentText)}`,\n      `hover:bg-${withVar(tokens.softBackgroundHover)}`,\n      `active:bg-${withVar(tokens.softBackgroundActive)}`,\n      `hover:active:bg-${withVar(tokens.softBackgroundActive)}`,\n    ].join(' ')\n  }\n\n  return [\n    'bg-transparent',\n    `text-${withVar(tokens.accentText)}`,\n    'border border-transparent',\n    `hover:bg-${withVar(tokens.softBackgroundHover)}`,\n    `hover:border-${withVar(tokens.borderHover)}`,\n    `active:bg-${withVar(tokens.softBackgroundActive)}`,\n    `hover:active:bg-${withVar(tokens.softBackgroundActive)}`,\n    `active:border-${withVar(tokens.borderActive)}`,\n    `hover:active:border-${withVar(tokens.borderActive)}`,\n  ].join(' ')\n}\n\nexport function grButtonClass(options: GrButtonClassOptions): string {\n  return [\n    options.square ? squareSizes[options.size] : sizes[options.size],\n    options.block ? blockClass : '',\n    // `loading` сюда не входит: у него свой спиннер, и выглядеть отключённым он\n    // не должен.\n    options.disabled ? disabledClassByVariant[options.variant] : variantClass(options.variant, options.tone),\n  ].filter(Boolean).join(' ')\n}\n"],"mappings":"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"}

package/dist/chunks/grSliderStyles-B5uNxNJq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grSliderStyles-B5uNxNJq.js","names":[],"sources":["../../src/components/GrSlider/grSliderStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrSliderSize = GrComponentSize\n/** Значение: число (single) или кортеж `[lo, hi]` (range при `range=true`). */\nexport type GrSliderModelValue = number | [number, number]\n/** Метка деления: словарь `value → label` или просто массив значений (label = значение). */\nexport type GrSliderMarks = Record<number, string> | number[]\n\n/** Ориентация дорожки. В вертикальной минимум внизу — как на регуляторе громкости. */\nexport const GR_SLIDER_ORIENTATIONS = ['horizontal', 'vertical'] as const\nexport type GrSliderOrientation = typeof GR_SLIDER_ORIENTATIONS[number]\n\n/**\n * Кастомизация через CSS-переменные (можно задать на самом слайдере или любом\n * предке — inline `style`, класс, тема). Значение по умолчанию — второй аргумент\n * `var(--name, default)`, поэтому переопределять можно точечно:\n *\n * - `--gr-slider-rail`         — цвет фона дорожки (неактивная часть).\n * - `--gr-slider-fill`         — цвет активной (заполненной) части.\n * - `--gr-slider-thumb-bg`     — заливка бегунка.\n * - `--gr-slider-thumb-border` — цвет окантовки бегунка (по умолчанию = fill).\n * - `--gr-slider-thumb-size`   — диаметр бегунка (по умолчанию — из `size`).\n * - `--gr-slider-track-height` — толщина дорожки (по умолчанию — из `size`).\n * - `--gr-slider-length`       — длина вертикальной дорожки (по умолчанию `10rem`).\n */\n\n// Высота дорожки (rail/fill) по размеру — дефолт для `--gr-slider-track-height`.\nexport const sliderTrackHeightBySize: Record<GrSliderSize, string> = {\n  xs: 'h-[var(--gr-slider-track-height,0.1875rem)]',\n  sm: 'h-[var(--gr-slider-track-height,0.25rem)]',\n  md: 'h-[var(--gr-slider-track-height,0.375rem)]',\n  lg: 'h-[var(--gr-slider-track-height,0.5rem)]',\n}\n\n/** В вертикали та же толщина задаёт ширину, а длину берёт `--gr-slider-length`. */\nexport const sliderTrackWidthBySize: Record<GrSliderSize, string> = {\n  xs: 'w-[var(--gr-slider-track-height,0.1875rem)]',\n  sm: 'w-[var(--gr-slider-track-height,0.25rem)]',\n  md: 'w-[var(--gr-slider-track-height,0.375rem)]',\n  lg: 'w-[var(--gr-slider-track-height,0.5rem)]',\n}\n\nexport const sliderTrackVerticalLengthClass = 'h-[var(--gr-slider-length,10rem)]'\n\n// Размер «бегунка» (thumb) по размеру — дефолт для `--gr-slider-thumb-size`.\nexport const sliderThumbSizeBySize: Record<GrSliderSize, string> = {\n  xs: 'h-[var(--gr-slider-thumb-size,0.75rem)] w-[var(--gr-slider-thumb-size,0.75rem)]',\n  sm: 'h-[var(--gr-slider-thumb-size,0.875rem)] w-[var(--gr-slider-thumb-size,0.875rem)]',\n  md: 'h-[var(--gr-slider-thumb-size,1rem)] w-[var(--gr-slider-thumb-size,1rem)]',\n  lg: 'h-[var(--gr-slider-thumb-size,1.25rem)] w-[var(--gr-slider-thumb-size,1.25rem)]',\n}\n\n// Вертикальный отступ обёртки, чтобы thumb не обрезался краями дорожки.\nexport const sliderPaddingBySize: Record<GrSliderSize, string> = {\n  xs: 'py-1',\n  sm: 'py-1.5',\n  md: 'py-2',\n  lg: 'py-2.5',\n}\n\nexport const sliderRailClass = 'absolute inset-0 rounded-[var(--gr-radius-full)] bg-[var(--gr-slider-rail,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]'\n\nexport const sliderFillBaseClass = 'absolute rounded-[var(--gr-radius-full)]'\n\n/** Заливка растёт вдоль дорожки: по горизонтали — влево-вправо, по вертикали — снизу вверх. */\nexport const sliderFillOrientationClass: Record<GrSliderOrientation, string> = {\n  horizontal: 'top-0 bottom-0',\n  vertical: 'left-0 right-0',\n}\n\n/**\n * Недоступный слайдер гасится токенами, а не `opacity`: прозрачность разбавляет\n * выверенные на AA токены и роняет контраст подписей меток.\n */\nexport const sliderFillDisabledClass = 'bg-[var(--gr-disabled-fg)]'\nexport const sliderFillEnabledClass = 'bg-[var(--gr-slider-fill,var(--gr-primary))]'\n\nexport function sliderFillClass(disabled: boolean): string {\n  return [sliderFillBaseClass, disabled ? sliderFillDisabledClass : sliderFillEnabledClass].join(' ')\n}\n\n// Окантовка бегунка: цветной border (по умолчанию = fill) + тонкая контрастная\n// обводка (`ring`), чтобы бегунок не сливался ни с фоном страницы, ни с заливкой.\nexport const sliderThumbBaseClass = 'absolute rounded-[var(--gr-radius-full)] border-2 border-[var(--gr-slider-thumb-border,var(--gr-slider-fill,var(--gr-primary)))] bg-[var(--gr-slider-thumb-bg,var(--gr-bg))] ring-1 ring-[color-mix(in_srgb,var(--gr-fg)_22%,transparent)] shadow-[var(--gr-shadow-1)] transition-[box-shadow,transform] duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--gr-bg)]'\n\n/** Бегунок центрируется поперёк дорожки, а вдоль неё его ведёт inline-стиль. */\nexport const sliderThumbOrientationClass: Record<GrSliderOrientation, string> = {\n  horizontal: 'top-1/2 -translate-x-1/2 -translate-y-1/2',\n  vertical: 'left-1/2 -translate-x-1/2 translate-y-1/2',\n}\n\nexport const sliderThumbDisabledClass = 'cursor-not-allowed border-[var(--gr-disabled-fg)] bg-[var(--gr-disabled-bg)]'\nexport const sliderThumbEnabledClass = 'cursor-grab active:cursor-grabbing hover:scale-110'\n\nexport function sliderThumbClass(options: {\n  size: GrSliderSize\n  disabled: boolean\n  orientation?: GrSliderOrientation\n}): string {\n  return [\n    sliderThumbBaseClass,\n    sliderThumbOrientationClass[options.orientation ?? 'horizontal'],\n    sliderThumbSizeBySize[options.size],\n    options.disabled ? sliderThumbDisabledClass : sliderThumbEnabledClass,\n  ].join(' ')\n}\n\nexport const sliderTooltipBaseClass = 'pointer-events-none absolute whitespace-nowrap rounded-[var(--gr-radius-control)] bg-[var(--gr-fg)] px-1.5 py-0.5 text-[length:var(--gr-text-2xs)] font-medium leading-tight text-[var(--gr-bg)] shadow-[var(--gr-shadow-2)]'\n\n/** В вертикали подсказка уходит вбок: над бегунком она легла бы на дорожку. */\nexport const sliderTooltipOrientationClass: Record<GrSliderOrientation, string> = {\n  horizontal: 'bottom-full left-1/2 mb-2 -translate-x-1/2',\n  vertical: 'right-full top-1/2 mr-2 -translate-y-1/2',\n}\n\nexport function sliderTooltipClass(orientation: GrSliderOrientation = 'horizontal'): string {\n  return [sliderTooltipBaseClass, sliderTooltipOrientationClass[orientation]].join(' ')\n}\n\nexport const sliderMarkTickBaseClass = 'absolute h-1.5 w-1.5 rounded-[var(--gr-radius-full)] bg-[var(--gr-bg)] ring-1 ring-[var(--gr-brd)]'\n\nexport const sliderMarkTickOrientationClass: Record<GrSliderOrientation, string> = {\n  horizontal: 'top-1/2 -translate-x-1/2 -translate-y-1/2',\n  vertical: 'left-1/2 -translate-x-1/2 translate-y-1/2',\n}\n\nexport function sliderMarkTickClass(orientation: GrSliderOrientation = 'horizontal'): string {\n  return [sliderMarkTickBaseClass, sliderMarkTickOrientationClass[orientation]].join(' ')\n}\n// Подписи меток уводим под дорожку (`top-full` + отступ, ниже бегунка) и запрещаем\n// перенос (`whitespace-nowrap`) — иначе крайняя подпись рвётся по буквам.\nexport const sliderMarkLabelClass = 'absolute whitespace-nowrap text-[length:var(--gr-text-2xs)] leading-none text-[var(--gr-muted-fg)]'\n\nexport const sliderMarkLabelDisabledClass = 'text-[var(--gr-disabled-fg)]'\n\n/** Вертикальные подписи уходят вправо от дорожки: под ней им места нет. */\nexport const sliderMarkLabelVerticalClass = 'left-full ml-2.5 translate-y-1/2'\nexport const sliderMarkLabelHorizontalClass = 'top-full mt-2.5'\n\n// Выравнивание подписи по позиции: центр для внутренних меток, а крайние (0% и\n// 100%) прижимаем внутрь, чтобы они не вылезали за края дорожки и не обрезались.\nexport function sliderMarkLabelClassFor(\n  pct: number,\n  options: { orientation?: GrSliderOrientation, disabled?: boolean } = {},\n): string {\n  const orientation = options.orientation ?? 'horizontal'\n  const tone = options.disabled ? sliderMarkLabelDisabledClass : ''\n\n  if (orientation === 'vertical')\n    return [sliderMarkLabelClass, sliderMarkLabelVerticalClass, tone].filter(Boolean).join(' ')\n\n  const align = pct <= 0.5 ? 'translate-x-0' : pct >= 99.5 ? '-translate-x-full' : '-translate-x-1/2'\n  return [sliderMarkLabelClass, sliderMarkLabelHorizontalClass, align, tone].filter(Boolean).join(' ')\n}\n\nexport const sliderRootBaseClass = 'relative select-none'\n\nexport const sliderRootOrientationClass: Record<GrSliderOrientation, string> = {\n  horizontal: 'w-full',\n  vertical: 'inline-flex',\n}\n\n/** Горизонтальный отступ обёртки вертикали — та же роль, что у `py-*` у горизонтали. */\nexport const sliderPaddingVerticalBySize: Record<GrSliderSize, string> = {\n  xs: 'px-1',\n  sm: 'px-1.5',\n  md: 'px-2',\n  lg: 'px-2.5',\n}\n\nexport function sliderRootClass(options: {\n  size: GrSliderSize\n  disabled: boolean\n  hasMarks?: boolean\n  orientation?: GrSliderOrientation\n}): string {\n  const orientation = options.orientation ?? 'horizontal'\n  const vertical = orientation === 'vertical'\n\n  return [\n    sliderRootBaseClass,\n    sliderRootOrientationClass[orientation],\n    vertical ? sliderPaddingVerticalBySize[options.size] : sliderPaddingBySize[options.size],\n    // Резервируем место под подписи меток, чтобы они не наезжали на соседний контент.\n    options.hasMarks ? (vertical ? 'mr-10' : 'mb-7') : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAa,0BAAwD;CACnE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,yBAAuD;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,iCAAiC;AAG9C,IAAa,wBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAGA,IAAa,sBAAoD;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,kBAAkB;AAE/B,IAAa,sBAAsB;;AAGnC,IAAa,6BAAkE;CAC7E,YAAY;CACZ,UAAU;AACZ;;;;;AAMA,IAAa,0BAA0B;AACvC,IAAa,yBAAyB;AAEtC,SAAgB,gBAAgB,UAA2B;CACzD,OAAO,CAAC,qBAAqB,WAAW,0BAA0B,sBAAsB,CAAC,CAAC,KAAK,GAAG;AACpG;AAIA,IAAa,uBAAuB;;AAGpC,IAAa,8BAAmE;CAC9E,YAAY;CACZ,UAAU;AACZ;AAEA,IAAa,2BAA2B;AACxC,IAAa,0BAA0B;AAEvC,SAAgB,iBAAiB,SAItB;CACT,OAAO;EACL;EACA,4BAA4B,QAAQ,eAAe;EACnD,sBAAsB,QAAQ;EAC9B,QAAQ,WAAW,2BAA2B;CAChD,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAa,yBAAyB;;AAGtC,IAAa,gCAAqE;CAChF,YAAY;CACZ,UAAU;AACZ;AAEA,SAAgB,mBAAmB,cAAmC,cAAsB;CAC1F,OAAO,CAAC,wBAAwB,8BAA8B,YAAY,CAAC,CAAC,KAAK,GAAG;AACtF;AAEA,IAAa,0BAA0B;AAEvC,IAAa,iCAAsE;CACjF,YAAY;CACZ,UAAU;AACZ;AAEA,SAAgB,oBAAoB,cAAmC,cAAsB;CAC3F,OAAO,CAAC,yBAAyB,+BAA+B,YAAY,CAAC,CAAC,KAAK,GAAG;AACxF;AAGA,IAAa,uBAAuB;AAEpC,IAAa,+BAA+B;;AAG5C,IAAa,+BAA+B;AAC5C,IAAa,iCAAiC;AAI9C,SAAgB,wBACd,KACA,UAAqE,CAAC,GAC9D;CACR,MAAM,cAAc,QAAQ,eAAe;CAC3C,MAAM,OAAO,QAAQ,WAAW,+BAA+B;CAE/D,IAAI,gBAAgB,YAClB,OAAO;EAAC;EAAsB;EAA8B;CAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAG5F,OAAO;EAAC;EAAsB;EADhB,OAAO,KAAM,kBAAkB,OAAO,OAAO,sBAAsB;EACZ;CAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACrG;AAEA,IAAa,sBAAsB;AAEnC,IAAa,6BAAkE;CAC7E,YAAY;CACZ,UAAU;AACZ;;AAGA,IAAa,8BAA4D;CACvE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,gBAAgB,SAKrB;CACT,MAAM,cAAc,QAAQ,eAAe;CAC3C,MAAM,WAAW,gBAAgB;CAEjC,OAAO;EACL;EACA,2BAA2B;EAC3B,WAAW,4BAA4B,QAAQ,QAAQ,oBAAoB,QAAQ;EAEnF,QAAQ,WAAY,WAAW,UAAU,SAAU;CACrD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb"}