@feugene/granularity 0.18.0 → 0.20.0

package/README.md

@@ -43,6 +43,14 @@ strategies.
     - `@feugene/granularity/uno` — browser-safe preset;
     - `@feugene/granularity/uno-node` — node-oriented preset with CSS/preflight helpers.
 
+## Limitations
+
+**RTL is not supported.** Components lay themselves out with physical directions (`pl-`/`pr-`,
+`ml-`/`mr-`, `left-`/`right-`), and `dir="rtl"` is not read anywhere: a right-to-left document will
+render mirrored padding, offsets and floating panels. This is a deliberate decision for the `1.x`
+line — moving to logical properties changes how every component looks, which is a visual breaking
+change and belongs in a major release, not a patch. See [`docs/styling.md`](./docs/styling.md).
+
 ## Quick start
 
 ```bash

package/dist/chunks/chevron-left-D8AUBAM7.js

@@ -0,0 +1,23 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+//#region ~icons/lucide/chevron-left
+var _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m15 18l-6-6l6-6"
+	}, null, -1)])]);
+}
+var chevron_left_default = markRaw({
+	name: "lucide-chevron-left",
+	render: render$1
+});
+//#endregion
+export { chevron_left_default as t };

package/dist/chunks/chevron-left-D8AUBAM7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-left-D8AUBAM7.js","names":[],"sources":[],"mappings":""}

package/dist/chunks/chevron-right-C6Z01h0X.js

@@ -0,0 +1,23 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+//#region ~icons/lucide/chevron-right
+var _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m9 18l6-6l-6-6"
+	}, null, -1)])]);
+}
+var chevron_right_default = markRaw({
+	name: "lucide-chevron-right",
+	render: render$1
+});
+//#endregion
+export { chevron_right_default as t };

package/dist/chunks/chevron-right-C6Z01h0X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-right-C6Z01h0X.js","names":[],"sources":[],"mappings":""}

package/dist/chunks/config-9PYRZlKE.js

@@ -0,0 +1,84 @@
+import { t as splitClassTokens } from "./classTokens-BzazaERD.js";
+import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
+//#region src/components/GrCommandPalette/grCommandPaletteStyles.ts
+/**
+* Кастомизация через CSS-переменные:
+*
+* - `--gr-command-active-bg` — фон активной (подсвеченной) команды.
+* - `--gr-command-match-bg` — фон совпавшего с запросом фрагмента.
+* - `--gr-command-list-max-height` — максимальная высота списка (иначе — проп `maxHeight`).
+*/
+var commandPaletteModalSizeBySize = {
+	sm: "sm",
+	md: "md",
+	lg: "lg",
+	xl: "xl",
+	full: "full"
+};
+var commandSearchRowClass = "flex items-center gap-2 border-b border-[var(--gr-brd)] px-4";
+var commandSearchInputClass = "min-w-0 flex-1 bg-transparent py-3.5 text-[length:var(--gr-command-input-font-size,15px)] text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:outline-none";
+var commandGroupLabelClass = "px-3 pb-1 pt-3 text-[length:var(--gr-control-text-2xs)] font-medium uppercase tracking-wide text-[var(--gr-muted-fg)]";
+/** Описание под меткой команды. Цвет приходит из `commandItemMutedClass`. */
+var commandItemDescriptionClass = "block truncate text-[length:var(--gr-text-xs)]";
+var commandItemMutedEnabledClass = "text-[var(--gr-muted-fg)]";
+var commandItemMutedDisabledClass = "text-[var(--gr-disabled-fg)]";
+/**
+* Приглушённые части команды — иконка и описание.
+*
+* Гаснут вместе со строкой: свой `--gr-muted-fg` оставил бы у выключенной
+* команды иконку темнее её же метки.
+*/
+function commandItemMutedClass(disabled) {
+	return disabled ? commandItemMutedDisabledClass : commandItemMutedEnabledClass;
+}
+/** Совпавший с запросом фрагмент. Фон — тот же токен подсветки, что у активной строки. */
+var commandMatchClass = "rounded-[var(--gr-radius-xs)] bg-[var(--gr-command-match-bg,color-mix(in_srgb,var(--gr-primary)_22%,transparent))] text-[var(--gr-fg)]";
+/**
+* Цвета текста в базе нет намеренно: два `text-[…]` в одном списке классов
+* разрешаются порядком правил в сгенерированном CSS, а не порядком в атрибуте, —
+* и цвет выключенной команды молча проигрывал бы базовому.
+*/
+var commandItemBaseClass = "flex w-full items-center gap-3 rounded-[var(--gr-command-item-radius,10px)] px-3 py-2 text-left text-[length:var(--gr-control-text-md)]";
+var commandItemEnabledClass = "cursor-pointer text-[var(--gr-fg)]";
+var commandItemActiveClass = "bg-[var(--gr-command-active-bg,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+/**
+* Выключенная команда гасится токенами состояния, а не `opacity`: прозрачность
+* разбавляет выверенные на AA токены текста и роняет контраст.
+*/
+var commandItemDisabledClass = "cursor-not-allowed bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]";
+function commandItemClass(options) {
+	return [
+		commandItemBaseClass,
+		options.disabled ? commandItemDisabledClass : commandItemEnabledClass,
+		options.active && !options.disabled ? commandItemActiveClass : ""
+	].filter(Boolean).join(" ");
+}
+var commandEmptyClass = "px-4 py-10 text-center text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]";
+var commandFooterClass = "flex items-center gap-3 border-t border-[var(--gr-brd)] px-4 py-2 text-[length:var(--gr-control-text-2xs)] text-[var(--gr-muted-fg)]";
+//#endregion
+//#region src/components/GrCommandPalette/safelist.ts
+var grCommandPaletteSafelist = [.../* @__PURE__ */ new Set([
+	...splitClassTokens(commandSearchRowClass),
+	...splitClassTokens(commandSearchInputClass),
+	...splitClassTokens(commandGroupLabelClass),
+	...splitClassTokens(commandItemBaseClass),
+	...splitClassTokens(commandItemActiveClass),
+	...splitClassTokens(commandItemDisabledClass),
+	...splitClassTokens(commandItemEnabledClass),
+	...splitClassTokens(commandItemMutedEnabledClass),
+	...splitClassTokens(commandItemMutedDisabledClass),
+	...splitClassTokens(commandItemDescriptionClass),
+	...splitClassTokens(commandMatchClass),
+	...splitClassTokens(commandEmptyClass),
+	...splitClassTokens(commandFooterClass),
+	...splitClassTokens("animate-spin")
+])];
+//#endregion
+//#region src/components/GrCommandPalette/config.ts
+var grCommandPaletteConfig = defineGranularComponent(import.meta.url, {
+	name: "GrCommandPalette",
+	safelist: grCommandPaletteSafelist,
+	dependencies: ["GrKbd", "GrModal"]
+});
+//#endregion
+export { commandGroupLabelClass as a, commandItemMutedClass as c, commandSearchInputClass as d, commandSearchRowClass as f, commandFooterClass as i, commandMatchClass as l, grCommandPaletteSafelist as n, commandItemClass as o, commandEmptyClass as r, commandItemDescriptionClass as s, grCommandPaletteConfig as t, commandPaletteModalSizeBySize as u };

package/dist/chunks/config-9PYRZlKE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-9PYRZlKE.js","names":[],"sources":["../../src/components/GrCommandPalette/grCommandPaletteStyles.ts","../../src/components/GrCommandPalette/safelist.ts","../../src/components/GrCommandPalette/config.ts"],"sourcesContent":["import type { GrOverlaySize } from '../shared/sizes'\n\nexport type GrCommandPaletteSize = GrOverlaySize\n\n/**\n * Кастомизация через CSS-переменные:\n *\n * - `--gr-command-active-bg` — фон активной (подсвеченной) команды.\n * - `--gr-command-match-bg` — фон совпавшего с запросом фрагмента.\n * - `--gr-command-list-max-height` — максимальная высота списка (иначе — проп `maxHeight`).\n */\n\n// Размер палитры ложится на размеры панели `GrModal` — палитра не изобретает свои ширины.\nexport const commandPaletteModalSizeBySize: Record<GrCommandPaletteSize, GrOverlaySize> = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n  full: 'full',\n}\n\nexport const commandSearchRowClass = 'flex items-center gap-2 border-b border-[var(--gr-brd)] px-4'\nexport const commandSearchInputClass = 'min-w-0 flex-1 bg-transparent py-3.5 text-[length:var(--gr-command-input-font-size,15px)] text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:outline-none'\n\nexport const commandGroupLabelClass = 'px-3 pb-1 pt-3 text-[length:var(--gr-control-text-2xs)] font-medium uppercase tracking-wide text-[var(--gr-muted-fg)]'\n\n/** Описание под меткой команды. Цвет приходит из `commandItemMutedClass`. */\nexport const commandItemDescriptionClass = 'block truncate text-[length:var(--gr-text-xs)]'\n\nexport const commandItemMutedEnabledClass = 'text-[var(--gr-muted-fg)]'\nexport const commandItemMutedDisabledClass = 'text-[var(--gr-disabled-fg)]'\n\n/**\n * Приглушённые части команды — иконка и описание.\n *\n * Гаснут вместе со строкой: свой `--gr-muted-fg` оставил бы у выключенной\n * команды иконку темнее её же метки.\n */\nexport function commandItemMutedClass(disabled: boolean): string {\n  return disabled ? commandItemMutedDisabledClass : commandItemMutedEnabledClass\n}\n\n/** Совпавший с запросом фрагмент. Фон — тот же токен подсветки, что у активной строки. */\nexport const commandMatchClass = 'rounded-[var(--gr-radius-xs)] bg-[var(--gr-command-match-bg,color-mix(in_srgb,var(--gr-primary)_22%,transparent))] text-[var(--gr-fg)]'\n\n/**\n * Цвета текста в базе нет намеренно: два `text-[…]` в одном списке классов\n * разрешаются порядком правил в сгенерированном CSS, а не порядком в атрибуте, —\n * и цвет выключенной команды молча проигрывал бы базовому.\n */\nexport const commandItemBaseClass = 'flex w-full items-center gap-3 rounded-[var(--gr-command-item-radius,10px)] px-3 py-2 text-left text-[length:var(--gr-control-text-md)]'\nexport const commandItemEnabledClass = 'cursor-pointer text-[var(--gr-fg)]'\nexport const commandItemActiveClass = 'bg-[var(--gr-command-active-bg,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]'\n/**\n * Выключенная команда гасится токенами состояния, а не `opacity`: прозрачность\n * разбавляет выверенные на AA токены текста и роняет контраст.\n */\nexport const commandItemDisabledClass = 'cursor-not-allowed bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]'\n\nexport function commandItemClass(options: { active: boolean, disabled: boolean }): string {\n  return [\n    commandItemBaseClass,\n    options.disabled ? commandItemDisabledClass : commandItemEnabledClass,\n    options.active && !options.disabled ? commandItemActiveClass : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n\nexport const commandEmptyClass = 'px-4 py-10 text-center text-[length:var(--gr-control-text-sm)] text-[var(--gr-muted-fg)]'\nexport const commandFooterClass = 'flex items-center gap-3 border-t border-[var(--gr-brd)] px-4 py-2 text-[length:var(--gr-control-text-2xs)] text-[var(--gr-muted-fg)]'\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  commandEmptyClass,\n  commandFooterClass,\n  commandGroupLabelClass,\n  commandItemActiveClass,\n  commandItemBaseClass,\n  commandItemDescriptionClass,\n  commandItemDisabledClass,\n  commandItemEnabledClass,\n  commandItemMutedDisabledClass,\n  commandItemMutedEnabledClass,\n  commandMatchClass,\n  commandSearchInputClass,\n  commandSearchRowClass,\n} from './grCommandPaletteStyles'\n\n// Вся вёрстка палитры живёт строковыми литералами в grCommandPaletteStyles.ts —\n// на сборке они уезжают в общий dist-чанк, который granularContent не сканирует.\n// Поэтому перечисляем явно (docs/gotchas.md §2).\nexport const grCommandPaletteSafelist = [...new Set([\n  ...splitClassTokens(commandSearchRowClass),\n  ...splitClassTokens(commandSearchInputClass),\n  ...splitClassTokens(commandGroupLabelClass),\n  ...splitClassTokens(commandItemBaseClass),\n  ...splitClassTokens(commandItemActiveClass),\n  ...splitClassTokens(commandItemDisabledClass),\n  ...splitClassTokens(commandItemEnabledClass),\n  ...splitClassTokens(commandItemMutedEnabledClass),\n  ...splitClassTokens(commandItemMutedDisabledClass),\n  ...splitClassTokens(commandItemDescriptionClass),\n  ...splitClassTokens(commandMatchClass),\n  ...splitClassTokens(commandEmptyClass),\n  ...splitClassTokens(commandFooterClass),\n  // Иконки поля поиска и индикатора загрузки.\n  ...splitClassTokens('animate-spin'),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grCommandPaletteSafelist } from './safelist'\n\nexport const grCommandPaletteConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrCommandPalette',\n  safelist: grCommandPaletteSafelist,\n  dependencies: ['GrKbd', 'GrModal'],\n})\n"],"mappings":";;;;;;;;;;AAaA,IAAa,gCAA6E;CACxF,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,wBAAwB;AACrC,IAAa,0BAA0B;AAEvC,IAAa,yBAAyB;;AAGtC,IAAa,8BAA8B;AAE3C,IAAa,+BAA+B;AAC5C,IAAa,gCAAgC;;;;;;;AAQ7C,SAAgB,sBAAsB,UAA2B;CAC/D,OAAO,WAAW,gCAAgC;AACpD;;AAGA,IAAa,oBAAoB;;;;;;AAOjC,IAAa,uBAAuB;AACpC,IAAa,0BAA0B;AACvC,IAAa,yBAAyB;;;;;AAKtC,IAAa,2BAA2B;AAExC,SAAgB,iBAAiB,SAAyD;CACxF,OAAO;EACL;EACA,QAAQ,WAAW,2BAA2B;EAC9C,QAAQ,UAAU,CAAC,QAAQ,WAAW,yBAAyB;CACjE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,IAAa,oBAAoB;AACjC,IAAa,qBAAqB;;;AClDlC,IAAa,2BAA2B,CAAC,mBAAG,IAAI,IAAI;CAClD,GAAG,iBAAiB,qBAAqB;CACzC,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,wBAAwB;CAC5C,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,4BAA4B;CAChD,GAAG,iBAAiB,6BAA6B;CACjD,GAAG,iBAAiB,2BAA2B;CAC/C,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,kBAAkB;CAEtC,GAAG,iBAAiB,cAAc;AACpC,CAAC,CAAC;;;AChCF,IAAa,yBAAyB,wBAAwB,OAAO,KAAK,KAAK;CAC7E,MAAM;CACN,UAAU;CACV,cAAc,CAAC,SAAS,SAAS;AACnC,CAAC"}

package/dist/chunks/config-B4w5gBD0.js

@@ -0,0 +1,89 @@
+import { t as splitClassTokens } from "./classTokens-BzazaERD.js";
+import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
+//#region src/components/GrBadgeWrap/grBadgeWrapStyles.ts
+var rootClass = "relative inline-flex";
+/**
+* Смещение бейджа — точки кастомизации: подвинуть его можно темой или инлайном,
+* не переопределяя классы снаружи. Дефолты повторяют прежние `-top-2 -right-2`.
+*/
+var placementClass = {
+	"top-right": "top-[var(--gr-badge-wrap-offset-y,-0.5rem)] right-[var(--gr-badge-wrap-offset-x,-0.5rem)]",
+	"top-left": "top-[var(--gr-badge-wrap-offset-y,-0.5rem)] left-[var(--gr-badge-wrap-offset-x,-0.5rem)]",
+	"bottom-right": "bottom-[var(--gr-badge-wrap-offset-y,-0.5rem)] right-[var(--gr-badge-wrap-offset-x,-0.5rem)]",
+	"bottom-left": "bottom-[var(--gr-badge-wrap-offset-y,-0.5rem)] left-[var(--gr-badge-wrap-offset-x,-0.5rem)]"
+};
+/** У точки смещение меньше: она вдвое мельче счётчика. */
+var dotPlacementClass = {
+	"top-right": "top-[var(--gr-badge-wrap-offset-y,-0.25rem)] right-[var(--gr-badge-wrap-offset-x,-0.25rem)]",
+	"top-left": "top-[var(--gr-badge-wrap-offset-y,-0.25rem)] left-[var(--gr-badge-wrap-offset-x,-0.25rem)]",
+	"bottom-right": "bottom-[var(--gr-badge-wrap-offset-y,-0.25rem)] right-[var(--gr-badge-wrap-offset-x,-0.25rem)]",
+	"bottom-left": "bottom-[var(--gr-badge-wrap-offset-y,-0.25rem)] left-[var(--gr-badge-wrap-offset-x,-0.25rem)]"
+};
+var dotBaseClass = "absolute h-2 w-2 rounded-[var(--gr-radius-full)]";
+var countBaseClass = "absolute min-w-5 h-5 px-1 rounded-[var(--gr-radius-full)] text-[length:var(--gr-text-2xs)] font-700 inline-flex items-center justify-center";
+/**
+* Заливка — насыщенная роль тона, текст из `-fg`, а не из белого литерала: тот не
+* переживает смену темы.
+*
+* Вес намеренно не такой, как у filled-`GrBadge` (тот в светлой теме уехал на
+* `-solid`): точка и счётчик лежат **поверх чужого элемента**, и порог у них свой
+* — 3:1 к фону страницы, чтобы метку было видно на аватаре и на иконке. Заливка
+* кнопочного веса читалась бы там как вторая кнопка.
+*
+* Карта своя, а не импорт из `GrBadge`: чужая карта означала бы зависимость от
+* компонента и его CSS ради двух классов.
+*/
+var toneClass = {
+	neutral: "bg-[var(--gr-fg)] text-[var(--gr-bg)]",
+	primary: "bg-[var(--gr-primary)] text-[var(--gr-primary-fg)]",
+	success: "bg-[var(--gr-success)] text-[var(--gr-success-fg)]",
+	warning: "bg-[var(--gr-warning)] text-[var(--gr-warning-fg)]",
+	danger: "bg-[var(--gr-danger)] text-[var(--gr-danger-fg)]",
+	info: "bg-[var(--gr-info)] text-[var(--gr-info-fg)]",
+	slate: "bg-[var(--gr-slate)] text-[var(--gr-slate-fg)]",
+	azure: "bg-[var(--gr-azure)] text-[var(--gr-azure-fg)]"
+};
+/**
+* Видимый текст счётчика: число больше порога сворачивается в «{max}+», иначе
+* бейдж расползается и ломает соседей. Озвучивается при этом настоящее
+* значение — «99 плюс» пользователю ничего не говорит.
+*/
+function formatBadgeValue(value, max) {
+	if (max === void 0 || typeof value !== "number") return String(value);
+	return value > max ? `${max}+` : String(value);
+}
+/**
+* Стоит ли отмечать анимацией переход счётчика из `prev` в `next`.
+* `undefined` означает «счётчика на экране нет».
+*
+* Отмечается только прибавление: появление счётчика и рост числа — события,
+* о которых пользователь ещё не знает. Убыль — наоборот, след его собственного
+* действия («прочитал»), и подсвечивать её значит мигать бейджем на каждом
+* прочитанном письме.
+*
+* У строкового значения порядка нет, поэтому любая его смена считается событием.
+*/
+function isBadgeWrapPulse(prev, next) {
+	if (next === void 0) return false;
+	if (prev === void 0) return true;
+	if (typeof prev === "number" && typeof next === "number") return next > prev;
+	return prev !== next;
+}
+//#endregion
+//#region src/components/GrBadgeWrap/safelist.ts
+var grBadgeWrapSafelist = [.../* @__PURE__ */ new Set([
+	...splitClassTokens(rootClass),
+	...splitClassTokens(dotBaseClass),
+	...splitClassTokens(countBaseClass),
+	...Object.values(placementClass).flatMap(splitClassTokens),
+	...Object.values(dotPlacementClass).flatMap(splitClassTokens),
+	...Object.values(toneClass).flatMap(splitClassTokens)
+])];
+//#endregion
+//#region src/components/GrBadgeWrap/config.ts
+var grBadgeWrapConfig = defineGranularComponent(import.meta.url, {
+	name: "GrBadgeWrap",
+	safelist: grBadgeWrapSafelist
+});
+//#endregion
+export { dotPlacementClass as a, placementClass as c, dotBaseClass as i, rootClass as l, grBadgeWrapSafelist as n, formatBadgeValue as o, countBaseClass as r, isBadgeWrapPulse as s, grBadgeWrapConfig as t, toneClass as u };

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

@@ -0,0 +1 @@
+{"version":3,"file":"config-B4w5gBD0.js","names":[],"sources":["../../src/components/GrBadgeWrap/grBadgeWrapStyles.ts","../../src/components/GrBadgeWrap/safelist.ts","../../src/components/GrBadgeWrap/config.ts"],"sourcesContent":["import type { GrTone } from '../shared/tones'\n\nexport type GrBadgeWrapTone = GrTone\n\n/** Угол, в котором висит бейдж. */\nexport const GR_BADGE_WRAP_PLACEMENTS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const\nexport type GrBadgeWrapPlacement = typeof GR_BADGE_WRAP_PLACEMENTS[number]\n\nexport const rootClass = 'relative inline-flex'\n\n/**\n * Смещение бейджа — точки кастомизации: подвинуть его можно темой или инлайном,\n * не переопределяя классы снаружи. Дефолты повторяют прежние `-top-2 -right-2`.\n */\nexport const placementClass: Record<GrBadgeWrapPlacement, string> = {\n  'top-right': 'top-[var(--gr-badge-wrap-offset-y,-0.5rem)] right-[var(--gr-badge-wrap-offset-x,-0.5rem)]',\n  'top-left': 'top-[var(--gr-badge-wrap-offset-y,-0.5rem)] left-[var(--gr-badge-wrap-offset-x,-0.5rem)]',\n  'bottom-right': 'bottom-[var(--gr-badge-wrap-offset-y,-0.5rem)] right-[var(--gr-badge-wrap-offset-x,-0.5rem)]',\n  'bottom-left': 'bottom-[var(--gr-badge-wrap-offset-y,-0.5rem)] left-[var(--gr-badge-wrap-offset-x,-0.5rem)]',\n}\n\n/** У точки смещение меньше: она вдвое мельче счётчика. */\nexport const dotPlacementClass: Record<GrBadgeWrapPlacement, string> = {\n  'top-right': 'top-[var(--gr-badge-wrap-offset-y,-0.25rem)] right-[var(--gr-badge-wrap-offset-x,-0.25rem)]',\n  'top-left': 'top-[var(--gr-badge-wrap-offset-y,-0.25rem)] left-[var(--gr-badge-wrap-offset-x,-0.25rem)]',\n  'bottom-right': 'bottom-[var(--gr-badge-wrap-offset-y,-0.25rem)] right-[var(--gr-badge-wrap-offset-x,-0.25rem)]',\n  'bottom-left': 'bottom-[var(--gr-badge-wrap-offset-y,-0.25rem)] left-[var(--gr-badge-wrap-offset-x,-0.25rem)]',\n}\n\nexport const dotBaseClass = 'absolute h-2 w-2 rounded-[var(--gr-radius-full)]'\n\nexport const countBaseClass = 'absolute min-w-5 h-5 px-1 rounded-[var(--gr-radius-full)] text-[length:var(--gr-text-2xs)] font-700 inline-flex items-center justify-center'\n\n/**\n * Заливка — насыщенная роль тона, текст из `-fg`, а не из белого литерала: тот не\n * переживает смену темы.\n *\n * Вес намеренно не такой, как у filled-`GrBadge` (тот в светлой теме уехал на\n * `-solid`): точка и счётчик лежат **поверх чужого элемента**, и порог у них свой\n * — 3:1 к фону страницы, чтобы метку было видно на аватаре и на иконке. Заливка\n * кнопочного веса читалась бы там как вторая кнопка.\n *\n * Карта своя, а не импорт из `GrBadge`: чужая карта означала бы зависимость от\n * компонента и его CSS ради двух классов.\n */\nexport const toneClass: Record<GrBadgeWrapTone, string> = {\n  neutral: 'bg-[var(--gr-fg)] text-[var(--gr-bg)]',\n  primary: 'bg-[var(--gr-primary)] text-[var(--gr-primary-fg)]',\n  success: 'bg-[var(--gr-success)] text-[var(--gr-success-fg)]',\n  warning: 'bg-[var(--gr-warning)] text-[var(--gr-warning-fg)]',\n  danger: 'bg-[var(--gr-danger)] text-[var(--gr-danger-fg)]',\n  info: 'bg-[var(--gr-info)] text-[var(--gr-info-fg)]',\n  slate: 'bg-[var(--gr-slate)] text-[var(--gr-slate-fg)]',\n  azure: 'bg-[var(--gr-azure)] text-[var(--gr-azure-fg)]',\n}\n\n/**\n * Видимый текст счётчика: число больше порога сворачивается в «{max}+», иначе\n * бейдж расползается и ломает соседей. Озвучивается при этом настоящее\n * значение — «99 плюс» пользователю ничего не говорит.\n */\nexport function formatBadgeValue(value: string | number, max?: number): string {\n  if (max === undefined || typeof value !== 'number') return String(value)\n  return value > max ? `${max}+` : String(value)\n}\n\n/**\n * Стоит ли отмечать анимацией переход счётчика из `prev` в `next`.\n * `undefined` означает «счётчика на экране нет».\n *\n * Отмечается только прибавление: появление счётчика и рост числа — события,\n * о которых пользователь ещё не знает. Убыль — наоборот, след его собственного\n * действия («прочитал»), и подсвечивать её значит мигать бейджем на каждом\n * прочитанном письме.\n *\n * У строкового значения порядка нет, поэтому любая его смена считается событием.\n */\nexport function isBadgeWrapPulse(\n  prev: string | number | undefined,\n  next: string | number | undefined,\n): boolean {\n  if (next === undefined) return false\n  if (prev === undefined) return true\n  if (typeof prev === 'number' && typeof next === 'number') return next > prev\n  return prev !== next\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  placementClass,\n  rootClass,\n  toneClass,\n} from './grBadgeWrapStyles'\n\nexport const grBadgeWrapSafelist = [...new Set([\n  ...splitClassTokens(rootClass),\n  ...splitClassTokens(dotBaseClass),\n  ...splitClassTokens(countBaseClass),\n  ...Object.values(placementClass).flatMap(splitClassTokens),\n  ...Object.values(dotPlacementClass).flatMap(splitClassTokens),\n  ...Object.values(toneClass).flatMap(splitClassTokens),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grBadgeWrapSafelist } from './safelist'\n\nexport const grBadgeWrapConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrBadgeWrap',\n  safelist: grBadgeWrapSafelist,\n})\n"],"mappings":";;;AAQA,IAAa,YAAY;;;;;AAMzB,IAAa,iBAAuD;CAClE,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB;;AAGA,IAAa,oBAA0D;CACrE,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB;AAEA,IAAa,eAAe;AAE5B,IAAa,iBAAiB;;;;;;;;;;;;;AAc9B,IAAa,YAA6C;CACxD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,OAAO;AACT;;;;;;AAOA,SAAgB,iBAAiB,OAAwB,KAAsB;CAC7E,IAAI,QAAQ,KAAA,KAAa,OAAO,UAAU,UAAU,OAAO,OAAO,KAAK;CACvE,OAAO,QAAQ,MAAM,GAAG,IAAI,KAAK,OAAO,KAAK;AAC/C;;;;;;;;;;;;AAaA,SAAgB,iBACd,MACA,MACS;CACT,IAAI,SAAS,KAAA,GAAW,OAAO;CAC/B,IAAI,SAAS,KAAA,GAAW,OAAO;CAC/B,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU,OAAO,OAAO;CACxE,OAAO,SAAS;AAClB;;;AC3EA,IAAa,sBAAsB,CAAC,mBAAG,IAAI,IAAI;CAC7C,GAAG,iBAAiB,SAAS;CAC7B,GAAG,iBAAiB,YAAY;CAChC,GAAG,iBAAiB,cAAc;CAClC,GAAG,OAAO,OAAO,cAAc,CAAC,CAAC,QAAQ,gBAAgB;CACzD,GAAG,OAAO,OAAO,iBAAiB,CAAC,CAAC,QAAQ,gBAAgB;CAC5D,GAAG,OAAO,OAAO,SAAS,CAAC,CAAC,QAAQ,gBAAgB;AACtD,CAAC,CAAC;;;ACbF,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACxE,MAAM;CACN,UAAU;AACZ,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"config-BE6n20np.js","names":[],"sources":["../../src/components/GrSplitter/grSplitterStyles.ts","../../src/components/GrSplitter/safelist.ts","../../src/components/GrSplitter/config.ts"],"sourcesContent":["/**\n * Классы `GrSplitter`. Геометрия (толщина полосы, зона захвата, курсоры)\n * зависит от ориентации и от состояния жеста, поэтому живёт в собственном\n * `<style>` компонента, а не в утилитах.\n */\n\nexport const rootClass = 'grid h-full w-full'\n\n/** Без `min-*: 0` содержимое панели распирает грид-трек и ломает раскладку. */\nexport const paneClass = 'min-h-0 min-w-0'\n\n// `touch-none` в связке presetMini + presetGranular CSS не даёт — только произвольное свойство.\nexport const separatorClass = 'relative [touch-action:none] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-inset'\n","import { splitClassTokens } from '../shared/classTokens'\nimport { paneClass, rootClass, separatorClass } from './grSplitterStyles'\n\nexport const grSplitterSafelist = [...new Set([\n  ...splitClassTokens(rootClass),\n  ...splitClassTokens(paneClass),\n  ...splitClassTokens(separatorClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grSplitterSafelist } from './safelist'\n\nexport const grSplitterConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrSplitter',\n  safelist: grSplitterSafelist,\n})\n"],"mappings":";;;;;;;;AAMA,IAAa,YAAY;;AAGzB,IAAa,YAAY;AAGzB,IAAa,iBAAiB;;;ACT9B,IAAa,qBAAqB,CAAC,mBAAG,IAAI,IAAI;CAC5C,GAAG,iBAAiB,SAAS;CAC7B,GAAG,iBAAiB,SAAS;CAC7B,GAAG,iBAAiB,cAAc;AACpC,CAAC,CAAC;;;ACHF,IAAa,mBAAmB,wBAAwB,OAAO,KAAK,KAAK;CACvE,MAAM;CACN,UAAU;AACZ,CAAC"}

package/dist/chunks/config-BEVBsvni.js

@@ -0,0 +1,197 @@
+import { t as splitClassTokens } from "./classTokens-BzazaERD.js";
+import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
+//#region src/components/GrSegmented/grSegmentedStyles.ts
+var rootBaseClass = "relative inline-grid min-w-0 items-stretch rounded-[var(--gr-segmented-radius)] p-[var(--gr-segmented-padding)] transition-colors duration-[var(--gr-duration-fast)]";
+/** Направление потока: остальную раскладку задают `gridTemplate*` в стиле корня. */
+var rootOrientationClassMap = {
+	horizontal: "grid-flow-col",
+	vertical: "grid-flow-row"
+};
+var rootVariantClassMap = {
+	pills: "border border-[var(--gr-segmented-track-brd)] bg-[var(--gr-segmented-track-bg)] text-[var(--gr-segmented-item-color)]",
+	button: "border border-[var(--gr-segmented-track-brd)] bg-[var(--gr-segmented-track-bg)] text-[var(--gr-segmented-item-color)] shadow-[var(--gr-segmented-track-shadow)]"
+};
+var rootBlockClass = "w-full";
+var rootDisabledClass = "text-[var(--gr-disabled-fg)]";
+var indicatorBaseClass = "pointer-events-none absolute left-0 top-0 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] transition-[transform,width,height,opacity] ease-[var(--gr-ease-out)]";
+var indicatorVariantClassMap = {
+	pills: "border border-[var(--gr-segmented-indicator-brd)] bg-[var(--gr-segmented-indicator-bg)] shadow-[var(--gr-segmented-indicator-shadow)]",
+	button: "border border-[var(--gr-segmented-indicator-brd)] bg-[var(--gr-segmented-indicator-bg)] shadow-[var(--gr-segmented-indicator-shadow)]"
+};
+var itemBaseClass = "group/segmented-item relative z-[1] inline-flex min-h-[var(--gr-segmented-min-height)] min-w-0 items-center justify-center gap-2 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] px-[var(--gr-segmented-item-px)] py-[var(--gr-segmented-item-py)] text-[length:var(--gr-segmented-font-size)] leading-[var(--gr-segmented-line-height)] font-[var(--gr-segmented-font-weight)] text-[var(--gr-segmented-item-color)] transition-colors duration-[var(--gr-duration-fast)] select-none focus:outline-none focus-visible:shadow-[0_0_0_2px_var(--gr-ring),0_0_0_4px_var(--gr-bg)]";
+var itemVariantClassMap = {
+	pills: "",
+	button: ""
+};
+var itemSelectedClass = "text-[var(--gr-segmented-item-selected-color)]";
+/**
+* Недоступный сегмент гасится токеном, а не `opacity`: прозрачность разбавляет
+* выверенные на AA токены текста и роняет контраст подписи.
+*/
+var itemDisabledClass = "cursor-not-allowed text-[var(--gr-disabled-fg)]";
+var itemEnabledClass = "cursor-pointer hover:text-[var(--gr-segmented-item-hover-color)]";
+var itemLabelClass = "truncate";
+var itemIconClass = "h-4 w-4 shrink-0";
+var itemSpinnerClass = "h-4 w-4 shrink-0 animate-spin";
+var iconOnlyClass = "gap-0";
+var rootSizeStyles = {
+	xs: {
+		"--gr-segmented-radius": "9999px",
+		"--gr-segmented-padding": "4px",
+		"--gr-segmented-item-px": "10px",
+		"--gr-segmented-item-py": "4px",
+		"--gr-segmented-font-size": "0.75rem",
+		"--gr-segmented-line-height": "1rem",
+		"--gr-segmented-font-weight": "600",
+		"--gr-segmented-min-height": "24px"
+	},
+	sm: {
+		"--gr-segmented-radius": "9999px",
+		"--gr-segmented-padding": "4px",
+		"--gr-segmented-item-px": "12px",
+		"--gr-segmented-item-py": "6px",
+		"--gr-segmented-font-size": "0.75rem",
+		"--gr-segmented-line-height": "1rem",
+		"--gr-segmented-font-weight": "600",
+		"--gr-segmented-min-height": "28px"
+	},
+	md: {
+		"--gr-segmented-radius": "9999px",
+		"--gr-segmented-padding": "4px",
+		"--gr-segmented-item-px": "14px",
+		"--gr-segmented-item-py": "8px",
+		"--gr-segmented-font-size": "0.875rem",
+		"--gr-segmented-line-height": "1.25rem",
+		"--gr-segmented-font-weight": "600",
+		"--gr-segmented-min-height": "40px"
+	},
+	lg: {
+		"--gr-segmented-radius": "9999px",
+		"--gr-segmented-padding": "4px",
+		"--gr-segmented-item-px": "16px",
+		"--gr-segmented-item-py": "10px",
+		"--gr-segmented-font-size": "0.9375rem",
+		"--gr-segmented-line-height": "1.25rem",
+		"--gr-segmented-font-weight": "600",
+		"--gr-segmented-min-height": "46px"
+	}
+};
+var rootVariantStyles = {
+	pills: {
+		"--gr-segmented-track-bg": "var(--gr-muted)",
+		"--gr-segmented-track-brd": "var(--gr-brd)",
+		"--gr-segmented-track-shadow": "none",
+		"--gr-segmented-indicator-bg": "var(--gr-card)",
+		"--gr-segmented-indicator-brd": "color-mix(in srgb, var(--gr-card) 84%, var(--gr-brd) 16%)",
+		"--gr-segmented-indicator-shadow": "var(--gr-shadow-1), var(--gr-segmented-indicator-highlight-shadow, 0 0 0 0 transparent)",
+		"--gr-segmented-item-color": "var(--gr-muted-fg)",
+		"--gr-segmented-item-selected-color": "var(--gr-fg)",
+		"--gr-segmented-item-hover-color": "var(--gr-fg)"
+	},
+	button: {
+		"--gr-segmented-track-bg": "var(--gr-card)",
+		"--gr-segmented-track-brd": "var(--gr-brd)",
+		"--gr-segmented-track-shadow": "var(--gr-shadow-1)",
+		"--gr-segmented-indicator-bg": "var(--gr-primary)",
+		"--gr-segmented-indicator-brd": "color-mix(in srgb, var(--gr-primary) 88%, var(--gr-brd) 12%)",
+		"--gr-segmented-indicator-shadow": "var(--gr-shadow-2)",
+		"--gr-segmented-item-color": "var(--gr-muted-fg)",
+		"--gr-segmented-item-selected-color": "var(--gr-primary-fg)",
+		"--gr-segmented-item-hover-color": "var(--gr-fg)"
+	}
+};
+function grSegmentedRootClass(options) {
+	return [
+		rootBaseClass,
+		rootOrientationClassMap[options.orientation],
+		rootVariantClassMap[options.variant],
+		options.block ? rootBlockClass : "",
+		options.disabled ? rootDisabledClass : ""
+	].filter(Boolean).join(" ");
+}
+/**
+* Радиус дорожки в вертикали — пилюля **одной строки**, а не всей колонки.
+* `9999px` выверен под короткий горизонтальный ряд; на высокой колонке он
+* превращает дорожку в эллипс. Формула повторяет высоту сегмента, поэтому
+* скругление у колонки ровно такое же, как у ряда, и сегменты внутри остаются
+* пилюлями: они считают свой радиус от этого же значения.
+*/
+var verticalRadiusStyle = { "--gr-segmented-radius": "calc(var(--gr-segmented-min-height) / 2 + var(--gr-segmented-padding))" };
+function grSegmentedRootStyle(options) {
+	return {
+		...rootSizeStyles[options.size],
+		...rootVariantStyles[options.variant],
+		...options.orientation === "vertical" ? verticalRadiusStyle : {}
+	};
+}
+function grSegmentedIndicatorClass(variant) {
+	return [indicatorBaseClass, indicatorVariantClassMap[variant]].join(" ");
+}
+function grSegmentedItemClass(options) {
+	return [
+		itemBaseClass,
+		itemVariantClassMap[options.variant],
+		options.selected ? itemSelectedClass : "",
+		options.disabled ? itemDisabledClass : itemEnabledClass,
+		options.iconOnly ? iconOnlyClass : ""
+	].filter(Boolean).join(" ");
+}
+var grSegmentedItemLabelClass = itemLabelClass;
+var grSegmentedItemIconClass = itemIconClass;
+var grSegmentedItemSpinnerClass = itemSpinnerClass;
+//#endregion
+//#region src/components/GrSegmented/safelist.ts
+var grSegmentedClassTokens = {
+	rootBaseClass: splitClassTokens(rootBaseClass),
+	rootOrientationClassMap: Object.values(rootOrientationClassMap).flatMap(splitClassTokens),
+	rootVariantClassMap: Object.values(rootVariantClassMap).flatMap(splitClassTokens),
+	rootBlockClass: splitClassTokens(rootBlockClass),
+	rootDisabledClass: splitClassTokens(rootDisabledClass),
+	indicatorBaseClass: splitClassTokens(indicatorBaseClass),
+	indicatorVariantClassMap: Object.values(indicatorVariantClassMap).flatMap(splitClassTokens),
+	itemBaseClass: splitClassTokens(itemBaseClass),
+	itemVariantClassMap: Object.values(itemVariantClassMap).flatMap(splitClassTokens),
+	itemSelectedClass: splitClassTokens(itemSelectedClass),
+	itemDisabledClass: splitClassTokens(itemDisabledClass),
+	itemEnabledClass: splitClassTokens(itemEnabledClass),
+	itemLabelClass: splitClassTokens(itemLabelClass),
+	itemIconClass: splitClassTokens(itemIconClass),
+	itemSpinnerClass: splitClassTokens(itemSpinnerClass),
+	iconOnlyClass: splitClassTokens(iconOnlyClass)
+};
+var grSegmentedSafelist = [.../* @__PURE__ */ new Set([
+	...grSegmentedClassTokens.rootBaseClass,
+	...grSegmentedClassTokens.rootOrientationClassMap,
+	...grSegmentedClassTokens.rootVariantClassMap,
+	...grSegmentedClassTokens.rootBlockClass,
+	...grSegmentedClassTokens.rootDisabledClass,
+	...grSegmentedClassTokens.indicatorBaseClass,
+	...grSegmentedClassTokens.indicatorVariantClassMap,
+	...grSegmentedClassTokens.itemBaseClass,
+	...grSegmentedClassTokens.itemVariantClassMap,
+	...grSegmentedClassTokens.itemSelectedClass,
+	...grSegmentedClassTokens.itemDisabledClass,
+	...grSegmentedClassTokens.itemEnabledClass,
+	...grSegmentedClassTokens.itemLabelClass,
+	...grSegmentedClassTokens.itemIconClass,
+	...grSegmentedClassTokens.itemSpinnerClass,
+	...grSegmentedClassTokens.iconOnlyClass
+])];
+//#endregion
+//#region src/components/GrSegmented/config.ts
+var grSegmentedConfig = defineGranularComponent(import.meta.url, {
+	name: "GrSegmented",
+	safelist: grSegmentedSafelist,
+	tokenDefinitions: {
+		light: {
+			selector: ":root",
+			tokens: { "gr-segmented-indicator-highlight-shadow": "0 0 0 0 transparent" }
+		},
+		dark: {
+			selector: ".dark",
+			tokens: { "gr-segmented-indicator-highlight-shadow": "0 0 0 1px rgba(248, 250, 252, 0.08)" }
+		}
+	}
+});
+//#endregion
+export { grSegmentedItemIconClass as a, grSegmentedRootClass as c, grSegmentedItemClass as i, grSegmentedRootStyle as l, grSegmentedSafelist as n, grSegmentedItemLabelClass as o, grSegmentedIndicatorClass as r, grSegmentedItemSpinnerClass as s, grSegmentedConfig as t };

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

@@ -0,0 +1 @@
+{"version":3,"file":"config-BEVBsvni.js","names":[],"sources":["../../src/components/GrSegmented/grSegmentedStyles.ts","../../src/components/GrSegmented/safelist.ts","../../src/components/GrSegmented/config.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nimport type { Component } from 'vue'\nexport type GrSegmentedVariant = 'pills' | 'button'\nexport type GrSegmentedSize = GrComponentSize\n\n/** Направление ряда сегментов. Вертикаль — боковые фильтры. */\nexport const GR_SEGMENTED_ORIENTATIONS = ['horizontal', 'vertical'] as const\nexport type GrSegmentedOrientation = typeof GR_SEGMENTED_ORIENTATIONS[number]\nexport type GrSegmentedValue = string | number\nexport type GrSegmentedOption = {\n  value: GrSegmentedValue\n  label?: string\n  icon?: Component\n  disabled?: boolean\n  /**\n   * Сегмент занят: вместо иконки крутится спиннер, выбор не принимается.\n   * От `disabled` отличается смыслом — сегмент доступен, но сейчас работает.\n   */\n  loading?: boolean\n  /**\n   * Доступное имя сегмента. Обязательно для icon-only опций: иконка декоративна\n   * (`aria-hidden`), и без этого у сегмента нет имени вовсе — скринридер объявит\n   * пустую кнопку. Когда есть `label`, имя берётся из него, и поле не нужно.\n   */\n  ariaLabel?: string\n}\nexport const rootBaseClass =\n  'relative inline-grid min-w-0 items-stretch rounded-[var(--gr-segmented-radius)] p-[var(--gr-segmented-padding)] transition-colors duration-[var(--gr-duration-fast)]'\n\n/** Направление потока: остальную раскладку задают `gridTemplate*` в стиле корня. */\nexport const rootOrientationClassMap: Record<GrSegmentedOrientation, string> = {\n  horizontal: 'grid-flow-col',\n  vertical: 'grid-flow-row',\n}\nexport const rootVariantClassMap: Record<GrSegmentedVariant, string> = {\n  pills: 'border border-[var(--gr-segmented-track-brd)] bg-[var(--gr-segmented-track-bg)] text-[var(--gr-segmented-item-color)]',\n  button: 'border border-[var(--gr-segmented-track-brd)] bg-[var(--gr-segmented-track-bg)] text-[var(--gr-segmented-item-color)] shadow-[var(--gr-segmented-track-shadow)]',\n}\nexport const rootBlockClass = 'w-full'\nexport const rootDisabledClass = 'text-[var(--gr-disabled-fg)]'\nexport const indicatorBaseClass =\n  'pointer-events-none absolute left-0 top-0 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] transition-[transform,width,height,opacity] ease-[var(--gr-ease-out)]'\nexport const indicatorVariantClassMap: Record<GrSegmentedVariant, string> = {\n  pills:  'border border-[var(--gr-segmented-indicator-brd)] bg-[var(--gr-segmented-indicator-bg)] shadow-[var(--gr-segmented-indicator-shadow)]',\n  button: 'border border-[var(--gr-segmented-indicator-brd)] bg-[var(--gr-segmented-indicator-bg)] shadow-[var(--gr-segmented-indicator-shadow)]',\n}\nexport const itemBaseClass =\n  'group/segmented-item relative z-[1] inline-flex min-h-[var(--gr-segmented-min-height)] min-w-0 items-center justify-center gap-2 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] px-[var(--gr-segmented-item-px)] py-[var(--gr-segmented-item-py)] text-[length:var(--gr-segmented-font-size)] leading-[var(--gr-segmented-line-height)] font-[var(--gr-segmented-font-weight)] text-[var(--gr-segmented-item-color)] transition-colors duration-[var(--gr-duration-fast)] select-none focus:outline-none focus-visible:shadow-[0_0_0_2px_var(--gr-ring),0_0_0_4px_var(--gr-bg)]'\nexport const itemVariantClassMap: Record<GrSegmentedVariant, string> = {\n  pills: '',\n  button: '',\n}\nexport const itemSelectedClass = 'text-[var(--gr-segmented-item-selected-color)]'\n/**\n * Недоступный сегмент гасится токеном, а не `opacity`: прозрачность разбавляет\n * выверенные на AA токены текста и роняет контраст подписи.\n */\nexport const itemDisabledClass = 'cursor-not-allowed text-[var(--gr-disabled-fg)]'\nexport const itemEnabledClass = 'cursor-pointer hover:text-[var(--gr-segmented-item-hover-color)]'\nexport const itemLabelClass = 'truncate'\nexport const itemIconClass = 'h-4 w-4 shrink-0'\nexport const itemSpinnerClass = 'h-4 w-4 shrink-0 animate-spin'\nexport const iconOnlyClass = 'gap-0'\nconst rootSizeStyles: Record<GrSegmentedSize, Record<string, string>> = {\n  xs: {\n    '--gr-segmented-radius': '9999px',\n    '--gr-segmented-padding': '4px',\n    '--gr-segmented-item-px': '10px',\n    '--gr-segmented-item-py': '4px',\n    '--gr-segmented-font-size': '0.75rem',\n    '--gr-segmented-line-height': '1rem',\n    '--gr-segmented-font-weight': '600',\n    '--gr-segmented-min-height': '24px',\n  },\n  sm: {\n    '--gr-segmented-radius': '9999px',\n    '--gr-segmented-padding': '4px',\n    '--gr-segmented-item-px': '12px',\n    '--gr-segmented-item-py': '6px',\n    '--gr-segmented-font-size': '0.75rem',\n    '--gr-segmented-line-height': '1rem',\n    '--gr-segmented-font-weight': '600',\n    '--gr-segmented-min-height': '28px',\n  },\n  md: {\n    '--gr-segmented-radius': '9999px',\n    '--gr-segmented-padding': '4px',\n    '--gr-segmented-item-px': '14px',\n    '--gr-segmented-item-py': '8px',\n    '--gr-segmented-font-size': '0.875rem',\n    '--gr-segmented-line-height': '1.25rem',\n    '--gr-segmented-font-weight': '600',\n    '--gr-segmented-min-height': '40px',\n  },\n  lg: {\n    '--gr-segmented-radius': '9999px',\n    '--gr-segmented-padding': '4px',\n    '--gr-segmented-item-px': '16px',\n    '--gr-segmented-item-py': '10px',\n    '--gr-segmented-font-size': '0.9375rem',\n    '--gr-segmented-line-height': '1.25rem',\n    '--gr-segmented-font-weight': '600',\n    '--gr-segmented-min-height': '46px',\n  },\n}\nconst rootVariantStyles: Record<GrSegmentedVariant, Record<string, string>> = {\n  pills: {\n    '--gr-segmented-track-bg': 'var(--gr-muted)',\n    '--gr-segmented-track-brd': 'var(--gr-brd)',\n    '--gr-segmented-track-shadow': 'none',\n    '--gr-segmented-indicator-bg': 'var(--gr-card)',\n    '--gr-segmented-indicator-brd': 'color-mix(in srgb, var(--gr-card) 84%, var(--gr-brd) 16%)',\n    '--gr-segmented-indicator-shadow': 'var(--gr-shadow-1), var(--gr-segmented-indicator-highlight-shadow, 0 0 0 0 transparent)',\n    '--gr-segmented-item-color': 'var(--gr-muted-fg)',\n    '--gr-segmented-item-selected-color': 'var(--gr-fg)',\n    '--gr-segmented-item-hover-color': 'var(--gr-fg)',\n  },\n  button: {\n    '--gr-segmented-track-bg': 'var(--gr-card)',\n    '--gr-segmented-track-brd': 'var(--gr-brd)',\n    '--gr-segmented-track-shadow': 'var(--gr-shadow-1)',\n    '--gr-segmented-indicator-bg': 'var(--gr-primary)',\n    '--gr-segmented-indicator-brd': 'color-mix(in srgb, var(--gr-primary) 88%, var(--gr-brd) 12%)',\n    '--gr-segmented-indicator-shadow': 'var(--gr-shadow-2)',\n    '--gr-segmented-item-color': 'var(--gr-muted-fg)',\n    '--gr-segmented-item-selected-color': 'var(--gr-primary-fg)',\n    '--gr-segmented-item-hover-color': 'var(--gr-fg)',\n  },\n}\nexport function grSegmentedRootClass(options: {\n  variant: GrSegmentedVariant\n  orientation: GrSegmentedOrientation\n  block: boolean\n  disabled: boolean\n}): string {\n  return [\n    rootBaseClass,\n    rootOrientationClassMap[options.orientation],\n    rootVariantClassMap[options.variant],\n    options.block ? rootBlockClass : '',\n    options.disabled ? rootDisabledClass : '',\n  ].filter(Boolean).join(' ')\n}\n/**\n * Радиус дорожки в вертикали — пилюля **одной строки**, а не всей колонки.\n * `9999px` выверен под короткий горизонтальный ряд; на высокой колонке он\n * превращает дорожку в эллипс. Формула повторяет высоту сегмента, поэтому\n * скругление у колонки ровно такое же, как у ряда, и сегменты внутри остаются\n * пилюлями: они считают свой радиус от этого же значения.\n */\nconst verticalRadiusStyle = {\n  '--gr-segmented-radius': 'calc(var(--gr-segmented-min-height) / 2 + var(--gr-segmented-padding))',\n}\n\nexport function grSegmentedRootStyle(options: {\n  variant: GrSegmentedVariant\n  size: GrSegmentedSize\n  orientation: GrSegmentedOrientation\n}): Record<string, string> {\n  return {\n    ...rootSizeStyles[options.size],\n    ...rootVariantStyles[options.variant],\n    ...(options.orientation === 'vertical' ? verticalRadiusStyle : {}),\n  }\n}\nexport function grSegmentedIndicatorClass(variant: GrSegmentedVariant): string {\n  return [indicatorBaseClass, indicatorVariantClassMap[variant]].join(' ')\n}\nexport function grSegmentedItemClass(options: {\n  variant: GrSegmentedVariant\n  selected: boolean\n  disabled: boolean\n  iconOnly: boolean\n}): string {\n  return [\n    itemBaseClass,\n    itemVariantClassMap[options.variant],\n    options.selected ? itemSelectedClass : '',\n    options.disabled ? itemDisabledClass : itemEnabledClass,\n    options.iconOnly ? iconOnlyClass : '',\n  ].filter(Boolean).join(' ')\n}\nexport const grSegmentedItemLabelClass = itemLabelClass\nexport const grSegmentedItemIconClass = itemIconClass\nexport const grSegmentedItemSpinnerClass = itemSpinnerClass\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  iconOnlyClass,\n  indicatorBaseClass,\n  indicatorVariantClassMap,\n  itemBaseClass,\n  itemDisabledClass,\n  itemEnabledClass,\n  itemIconClass,\n  itemLabelClass,\n  itemSpinnerClass,\n  itemSelectedClass,\n  itemVariantClassMap,\n  rootBaseClass,\n  rootBlockClass,\n  rootDisabledClass,\n  rootOrientationClassMap,\n  rootVariantClassMap,\n} from './grSegmentedStyles'\n\nexport const grSegmentedClassTokens = {\n  rootBaseClass: splitClassTokens(rootBaseClass),\n  rootOrientationClassMap: Object.values(rootOrientationClassMap).flatMap(splitClassTokens),\n  rootVariantClassMap: Object.values(rootVariantClassMap).flatMap(splitClassTokens),\n  rootBlockClass: splitClassTokens(rootBlockClass),\n  rootDisabledClass: splitClassTokens(rootDisabledClass),\n  indicatorBaseClass: splitClassTokens(indicatorBaseClass),\n  indicatorVariantClassMap: Object.values(indicatorVariantClassMap).flatMap(splitClassTokens),\n  itemBaseClass: splitClassTokens(itemBaseClass),\n  itemVariantClassMap: Object.values(itemVariantClassMap).flatMap(splitClassTokens),\n  itemSelectedClass: splitClassTokens(itemSelectedClass),\n  itemDisabledClass: splitClassTokens(itemDisabledClass),\n  itemEnabledClass: splitClassTokens(itemEnabledClass),\n  itemLabelClass: splitClassTokens(itemLabelClass),\n  itemIconClass: splitClassTokens(itemIconClass),\n  itemSpinnerClass: splitClassTokens(itemSpinnerClass),\n  iconOnlyClass: splitClassTokens(iconOnlyClass),\n} as const\n\nexport const grSegmentedSafelist = [...new Set([\n  ...grSegmentedClassTokens.rootBaseClass,\n  ...grSegmentedClassTokens.rootOrientationClassMap,\n  ...grSegmentedClassTokens.rootVariantClassMap,\n  ...grSegmentedClassTokens.rootBlockClass,\n  ...grSegmentedClassTokens.rootDisabledClass,\n  ...grSegmentedClassTokens.indicatorBaseClass,\n  ...grSegmentedClassTokens.indicatorVariantClassMap,\n  ...grSegmentedClassTokens.itemBaseClass,\n  ...grSegmentedClassTokens.itemVariantClassMap,\n  ...grSegmentedClassTokens.itemSelectedClass,\n  ...grSegmentedClassTokens.itemDisabledClass,\n  ...grSegmentedClassTokens.itemEnabledClass,\n  ...grSegmentedClassTokens.itemLabelClass,\n  ...grSegmentedClassTokens.itemIconClass,\n  ...grSegmentedClassTokens.itemSpinnerClass,\n  ...grSegmentedClassTokens.iconOnlyClass,\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grSegmentedSafelist } from './safelist'\n\nexport const grSegmentedConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrSegmented',\n  safelist: grSegmentedSafelist,\n  tokenDefinitions: {\n    light: {\n      selector: ':root',\n      tokens: {'gr-segmented-indicator-highlight-shadow': '0 0 0 0 transparent'}\n    },\n    dark: {\n      selector: '.dark',\n      tokens: {'gr-segmented-indicator-highlight-shadow': '0 0 0 1px rgba(248, 250, 252, 0.08)'}\n    },\n  }\n})"],"mappings":";;;AA2BA,IAAa,gBACX;;AAGF,IAAa,0BAAkE;CAC7E,YAAY;CACZ,UAAU;AACZ;AACA,IAAa,sBAA0D;CACrE,OAAO;CACP,QAAQ;AACV;AACA,IAAa,iBAAiB;AAC9B,IAAa,oBAAoB;AACjC,IAAa,qBACX;AACF,IAAa,2BAA+D;CAC1E,OAAQ;CACR,QAAQ;AACV;AACA,IAAa,gBACX;AACF,IAAa,sBAA0D;CACrE,OAAO;CACP,QAAQ;AACV;AACA,IAAa,oBAAoB;;;;;AAKjC,IAAa,oBAAoB;AACjC,IAAa,mBAAmB;AAChC,IAAa,iBAAiB;AAC9B,IAAa,gBAAgB;AAC7B,IAAa,mBAAmB;AAChC,IAAa,gBAAgB;AAC7B,IAAM,iBAAkE;CACtE,IAAI;EACF,yBAAyB;EACzB,0BAA0B;EAC1B,0BAA0B;EAC1B,0BAA0B;EAC1B,4BAA4B;EAC5B,8BAA8B;EAC9B,8BAA8B;EAC9B,6BAA6B;CAC/B;CACA,IAAI;EACF,yBAAyB;EACzB,0BAA0B;EAC1B,0BAA0B;EAC1B,0BAA0B;EAC1B,4BAA4B;EAC5B,8BAA8B;EAC9B,8BAA8B;EAC9B,6BAA6B;CAC/B;CACA,IAAI;EACF,yBAAyB;EACzB,0BAA0B;EAC1B,0BAA0B;EAC1B,0BAA0B;EAC1B,4BAA4B;EAC5B,8BAA8B;EAC9B,8BAA8B;EAC9B,6BAA6B;CAC/B;CACA,IAAI;EACF,yBAAyB;EACzB,0BAA0B;EAC1B,0BAA0B;EAC1B,0BAA0B;EAC1B,4BAA4B;EAC5B,8BAA8B;EAC9B,8BAA8B;EAC9B,6BAA6B;CAC/B;AACF;AACA,IAAM,oBAAwE;CAC5E,OAAO;EACL,2BAA2B;EAC3B,4BAA4B;EAC5B,+BAA+B;EAC/B,+BAA+B;EAC/B,gCAAgC;EAChC,mCAAmC;EACnC,6BAA6B;EAC7B,sCAAsC;EACtC,mCAAmC;CACrC;CACA,QAAQ;EACN,2BAA2B;EAC3B,4BAA4B;EAC5B,+BAA+B;EAC/B,+BAA+B;EAC/B,gCAAgC;EAChC,mCAAmC;EACnC,6BAA6B;EAC7B,sCAAsC;EACtC,mCAAmC;CACrC;AACF;AACA,SAAgB,qBAAqB,SAK1B;CACT,OAAO;EACL;EACA,wBAAwB,QAAQ;EAChC,oBAAoB,QAAQ;EAC5B,QAAQ,QAAQ,iBAAiB;EACjC,QAAQ,WAAW,oBAAoB;CACzC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B;;;;;;;;AAQA,IAAM,sBAAsB,EAC1B,yBAAyB,yEAC3B;AAEA,SAAgB,qBAAqB,SAIV;CACzB,OAAO;EACL,GAAG,eAAe,QAAQ;EAC1B,GAAG,kBAAkB,QAAQ;EAC7B,GAAI,QAAQ,gBAAgB,aAAa,sBAAsB,CAAC;CAClE;AACF;AACA,SAAgB,0BAA0B,SAAqC;CAC7E,OAAO,CAAC,oBAAoB,yBAAyB,QAAQ,CAAC,CAAC,KAAK,GAAG;AACzE;AACA,SAAgB,qBAAqB,SAK1B;CACT,OAAO;EACL;EACA,oBAAoB,QAAQ;EAC5B,QAAQ,WAAW,oBAAoB;EACvC,QAAQ,WAAW,oBAAoB;EACvC,QAAQ,WAAW,gBAAgB;CACrC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B;AACA,IAAa,4BAA4B;AACzC,IAAa,2BAA2B;AACxC,IAAa,8BAA8B;;;ACrK3C,IAAa,yBAAyB;CACpC,eAAe,iBAAiB,aAAa;CAC7C,yBAAyB,OAAO,OAAO,uBAAuB,CAAC,CAAC,QAAQ,gBAAgB;CACxF,qBAAqB,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAChF,gBAAgB,iBAAiB,cAAc;CAC/C,mBAAmB,iBAAiB,iBAAiB;CACrD,oBAAoB,iBAAiB,kBAAkB;CACvD,0BAA0B,OAAO,OAAO,wBAAwB,CAAC,CAAC,QAAQ,gBAAgB;CAC1F,eAAe,iBAAiB,aAAa;CAC7C,qBAAqB,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAChF,mBAAmB,iBAAiB,iBAAiB;CACrD,mBAAmB,iBAAiB,iBAAiB;CACrD,kBAAkB,iBAAiB,gBAAgB;CACnD,gBAAgB,iBAAiB,cAAc;CAC/C,eAAe,iBAAiB,aAAa;CAC7C,kBAAkB,iBAAiB,gBAAgB;CACnD,eAAe,iBAAiB,aAAa;AAC/C;AAEA,IAAa,sBAAsB,CAAC,mBAAG,IAAI,IAAI;CAC7C,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;CAC1B,GAAG,uBAAuB;AAC5B,CAAC,CAAC;;;ACpDF,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACxE,MAAM;CACN,UAAU;CACV,kBAAkB;EAChB,OAAO;GACL,UAAU;GACV,QAAQ,EAAC,2CAA2C,sBAAqB;EAC3E;EACA,MAAM;GACJ,UAAU;GACV,QAAQ,EAAC,2CAA2C,sCAAqC;EAC3F;CACF;AACF,CAAC"}