@feugene/granularity 0.13.0 → 0.18.0

package/dist/chunks/grLinkStyles-BoL8QYcV.js

@@ -0,0 +1,84 @@
+//#region src/components/GrLink/grLinkStyles.ts
+var baseRootClass = "inline-flex items-center gap-1 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]";
+var focusRingClass = "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+var sizeClassBySize = {
+	xs: "text-[length:var(--gr-control-text-xs)]",
+	sm: "text-[length:var(--gr-control-text-sm)]",
+	md: "text-[length:var(--gr-control-text-md)]",
+	lg: "text-[length:var(--gr-control-text-lg)]"
+};
+var colorClass = "text-[var(--gr-link-color)] visited:text-[var(--gr-link-color)] hover:text-[var(--gr-link-color-hover)] active:text-[var(--gr-link-color-active)]";
+/**
+* Пары «цвет / hover / active» на каждый тон из ролей темы.
+*
+* Ссылка — это ТЕКСТ на фоне страницы, поэтому тона берутся из `-text`, а не
+* из насыщенного `--gr-{tone}`: последний под текст не рассчитан
+* (`--gr-success` на `--gr-bg` — 2.2:1). Готовых `-text-hover/-active` в
+* системе нет, поэтому они выводятся тем же приёмом, что и `--gr-{tone}-hover`
+* в `tokens.css` — подмесом `--gr-fg`. В светлой теме это делает ссылку темнее
+* при наведении, в тёмной — светлее, то есть в обеих контраст растёт.
+*/
+function toneTextColors(tone) {
+	const base = `var(--gr-${tone}-text)`;
+	return {
+		base,
+		hover: `color-mix(in srgb, ${base} 92%, var(--gr-fg))`,
+		active: `color-mix(in srgb, ${base} 84%, var(--gr-fg))`
+	};
+}
+var primaryTextColors = toneTextColors("primary");
+var linkToneColors = {
+	primary: primaryTextColors,
+	neutral: {
+		base: "var(--gr-fg)",
+		hover: primaryTextColors.base,
+		active: primaryTextColors.active
+	},
+	success: toneTextColors("success"),
+	warning: toneTextColors("warning"),
+	danger: toneTextColors("danger"),
+	info: toneTextColors("info"),
+	slate: toneTextColors("slate"),
+	azure: toneTextColors("azure")
+};
+/** Инлайновые CSS-переменные цвета для текущей комбинации `tone` × `variant`. */
+function grLinkColorStyle(options) {
+	if (options.disabled) return {};
+	const colors = linkToneColors[options.tone] ?? linkToneColors.primary;
+	if (options.variant === "muted") return {
+		"--gr-link-color": "var(--gr-muted-fg)",
+		"--gr-link-color-hover": colors.base,
+		"--gr-link-color-active": colors.active
+	};
+	return {
+		"--gr-link-color": colors.base,
+		"--gr-link-color-hover": colors.hover,
+		"--gr-link-color-active": colors.active
+	};
+}
+/**
+* Отключённая ссылка гасится цветом, а не `opacity`: прозрачность разбавляет
+* выверенный на AA `--gr-muted-fg` и роняет контраст ниже нормы.
+*/
+var disabledStateClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+var UNDERLINE_VALUES = [
+	"auto",
+	"always",
+	"none"
+];
+function underlineClass(underline, disabled) {
+	if (disabled) return "no-underline";
+	if (underline === "always") return "underline underline-offset-4";
+	if (underline === "none") return "no-underline";
+	return "no-underline hover:underline hover:underline-offset-4";
+}
+var underlineClasses = [...new Set(UNDERLINE_VALUES.flatMap((u) => [underlineClass(u, false), underlineClass(u, true)]))];
+function grLinkClass(options) {
+	return [
+		sizeClassBySize[options.size],
+		underlineClass(options.underline, options.disabled),
+		options.disabled ? disabledStateClass : colorClass
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { grLinkClass as a, underlineClasses as c, focusRingClass as i, colorClass as n, grLinkColorStyle as o, disabledStateClass as r, sizeClassBySize as s, baseRootClass as t };

package/dist/chunks/grLinkStyles-BoL8QYcV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grLinkStyles-BoL8QYcV.js","names":[],"sources":["../../src/components/GrLink/grLinkStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nimport type { GrTone } from '../shared/tones'\n\n/**\n * Архитектура цвета GrLink (согласована с остальной GR, ср. GrButton):\n *\n * - `tone` — семантический ЦВЕТ из общей палитры `GrTone`\n *   (`primary | neutral | success | warning | danger | info | slate | azure`).\n * - `variant` — уровень акцента (СТРУКТУРА), независимый от цвета:\n *   - `default` — текст окрашен в `tone` в покое, `tone-hover`/`tone-active` при\n *     наведении/нажатии (обычная акцентная ссылка);\n *   - `muted` — приглушённый текст (`--gr-muted-fg`) в покое, окрашивается в `tone`\n *     при наведении (вторичные/inline-ссылки в плотных областях).\n *\n * Оси ортогональны намеренно: «красная ссылка» и «приглушённая ссылка» —\n * независимые решения, и любая их комбинация осмысленна.\n */\nexport type GrLinkTone = GrTone\nexport type GrLinkVariant = 'default' | 'muted'\nexport type GrLinkUnderline = 'auto' | 'always' | 'none'\nexport type GrLinkSize = GrComponentSize\n\n// Базовые классы корневого элемента (`<a>`/`<span>`). Вынесены сюда,\n// чтобы быть единственным источником истины как для шаблона, так и для safelist.\nexport const baseRootClass = 'inline-flex items-center gap-1 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]'\nexport const focusRingClass = 'focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\nexport const sizeClassBySize: Record<GrLinkSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-xs)]',\n  sm: 'text-[length:var(--gr-control-text-sm)]',\n  md: 'text-[length:var(--gr-control-text-md)]',\n  lg: 'text-[length:var(--gr-control-text-lg)]',\n}\n\n// Цвет управляется CSS-переменными (как трек в GrSwitch): один набор классов\n// вместо class-эксплозии 8 тонов × 3 состояния. Safelist остаётся крошечным.\nexport const colorClass = 'text-[var(--gr-link-color)] visited:text-[var(--gr-link-color)] hover:text-[var(--gr-link-color-hover)] active:text-[var(--gr-link-color-active)]'\n\ntype GrLinkToneColors = { base: string, hover: string, active: string }\n\n/**\n * Пары «цвет / hover / active» на каждый тон из ролей темы.\n *\n * Ссылка — это ТЕКСТ на фоне страницы, поэтому тона берутся из `-text`, а не\n * из насыщенного `--gr-{tone}`: последний под текст не рассчитан\n * (`--gr-success` на `--gr-bg` — 2.2:1). Готовых `-text-hover/-active` в\n * системе нет, поэтому они выводятся тем же приёмом, что и `--gr-{tone}-hover`\n * в `tokens.css` — подмесом `--gr-fg`. В светлой теме это делает ссылку темнее\n * при наведении, в тёмной — светлее, то есть в обеих контраст растёт.\n */\nfunction toneTextColors(tone: string): GrLinkToneColors {\n  const base = `var(--gr-${tone}-text)`\n\n  return {\n    base,\n    hover: `color-mix(in srgb, ${base} 92%, var(--gr-fg))`,\n    active: `color-mix(in srgb, ${base} 84%, var(--gr-fg))`,\n  }\n}\n\nconst primaryTextColors = toneTextColors('primary')\n\nconst linkToneColors: Record<GrLinkTone, GrLinkToneColors> = {\n  primary: primaryTextColors,\n  // Нейтральная ссылка: читаемый `--gr-fg` в покое, акцент при наведении — тот\n  // же, что у тона `primary`, и по тому же правилу «текст берётся из `-text`».\n  neutral: { base: 'var(--gr-fg)', hover: primaryTextColors.base, active: primaryTextColors.active },\n  success: toneTextColors('success'),\n  warning: toneTextColors('warning'),\n  danger: toneTextColors('danger'),\n  info: toneTextColors('info'),\n  slate: toneTextColors('slate'),\n  azure: toneTextColors('azure'),\n}\n\n/** Инлайновые CSS-переменные цвета для текущей комбинации `tone` × `variant`. */\nexport function grLinkColorStyle(options: { tone: GrLinkTone, variant: GrLinkVariant, disabled: boolean }): Record<string, string> {\n  if (options.disabled) return {}\n\n  const colors = linkToneColors[options.tone] ?? linkToneColors.primary\n\n  if (options.variant === 'muted') {\n    return {\n      '--gr-link-color': 'var(--gr-muted-fg)',\n      '--gr-link-color-hover': colors.base,\n      '--gr-link-color-active': colors.active,\n    }\n  }\n\n  return {\n    '--gr-link-color': colors.base,\n    '--gr-link-color-hover': colors.hover,\n    '--gr-link-color-active': colors.active,\n  }\n}\n\n/**\n * Отключённая ссылка гасится цветом, а не `opacity`: прозрачность разбавляет\n * выверенный на AA `--gr-muted-fg` и роняет контраст ниже нормы.\n */\nexport const disabledStateClass = 'cursor-not-allowed text-[var(--gr-muted-fg)]'\n\nconst UNDERLINE_VALUES: readonly GrLinkUnderline[] = ['auto', 'always', 'none']\n\nfunction underlineClass(underline: GrLinkUnderline, disabled: boolean): string {\n  if (disabled) return 'no-underline'\n  if (underline === 'always') return 'underline underline-offset-4'\n  if (underline === 'none') return 'no-underline'\n  return 'no-underline hover:underline hover:underline-offset-4'\n}\n\n// Derived from `underlineClass` so that there is a single source of truth:\n// any change/extension of the underline logic is automatically reflected\n// in the safelist without manual updates.\nexport const underlineClasses: readonly string[] = [...new Set(\n  UNDERLINE_VALUES.flatMap(u => [underlineClass(u, false), underlineClass(u, true)]),\n)]\n\nexport function grLinkClass(options: { size: GrLinkSize, underline: GrLinkUnderline, disabled: boolean }): string {\n  return [\n    sizeClassBySize[options.size],\n    underlineClass(options.underline, options.disabled),\n    options.disabled ? disabledStateClass : colorClass,\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n"],"mappings":";AAyBA,IAAa,gBAAgB;AAC7B,IAAa,iBAAiB;AAE9B,IAAa,kBAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,aAAa;;;;;;;;;;;AAc1B,SAAS,eAAe,MAAgC;CACtD,MAAM,OAAO,YAAY,KAAK;CAE9B,OAAO;EACL;EACA,OAAO,sBAAsB,KAAK;EAClC,QAAQ,sBAAsB,KAAK;CACrC;AACF;AAEA,IAAM,oBAAoB,eAAe,SAAS;AAElD,IAAM,iBAAuD;CAC3D,SAAS;CAGT,SAAS;EAAE,MAAM;EAAgB,OAAO,kBAAkB;EAAM,QAAQ,kBAAkB;CAAO;CACjG,SAAS,eAAe,SAAS;CACjC,SAAS,eAAe,SAAS;CACjC,QAAQ,eAAe,QAAQ;CAC/B,MAAM,eAAe,MAAM;CAC3B,OAAO,eAAe,OAAO;CAC7B,OAAO,eAAe,OAAO;AAC/B;;AAGA,SAAgB,iBAAiB,SAAkG;CACjI,IAAI,QAAQ,UAAU,OAAO,CAAC;CAE9B,MAAM,SAAS,eAAe,QAAQ,SAAS,eAAe;CAE9D,IAAI,QAAQ,YAAY,SACtB,OAAO;EACL,mBAAmB;EACnB,yBAAyB,OAAO;EAChC,0BAA0B,OAAO;CACnC;CAGF,OAAO;EACL,mBAAmB,OAAO;EAC1B,yBAAyB,OAAO;EAChC,0BAA0B,OAAO;CACnC;AACF;;;;;AAMA,IAAa,qBAAqB;AAElC,IAAM,mBAA+C;CAAC;CAAQ;CAAU;AAAM;AAE9E,SAAS,eAAe,WAA4B,UAA2B;CAC7E,IAAI,UAAU,OAAO;CACrB,IAAI,cAAc,UAAU,OAAO;CACnC,IAAI,cAAc,QAAQ,OAAO;CACjC,OAAO;AACT;AAKA,IAAa,mBAAsC,CAAC,GAAG,IAAI,IACzD,iBAAiB,SAAQ,MAAK,CAAC,eAAe,GAAG,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,CAAC,CACnF,CAAC;AAED,SAAgB,YAAY,SAAsF;CAChH,OAAO;EACL,gBAAgB,QAAQ;EACxB,eAAe,QAAQ,WAAW,QAAQ,QAAQ;EAClD,QAAQ,WAAW,qBAAqB;CAC1C,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb"}

package/dist/chunks/grLoadingStyles-DEmji2wv.js

@@ -0,0 +1,30 @@
+import { t as splitClassTokens } from "./classTokens-BzazaERD.js";
+//#region src/components/GrLoading/grLoadingStyles.ts
+/**
+* Полноэкранный оверлей сидит на собственном слое шкалы: он блокирует всё
+* приложение целиком, поэтому обязан лечь выше модалки (`--gr-z-modal`), но
+* ниже тоста — уведомление о фоновой ошибке загрузка прятать не должна.
+* Инлайновый режим к шкале отношения не имеет: `z-10` — порядок внутри
+* собственного контейнера.
+*/
+var rootModeClass = {
+	fullscreen: "fixed inset-0 z-[var(--gr-z-loading)]",
+	inline: "absolute inset-0 z-10"
+};
+var rootBackgroundClass = "bg-[var(--gr-overlay-bg)]";
+var rootBackdropBlurClass = "backdrop-blur-sm";
+function grLoadingRootClass(options) {
+	return [
+		options.fullscreen ? rootModeClass.fullscreen : rootModeClass.inline,
+		!options.hasBackground ? rootBackgroundClass : "",
+		rootBackdropBlurClass,
+		options.customClass
+	].filter(Boolean).join(" ");
+}
+var grLoadingClassTokens = [
+	...Object.values(rootModeClass).flatMap(splitClassTokens),
+	...splitClassTokens(rootBackgroundClass),
+	...splitClassTokens(rootBackdropBlurClass)
+];
+//#endregion
+export { grLoadingRootClass as n, grLoadingClassTokens as t };

package/dist/chunks/grLoadingStyles-DEmji2wv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grLoadingStyles-DEmji2wv.js","names":[],"sources":["../../src/components/GrLoading/grLoadingStyles.ts"],"sourcesContent":["import { splitClassTokens } from '../shared/classTokens'\n\n/**\n * Полноэкранный оверлей сидит на собственном слое шкалы: он блокирует всё\n * приложение целиком, поэтому обязан лечь выше модалки (`--gr-z-modal`), но\n * ниже тоста — уведомление о фоновой ошибке загрузка прятать не должна.\n * Инлайновый режим к шкале отношения не имеет: `z-10` — порядок внутри\n * собственного контейнера.\n */\nexport const rootModeClass = {\n    fullscreen: 'fixed inset-0 z-[var(--gr-z-loading)]',\n    inline: 'absolute inset-0 z-10',\n} as const\nexport const rootBackgroundClass = 'bg-[var(--gr-overlay-bg)]'\nexport const rootBackdropBlurClass = 'backdrop-blur-sm'\n\nexport function grLoadingRootClass(options: {\n    fullscreen: boolean,\n    hasBackground: boolean,\n    customClass?: string\n}): string {\n    return [\n        options.fullscreen ? rootModeClass.fullscreen : rootModeClass.inline,\n        !options.hasBackground ? rootBackgroundClass : '',\n        rootBackdropBlurClass,\n        options.customClass,\n    ]\n        .filter(Boolean)\n        .join(' ')\n}\n\nexport const grLoadingClassTokens = [\n    ...Object.values(rootModeClass).flatMap(splitClassTokens),\n    ...splitClassTokens(rootBackgroundClass),\n    ...splitClassTokens(rootBackdropBlurClass),\n]\n"],"mappings":";;;;;;;;;AASA,IAAa,gBAAgB;CACzB,YAAY;CACZ,QAAQ;AACZ;AACA,IAAa,sBAAsB;AACnC,IAAa,wBAAwB;AAErC,SAAgB,mBAAmB,SAIxB;CACP,OAAO;EACH,QAAQ,aAAa,cAAc,aAAa,cAAc;EAC9D,CAAC,QAAQ,gBAAgB,sBAAsB;EAC/C;EACA,QAAQ;CACZ,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACjB;AAEA,IAAa,uBAAuB;CAChC,GAAG,OAAO,OAAO,aAAa,CAAC,CAAC,QAAQ,gBAAgB;CACxD,GAAG,iBAAiB,mBAAmB;CACvC,GAAG,iBAAiB,qBAAqB;AAC7C"}

package/dist/chunks/grModalStyles-EZfuEiw_.js

@@ -0,0 +1,77 @@
+//#region src/components/GrModal/grModalStyles.ts
+var root = "fixed inset-0 z-[var(--gr-z-modal)]";
+var overlay = "fixed inset-0 z-0 bg-[var(--gr-overlay-bg)]";
+var shellBase = "fixed inset-0";
+var shellPaddingBySize = {
+	sm: "p-4 sm:p-6",
+	md: "p-4 sm:p-6",
+	lg: "p-4 sm:p-6",
+	xl: "p-4 sm:p-6",
+	full: ""
+};
+var shellByScroll = {
+	outside: "overflow-y-auto",
+	inside: "overflow-hidden"
+};
+var layoutByScroll = {
+	outside: "min-h-full flex items-center justify-center",
+	inside: "h-full flex items-center justify-center"
+};
+var overlayTransition = {
+	enter: "duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+	enterFrom: "opacity-0",
+	enterTo: "opacity-100",
+	leave: "duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]",
+	leaveFrom: "opacity-100",
+	leaveTo: "opacity-0"
+};
+var panelTransition = {
+	enter: "duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+	enterFrom: "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95",
+	enterTo: "opacity-100 translate-y-0 sm:scale-100",
+	leave: "duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]",
+	leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+	leaveTo: "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95"
+};
+var panelBase = "w-full relative z-10 border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] outline-none";
+var panelOverflowByScroll = {
+	outside: "overflow-hidden",
+	inside: "max-h-full flex flex-col overflow-hidden"
+};
+/** Тело окна при `inside`. `min-h-0` — иначе flex-потомок не даст себя сжать. */
+var panelBodyScrollClass = "min-h-0 overflow-y-auto";
+/** Шапка и подвал при `inside`: сжиматься должно тело, а не они. */
+var panelSectionClass = "shrink-0";
+var panelWidthBySize = {
+	sm: "max-w-[420px]",
+	md: "max-w-[560px]",
+	lg: "max-w-[720px]",
+	xl: "max-w-[920px]",
+	full: "max-w-none"
+};
+var panelRadiusBySize = {
+	sm: "rounded-[var(--gr-radius-xl)]",
+	md: "rounded-[var(--gr-radius-xl)]",
+	lg: "rounded-[var(--gr-radius-xl)]",
+	xl: "rounded-[var(--gr-radius-xl)]",
+	full: "rounded-[var(--gr-radius-none)]"
+};
+var panelHeightBySize = { full: "h-full" };
+function getGrModalPanelClass(size, scrollBehavior = "outside") {
+	return [
+		panelBase,
+		panelOverflowByScroll[scrollBehavior],
+		panelWidthBySize[size],
+		panelHeightBySize[size],
+		panelRadiusBySize[size]
+	].filter(Boolean).join(" ");
+}
+function getGrModalShellClass(size, scrollBehavior) {
+	return [
+		shellBase,
+		shellPaddingBySize[size],
+		shellByScroll[scrollBehavior]
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { shellPaddingBySize as _, overlayTransition as a, panelHeightBySize as c, panelSectionClass as d, panelTransition as f, shellByScroll as g, shellBase as h, overlay as i, panelOverflowByScroll as l, root as m, getGrModalShellClass as n, panelBase as o, panelWidthBySize as p, layoutByScroll as r, panelBodyScrollClass as s, getGrModalPanelClass as t, panelRadiusBySize as u };

package/dist/chunks/grModalStyles-EZfuEiw_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grModalStyles-EZfuEiw_.js","names":[],"sources":["../../src/components/GrModal/grModalStyles.ts"],"sourcesContent":["import type { GrOverlaySize } from '../shared/sizes'\n\nexport type GrModalSize = GrOverlaySize\n\n/**\n * Кто скроллится при длинном содержимом: весь оверлей (`outside`, окно уезжает\n * вверх вместе со страницей) или сама панель (`inside`, окно остаётся на месте,\n * а шапка и подвал `GrDialog` — на виду).\n */\nexport type GrModalScrollBehavior = 'outside' | 'inside'\n\n// Корневые утилитарные классы, используемые шаблоном `GrModal.vue`.\n// Они же являются единственным источником истины для safelist.\nexport const root = 'fixed inset-0 z-[var(--gr-z-modal)]'\nexport const overlay = 'fixed inset-0 z-0 bg-[var(--gr-overlay-bg)]'\n\nexport const shellBase = 'fixed inset-0'\n\n// Поля вокруг панели. У `full` их нет вовсе: размер означает «во весь экран», а\n// паддинг оболочки вместе с `h-full` панели дал бы окно выше вьюпорта.\nexport const shellPaddingBySize: Record<GrModalSize, string> = {\n  sm: 'p-4 sm:p-6',\n  md: 'p-4 sm:p-6',\n  lg: 'p-4 sm:p-6',\n  xl: 'p-4 sm:p-6',\n  full: '',\n}\n\n// Скролл живёт ровно в одном месте: либо в оболочке, либо в панели. Держать\n// `overflow-y-auto` на обеих — значит получить два скроллбара на одно окно.\nexport const shellByScroll: Record<GrModalScrollBehavior, string> = {\n  outside: 'overflow-y-auto',\n  inside: 'overflow-hidden',\n}\n\nexport const layoutByScroll: Record<GrModalScrollBehavior, string> = {\n  outside: 'min-h-full flex items-center justify-center',\n  inside: 'h-full flex items-center justify-center',\n}\n\n// Классы для `<TransitionChild :enter=\"...\" :enter-from=\"...\" ...>`.\n// Разбиты по фазам транзишна, чтобы не склеивать их в «мешок токенов».\nexport const overlayTransition = {\n  enter: 'duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]',\n  enterFrom: 'opacity-0',\n  enterTo: 'opacity-100',\n  leave: 'duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]',\n  leaveFrom: 'opacity-100',\n  leaveTo: 'opacity-0',\n} as const\n\nexport const panelTransition = {\n  enter: 'duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]',\n  enterFrom: 'opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95',\n  enterTo: 'opacity-100 translate-y-0 sm:scale-100',\n  leave: 'duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]',\n  leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',\n  leaveTo: 'opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95',\n} as const\n\nexport const panelBase\n  = 'w-full relative z-10 border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] outline-none'\n\n// `overflow-hidden` панели нужен, чтобы её содержимое обрезалось по радиусу.\n// При `inside` панель становится колонкой: заголовок остаётся на месте, а\n// скроллится только тело — ради этого режим и заводят.\nexport const panelOverflowByScroll: Record<GrModalScrollBehavior, string> = {\n  outside: 'overflow-hidden',\n  inside: 'max-h-full flex flex-col overflow-hidden',\n}\n\n/** Тело окна при `inside`. `min-h-0` — иначе flex-потомок не даст себя сжать. */\nexport const panelBodyScrollClass = 'min-h-0 overflow-y-auto'\n\n/** Шапка и подвал при `inside`: сжиматься должно тело, а не они. */\nexport const panelSectionClass = 'shrink-0'\n\nexport const panelWidthBySize: Record<GrModalSize, string> = {\n  sm: 'max-w-[420px]',\n  md: 'max-w-[560px]',\n  lg: 'max-w-[720px]',\n  xl: 'max-w-[920px]',\n  full: 'max-w-none',\n}\n\nexport const panelRadiusBySize: Record<GrModalSize, string> = {\n  sm: 'rounded-[var(--gr-radius-xl)]',\n  md: 'rounded-[var(--gr-radius-xl)]',\n  lg: 'rounded-[var(--gr-radius-xl)]',\n  xl: 'rounded-[var(--gr-radius-xl)]',\n  full: 'rounded-[var(--gr-radius-none)]',\n}\n\n// Для большинства размеров высота не задаётся — `Partial` + фильтрация пустых\n// значений в `getGrModalPanelClass` избавляют от двойных пробелов.\nexport const panelHeightBySize: Partial<Record<GrModalSize, string>> = {\n  full: 'h-full',\n}\n\nexport function getGrModalPanelClass(\n  size: GrModalSize,\n  scrollBehavior: GrModalScrollBehavior = 'outside',\n): string {\n  return [\n    panelBase,\n    panelOverflowByScroll[scrollBehavior],\n    panelWidthBySize[size],\n    panelHeightBySize[size],\n    panelRadiusBySize[size],\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n\nexport function getGrModalShellClass(size: GrModalSize, scrollBehavior: GrModalScrollBehavior): string {\n  return [shellBase, shellPaddingBySize[size], shellByScroll[scrollBehavior]]\n    .filter(Boolean)\n    .join(' ')\n}\n"],"mappings":";AAaA,IAAa,OAAO;AACpB,IAAa,UAAU;AAEvB,IAAa,YAAY;AAIzB,IAAa,qBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAIA,IAAa,gBAAuD;CAClE,SAAS;CACT,QAAQ;AACV;AAEA,IAAa,iBAAwD;CACnE,SAAS;CACT,QAAQ;AACV;AAIA,IAAa,oBAAoB;CAC/B,OAAO;CACP,WAAW;CACX,SAAS;CACT,OAAO;CACP,WAAW;CACX,SAAS;AACX;AAEA,IAAa,kBAAkB;CAC7B,OAAO;CACP,WAAW;CACX,SAAS;CACT,OAAO;CACP,WAAW;CACX,SAAS;AACX;AAEA,IAAa,YACT;AAKJ,IAAa,wBAA+D;CAC1E,SAAS;CACT,QAAQ;AACV;;AAGA,IAAa,uBAAuB;;AAGpC,IAAa,oBAAoB;AAEjC,IAAa,mBAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,oBAAiD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAIA,IAAa,oBAA0D,EACrE,MAAM,SACR;AAEA,SAAgB,qBACd,MACA,iBAAwC,WAChC;CACR,OAAO;EACL;EACA,sBAAsB;EACtB,iBAAiB;EACjB,kBAAkB;EAClB,kBAAkB;CACpB,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,qBAAqB,MAAmB,gBAA+C;CACrG,OAAO;EAAC;EAAW,mBAAmB;EAAO,cAAc;CAAe,CAAC,CACxE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb"}

package/dist/chunks/grPopoverStyles-Rz_Z5nLW.js

@@ -0,0 +1,46 @@
+//#region src/components/GrPopover/grPopoverStyles.ts
+var panelSizes = {
+	xs: "p-2 text-[length:var(--gr-control-text-xs)]",
+	sm: "p-2.5 text-[length:var(--gr-control-text-sm)]",
+	md: "p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]",
+	lg: "p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]"
+};
+/**
+* `transform-origin` для scale-анимации: координаты панели уже посчитал
+* `useFloating`, здесь остаётся направление «роста» относительно триггера.
+*
+* Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не
+* хватило места и панель перевернуло вверх, origin переворачивается вместе с ней.
+*/
+var originClassByPlacement = {
+	"bottom": "origin-top",
+	"bottom-start": "origin-top-left",
+	"bottom-end": "origin-top-right",
+	"top": "origin-bottom",
+	"top-start": "origin-bottom-left",
+	"top-end": "origin-bottom-right",
+	"left": "origin-right",
+	"left-start": "origin-top-right",
+	"left-end": "origin-bottom-right",
+	"right": "origin-left",
+	"right-start": "origin-top-left",
+	"right-end": "origin-bottom-left"
+};
+function grPopoverOriginClass(placement) {
+	return originClassByPlacement[placement] ?? "origin-top";
+}
+/**
+* Поверхность панели. `max-w-[min(...)]` не даёт поповеру вылезти за узкий
+* экран: `useFloating` смещает панель в пределах viewport, но не сужает её.
+*/
+var popoverPanelBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(22rem,calc(100vw-1rem))] focus:outline-none";
+function grPopoverPanelClass(size, placement, extra) {
+	return [
+		popoverPanelBaseClass,
+		panelSizes[size],
+		grPopoverOriginClass(placement),
+		extra ?? ""
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { popoverPanelBaseClass as i, originClassByPlacement as n, panelSizes as r, grPopoverPanelClass as t };

package/dist/chunks/grPopoverStyles-Rz_Z5nLW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grPopoverStyles-Rz_Z5nLW.js","names":[],"sources":["../../src/components/GrPopover/grPopoverStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrPopoverSize = GrComponentSize\n\n/**\n * Роль панели.\n *\n * `dialog` — произвольный интерактивный контент (значение по умолчанию).\n * Остальные нужны компонентам, которые строятся поверх этого примитива:\n * меню (`GrMenu`, `GrContextMenu`), списки, палитры. Роль задаёт потребитель,\n * потому что клавиатурный паттерн принадлежит ему, а не поповеру.\n */\nexport type GrPopoverRole = 'dialog' | 'menu' | 'listbox' | 'grid' | 'group' | 'none'\n\nexport const panelSizes: Record<GrPopoverSize, string> = {\n  xs: 'p-2 text-[length:var(--gr-control-text-xs)]',\n  sm: 'p-2.5 text-[length:var(--gr-control-text-sm)]',\n  md: 'p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n  lg: 'p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/**\n * `transform-origin` для scale-анимации: координаты панели уже посчитал\n * `useFloating`, здесь остаётся направление «роста» относительно триггера.\n *\n * Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не\n * хватило места и панель перевернуло вверх, origin переворачивается вместе с ней.\n */\nexport const originClassByPlacement: Partial<Record<Placement, string>> = {\n  'bottom': 'origin-top',\n  'bottom-start': 'origin-top-left',\n  'bottom-end': 'origin-top-right',\n  'top': 'origin-bottom',\n  'top-start': 'origin-bottom-left',\n  'top-end': 'origin-bottom-right',\n  'left': 'origin-right',\n  'left-start': 'origin-top-right',\n  'left-end': 'origin-bottom-right',\n  'right': 'origin-left',\n  'right-start': 'origin-top-left',\n  'right-end': 'origin-bottom-left',\n}\n\nexport function grPopoverOriginClass(placement: Placement): string {\n  return originClassByPlacement[placement] ?? 'origin-top'\n}\n\n/**\n * Поверхность панели. `max-w-[min(...)]` не даёт поповеру вылезти за узкий\n * экран: `useFloating` смещает панель в пределах viewport, но не сужает её.\n */\nexport const popoverPanelBaseClass = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(22rem,calc(100vw-1rem))] focus:outline-none'\n\nexport function grPopoverPanelClass(size: GrPopoverSize, placement: Placement, extra?: string): string {\n  return [\n    popoverPanelBaseClass,\n    panelSizes[size],\n    grPopoverOriginClass(placement),\n    extra ?? '',\n  ].filter(Boolean).join(' ')\n}\n"],"mappings":";AAgBA,IAAa,aAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;AASA,IAAa,yBAA6D;CACxE,UAAU;CACV,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,aAAa;CACb,WAAW;CACX,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,SAAS;CACT,eAAe;CACf,aAAa;AACf;AAEA,SAAgB,qBAAqB,WAA8B;CACjE,OAAO,uBAAuB,cAAc;AAC9C;;;;;AAMA,IAAa,wBAAwB;AAErC,SAAgB,oBAAoB,MAAqB,WAAsB,OAAwB;CACrG,OAAO;EACL;EACA,WAAW;EACX,qBAAqB,SAAS;EAC9B,SAAS;CACX,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}

package/dist/chunks/grSelectStyles-eTz4uPMP.js

@@ -0,0 +1,147 @@
+//#region src/components/GrSelect/grSelectStyles.ts
+var defaultBaseClass = "w-full rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+* Цвет рамки по состоянию — та же карта, что у `GrInput` и `GrTextarea`: поля
+* одной формы обязаны показывать ошибку одинаково.
+*/
+var borderClassByState = {
+	default: "border-[var(--gr-brd)]",
+	success: "border-[var(--gr-success)] focus-visible:ring-[var(--gr-success)]",
+	warning: "border-[var(--gr-warning)] focus-visible:ring-[var(--gr-warning)]",
+	danger: "border-[var(--gr-danger)] focus-visible:ring-[var(--gr-danger)]"
+};
+/**
+* Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+* `state="danger"` — это подсветка по решению разработчика, `invalid` — вердикт
+* валидации, и тема вправе развести их по цвету.
+*/
+var invalidBorderClass = "border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]";
+var linkBaseClass = "cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+var selectSizeClassBySize = {
+	xs: "h-7 px-2.5 text-[length:var(--gr-control-text-xs)]",
+	sm: "h-8 px-3 text-[length:var(--gr-control-text-sm)]",
+	md: "h-10 px-3 text-[length:var(--gr-control-text-md)]",
+	lg: "h-11 px-4 text-[length:var(--gr-control-text-lg)]"
+};
+var selectLinkSizeClassBySize = {
+	xs: "text-[length:var(--gr-control-text-xs)]",
+	sm: "text-[length:var(--gr-control-text-sm)]",
+	md: "text-[length:var(--gr-control-text-md)]",
+	lg: "text-[length:var(--gr-control-text-lg)]"
+};
+/**
+* Ссылка — это ТЕКСТ на фоне страницы, поэтому опасный тон берётся из
+* `--gr-danger-text`, а не из насыщенного `--gr-danger` (последний под текст не
+* рассчитан). Hover/active выводятся подмесом `--gr-fg` — той же формулой, что
+* `GrLink`. `primary` берётся из `--gr-primary-text` по той же причине: на фоне
+* страницы насыщенный `--gr-primary` под текст не рассчитан.
+*
+* Классы записаны литералами, а не собраны интерполяцией: safelist и скан
+* UnoCSS читают исходник, и вычисленная строка для них не класс.
+*/
+var selectLinkVariantClassByVariant = {
+	primary: "text-[var(--gr-primary-text)] hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]",
+	default: "text-[var(--gr-fg)] hover:text-[var(--gr-primary-text)] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]",
+	muted: "text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] active:text-[var(--gr-fg)]",
+	danger: "text-[var(--gr-danger-text)] hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]"
+};
+/**
+* Variant-классы для видимой метки в `view="link"` + `optionsView="native"`.
+* Hover-цвет приходит через `peer-hover:` от прозрачного `<select>`-overlay,
+* т.к. видимая метка имеет `pointer-events-none` и не получает hover напрямую.
+*/
+var selectLinkNativeLabelVariantClassByVariant = {
+	primary: "text-[var(--gr-primary-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]",
+	default: "text-[var(--gr-fg)] peer-hover:text-[var(--gr-primary-text)] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]",
+	muted: "text-[var(--gr-muted-fg)] peer-hover:text-[var(--gr-fg)] peer-active:text-[var(--gr-fg)]",
+	danger: "text-[var(--gr-danger-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]"
+};
+function selectLinkUnderlineClass(options) {
+	if (options.disabled) return "no-underline";
+	if (options.underline === "always") return "underline underline-offset-4";
+	if (options.underline === "none") return "no-underline";
+	return "no-underline hover:underline hover:underline-offset-4";
+}
+/**
+* Underline-классы для видимой метки в `view="link"` + `optionsView="native"`.
+* Видимая метка имеет `pointer-events-none`, а hover получает прозрачный
+* `<select>`-overlay (peer), поэтому для `underline="auto"` используем
+* `peer-hover:underline` вместо `hover:underline`.
+*/
+function selectLinkNativeLabelUnderlineClass(options) {
+	if (options.disabled) return "no-underline";
+	if (options.underline === "always") return "underline underline-offset-4";
+	if (options.underline === "none") return "no-underline";
+	return "no-underline peer-hover:underline peer-hover:underline-offset-4";
+}
+/**
+* Классы прозрачного `<select>`-overlay для `view="link"` + `optionsView="native"`.
+* Нативный селект растягивается на всю обёртку, но визуально невидим — ширину обёртки
+* задаёт видимый `<span>` с выбранной меткой, благодаря чему компонент в закрытом
+* состоянии занимает столько места, сколько нужно текущей опции (а не самой длинной).
+*/
+var grSelectLinkNativeOverlayClass = "peer absolute inset-0 w-full h-full m-0 p-0 border-0 bg-transparent text-transparent appearance-none opacity-0 cursor-pointer disabled:cursor-not-allowed focus:outline-none";
+/**
+* Классы видимой метки для `view="link"` + `optionsView="native"` (поверх прозрачного `<select>`).
+* Получает все link-стили (size/variant/underline), а также focus-ring через `peer-focus-visible`.
+*/
+var grSelectLinkNativeLabelBaseClass = "pointer-events-none inline-block whitespace-nowrap align-baseline rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]";
+var grSelectLinkNativeLabelDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)] no-underline";
+var grSelectLinkNativeLabelFocusClass = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--gr-ring)]";
+function grSelectLinkNativeLabelClass(options) {
+	return [
+		grSelectLinkNativeLabelBaseClass,
+		selectLinkSizeClassBySize[options.size],
+		selectLinkNativeLabelUnderlineClass({
+			underline: options.underline,
+			disabled: options.disabled
+		}),
+		selectLinkNativeLabelVariantClassByVariant[options.variant],
+		options.disabled ? grSelectLinkNativeLabelDisabledClass : "",
+		grSelectLinkNativeLabelFocusClass
+	].filter(Boolean).join(" ");
+}
+function grSelectClass(options) {
+	if (options.view === "link") return [
+		selectLinkSizeClassBySize[options.size],
+		selectLinkUnderlineClass({
+			underline: options.underline,
+			disabled: options.disabled
+		}),
+		selectLinkVariantClassByVariant[options.variant],
+		"disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)] disabled:no-underline"
+	].join(" ");
+	return [
+		selectSizeClassBySize[options.size],
+		options.invalid ? invalidBorderClass : borderClassByState[options.state ?? "default"],
+		"disabled:cursor-not-allowed disabled:bg-[var(--gr-muted)] disabled:text-[var(--gr-muted-fg)]"
+	].join(" ");
+}
+function grSelectNativeClass(options) {
+	return [grSelectClass(options), options.showNativeChevron ? "appearance-none pr-9" : ""].filter(Boolean).join(" ");
+}
+function grSelectTriggerClass(options) {
+	if (options.optionsView !== "panel") return grSelectClass(options);
+	if (options.view === "link") return [grSelectClass(options), "inline-flex items-center gap-1 text-left"].join(" ");
+	return [grSelectClass(options), "flex items-center justify-between text-left"].join(" ");
+}
+var grSelectPanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden";
+/** Общая подсветка наведения и активной опции панели. */
+var selectOptionHighlight = "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+var selectOptionBaseClass = "rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)]";
+var selectOptionLinkWidthClass = "block min-w-full w-max whitespace-nowrap";
+var selectOptionWidthClass = "w-full";
+var selectOptionEnabledClass = `hover:${selectOptionHighlight}`;
+var selectOptionActiveClass = selectOptionHighlight;
+/** Выключенная опция гасится токеном текста — по той же причине, что и контрол. */
+var selectOptionDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+function grSelectOptionClass(options) {
+	return [
+		selectOptionBaseClass,
+		options.view === "link" ? selectOptionLinkWidthClass : selectOptionWidthClass,
+		options.disabled ? selectOptionDisabledClass : selectOptionEnabledClass,
+		!options.disabled && options.active ? selectOptionActiveClass : ""
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { selectSizeClassBySize as C, selectOptionWidthClass as S, selectOptionActiveClass as _, grSelectLinkNativeLabelDisabledClass as a, selectOptionEnabledClass as b, grSelectNativeClass as c, grSelectTriggerClass as d, invalidBorderClass as f, selectLinkVariantClassByVariant as g, selectLinkSizeClassBySize as h, grSelectLinkNativeLabelClass as i, grSelectOptionClass as l, selectLinkNativeLabelVariantClassByVariant as m, defaultBaseClass as n, grSelectLinkNativeLabelFocusClass as o, linkBaseClass as p, grSelectLinkNativeLabelBaseClass as r, grSelectLinkNativeOverlayClass as s, borderClassByState as t, grSelectPanelClasses as u, selectOptionBaseClass as v, selectOptionLinkWidthClass as x, selectOptionDisabledClass as y };

package/dist/chunks/grSelectStyles-eTz4uPMP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grSelectStyles-eTz4uPMP.js","names":[],"sources":["../../src/components/GrSelect/grSelectStyles.ts"],"sourcesContent":["import type { GrComponentSize, GrControlState } from '../shared/sizes'\n\nexport type GrSelectView = 'default' | 'link'\nexport type GrSelectSize = GrComponentSize\nexport type GrSelectVariant = 'primary' | 'default' | 'muted' | 'danger'\nexport type GrSelectUnderline = 'auto' | 'always' | 'none'\nexport type GrSelectOptionsView = 'native' | 'panel'\n/**\n * Тип значения опции. Ограничен примитивами, которые переживают путь через DOM:\n * нативный `<select>` хранит в `option.value` только строку, поэтому значение\n * должно однозначно восстанавливаться из своего строкового представления.\n * Объектные модели потребовали бы отдельного key-экстрактора — см. `docs/components.md`.\n */\n/**\n * Значение опции. Объект допустим, но тогда обязателен проп `valueKey`: в DOM\n * значение живёт строкой, и без ключа объекты неотличимы друг от друга.\n */\nexport type GrSelectValue = string | number | object\nexport type GrSelectState = GrControlState\n\nexport type GrSelectOption<TValue extends GrSelectValue = string> = {\n  value: TValue\n  label: string\n  disabled?: boolean\n}\n/** Группа опций: заголовок `label` + вложенные опции `options`. */\nexport type GrSelectOptionGroup<TValue extends GrSelectValue = string> = {\n  label: string\n  options: GrSelectOption<TValue>[]\n}\n/** Элемент списка опций: либо одиночная опция, либо группа опций. */\nexport type GrSelectOptionOrGroup<TValue extends GrSelectValue = string> =\n  | GrSelectOption<TValue>\n  | GrSelectOptionGroup<TValue>\nexport type GrSelectModelValue<TValue extends GrSelectValue = string> = TValue | TValue[]\n\nexport const defaultBaseClass = 'w-full rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\n/**\n * Цвет рамки по состоянию — та же карта, что у `GrInput` и `GrTextarea`: поля\n * одной формы обязаны показывать ошибку одинаково.\n */\nexport const borderClassByState: Record<GrSelectState, string> = {\n  default: 'border-[var(--gr-brd)]',\n  success: 'border-[var(--gr-success)] focus-visible:ring-[var(--gr-success)]',\n  warning: 'border-[var(--gr-warning)] focus-visible:ring-[var(--gr-warning)]',\n  danger: 'border-[var(--gr-danger)] focus-visible:ring-[var(--gr-danger)]',\n}\n\n/**\n * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:\n * `state=\"danger\"` — это подсветка по решению разработчика, `invalid` — вердикт\n * валидации, и тема вправе развести их по цвету.\n */\nexport const invalidBorderClass = 'border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]'\nexport const linkBaseClass = 'cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\n\nexport const selectSizeClassBySize: Record<GrSelectSize, string> = {\n  xs: 'h-7 px-2.5 text-[length:var(--gr-control-text-xs)]',\n  sm: 'h-8 px-3 text-[length:var(--gr-control-text-sm)]',\n  md: 'h-10 px-3 text-[length:var(--gr-control-text-md)]',\n  lg: 'h-11 px-4 text-[length:var(--gr-control-text-lg)]',\n}\n\nexport const selectLinkSizeClassBySize: Record<GrSelectSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-xs)]',\n  sm: 'text-[length:var(--gr-control-text-sm)]',\n  md: 'text-[length:var(--gr-control-text-md)]',\n  lg: 'text-[length:var(--gr-control-text-lg)]',\n}\n\n/**\n * Ссылка — это ТЕКСТ на фоне страницы, поэтому опасный тон берётся из\n * `--gr-danger-text`, а не из насыщенного `--gr-danger` (последний под текст не\n * рассчитан). Hover/active выводятся подмесом `--gr-fg` — той же формулой, что\n * `GrLink`. `primary` берётся из `--gr-primary-text` по той же причине: на фоне\n * страницы насыщенный `--gr-primary` под текст не рассчитан.\n *\n * Классы записаны литералами, а не собраны интерполяцией: safelist и скан\n * UnoCSS читают исходник, и вычисленная строка для них не класс.\n */\nexport const selectLinkVariantClassByVariant: Record<GrSelectVariant, string> = {\n  primary: 'text-[var(--gr-primary-text)] hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n  default: 'text-[var(--gr-fg)] hover:text-[var(--gr-primary-text)] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n  muted: 'text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] active:text-[var(--gr-fg)]',\n  danger: 'text-[var(--gr-danger-text)] hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]',\n}\n\n/**\n * Variant-классы для видимой метки в `view=\"link\"` + `optionsView=\"native\"`.\n * Hover-цвет приходит через `peer-hover:` от прозрачного `<select>`-overlay,\n * т.к. видимая метка имеет `pointer-events-none` и не получает hover напрямую.\n */\nexport const selectLinkNativeLabelVariantClassByVariant: Record<GrSelectVariant, string> = {\n  primary: 'text-[var(--gr-primary-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n  default: 'text-[var(--gr-fg)] peer-hover:text-[var(--gr-primary-text)] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n  muted: 'text-[var(--gr-muted-fg)] peer-hover:text-[var(--gr-fg)] peer-active:text-[var(--gr-fg)]',\n  danger: 'text-[var(--gr-danger-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]',\n}\n\nfunction selectLinkUnderlineClass(options: { underline: GrSelectUnderline, disabled: boolean }): string {\n  if (options.disabled) return 'no-underline'\n  if (options.underline === 'always') return 'underline underline-offset-4'\n  if (options.underline === 'none') return 'no-underline'\n  return 'no-underline hover:underline hover:underline-offset-4'\n}\n\n/**\n * Underline-классы для видимой метки в `view=\"link\"` + `optionsView=\"native\"`.\n * Видимая метка имеет `pointer-events-none`, а hover получает прозрачный\n * `<select>`-overlay (peer), поэтому для `underline=\"auto\"` используем\n * `peer-hover:underline` вместо `hover:underline`.\n */\nfunction selectLinkNativeLabelUnderlineClass(options: { underline: GrSelectUnderline, disabled: boolean }): string {\n  if (options.disabled) return 'no-underline'\n  if (options.underline === 'always') return 'underline underline-offset-4'\n  if (options.underline === 'none') return 'no-underline'\n  return 'no-underline peer-hover:underline peer-hover:underline-offset-4'\n}\n\n/**\n * Классы прозрачного `<select>`-overlay для `view=\"link\"` + `optionsView=\"native\"`.\n * Нативный селект растягивается на всю обёртку, но визуально невидим — ширину обёртки\n * задаёт видимый `<span>` с выбранной меткой, благодаря чему компонент в закрытом\n * состоянии занимает столько места, сколько нужно текущей опции (а не самой длинной).\n */\nexport const grSelectLinkNativeOverlayClass = 'peer absolute inset-0 w-full h-full m-0 p-0 border-0 bg-transparent text-transparent appearance-none opacity-0 cursor-pointer disabled:cursor-not-allowed focus:outline-none'\n\n/**\n * Классы видимой метки для `view=\"link\"` + `optionsView=\"native\"` (поверх прозрачного `<select>`).\n * Получает все link-стили (size/variant/underline), а также focus-ring через `peer-focus-visible`.\n */\nexport const grSelectLinkNativeLabelBaseClass = 'pointer-events-none inline-block whitespace-nowrap align-baseline rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]'\nexport const grSelectLinkNativeLabelDisabledClass = 'cursor-not-allowed text-[var(--gr-muted-fg)] no-underline'\nexport const grSelectLinkNativeLabelFocusClass = 'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--gr-ring)]'\n\nexport function grSelectLinkNativeLabelClass(options: {\n  size: GrSelectSize\n  variant: GrSelectVariant\n  underline: GrSelectUnderline\n  disabled: boolean\n}): string {\n  return [\n    grSelectLinkNativeLabelBaseClass,\n    selectLinkSizeClassBySize[options.size],\n    selectLinkNativeLabelUnderlineClass({ underline: options.underline, disabled: options.disabled }),\n    selectLinkNativeLabelVariantClassByVariant[options.variant],\n    options.disabled ? grSelectLinkNativeLabelDisabledClass : '',\n    grSelectLinkNativeLabelFocusClass,\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n\nexport function grSelectClass(options: {\n  view: GrSelectView\n  size: GrSelectSize\n  disabled: boolean\n  variant: GrSelectVariant\n  underline: GrSelectUnderline\n  state?: GrSelectState\n  invalid?: boolean\n}): string {\n  if (options.view === 'link') {\n    return [\n      selectLinkSizeClassBySize[options.size],\n      selectLinkUnderlineClass({ underline: options.underline, disabled: options.disabled }),\n      selectLinkVariantClassByVariant[options.variant],\n      'disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)] disabled:no-underline',\n    ].join(' ')\n  }\n\n  return [\n    selectSizeClassBySize[options.size],\n    // `invalid` сильнее `state`: ошибка перекрывает любую другую подсветку.\n    options.invalid ? invalidBorderClass : borderClassByState[options.state ?? 'default'],\n    // Заблокированный контрол гасится фоном и цветом текста, а не `opacity`:\n    // прозрачность разбавляет выверенные на AA токены и роняет контраст.\n    'disabled:cursor-not-allowed disabled:bg-[var(--gr-muted)] disabled:text-[var(--gr-muted-fg)]',\n  ].join(' ')\n}\n\nexport function grSelectNativeClass(options: {\n  view: GrSelectView\n  size: GrSelectSize\n  disabled: boolean\n  variant: GrSelectVariant\n  underline: GrSelectUnderline\n  showNativeChevron: boolean\n  state?: GrSelectState\n  invalid?: boolean\n}): string {\n  return [\n    grSelectClass(options),\n    options.showNativeChevron ? 'appearance-none pr-9' : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n\nexport function grSelectTriggerClass(options: {\n  view: GrSelectView\n  optionsView: GrSelectOptionsView\n  size: GrSelectSize\n  disabled: boolean\n  variant: GrSelectVariant\n  underline: GrSelectUnderline\n  state?: GrSelectState\n  invalid?: boolean\n}): string {\n  if (options.optionsView !== 'panel') {\n    return grSelectClass(options)\n  }\n\n  if (options.view === 'link') {\n    return [\n      grSelectClass(options),\n      'inline-flex items-center gap-1 text-left',\n    ].join(' ')\n  }\n\n  return [\n    grSelectClass(options),\n    'flex items-center justify-between text-left',\n  ].join(' ')\n}\n\nexport const grSelectPanelClasses = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden'\n\n/** Общая подсветка наведения и активной опции панели. */\nconst selectOptionHighlight = 'bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]'\n\nexport const selectOptionBaseClass = 'rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)]'\nexport const selectOptionLinkWidthClass = 'block min-w-full w-max whitespace-nowrap'\nexport const selectOptionWidthClass = 'w-full'\nexport const selectOptionEnabledClass = `hover:${selectOptionHighlight}`\nexport const selectOptionActiveClass = selectOptionHighlight\n/** Выключенная опция гасится токеном текста — по той же причине, что и контрол. */\nexport const selectOptionDisabledClass = 'cursor-not-allowed text-[var(--gr-muted-fg)]'\n\nexport function grSelectOptionClass(options: {\n  view: GrSelectView\n  disabled: boolean\n  active: boolean\n}): string {\n  return [\n    selectOptionBaseClass,\n    options.view === 'link' ? selectOptionLinkWidthClass : selectOptionWidthClass,\n    options.disabled ? selectOptionDisabledClass : selectOptionEnabledClass,\n    !options.disabled && options.active ? selectOptionActiveClass : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n"],"mappings":";AAoCA,IAAa,mBAAmB;;;;;AAMhC,IAAa,qBAAoD;CAC/D,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;;;;;AAOA,IAAa,qBAAqB;AAClC,IAAa,gBAAgB;AAG7B,IAAa,wBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,4BAA0D;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;AAYA,IAAa,kCAAmE;CAC9E,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;AACV;;;;;;AAOA,IAAa,6CAA8E;CACzF,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,yBAAyB,SAAsE;CACtG,IAAI,QAAQ,UAAU,OAAO;CAC7B,IAAI,QAAQ,cAAc,UAAU,OAAO;CAC3C,IAAI,QAAQ,cAAc,QAAQ,OAAO;CACzC,OAAO;AACT;;;;;;;AAQA,SAAS,oCAAoC,SAAsE;CACjH,IAAI,QAAQ,UAAU,OAAO;CAC7B,IAAI,QAAQ,cAAc,UAAU,OAAO;CAC3C,IAAI,QAAQ,cAAc,QAAQ,OAAO;CACzC,OAAO;AACT;;;;;;;AAQA,IAAa,iCAAiC;;;;;AAM9C,IAAa,mCAAmC;AAChD,IAAa,uCAAuC;AACpD,IAAa,oCAAoC;AAEjD,SAAgB,6BAA6B,SAKlC;CACT,OAAO;EACL;EACA,0BAA0B,QAAQ;EAClC,oCAAoC;GAAE,WAAW,QAAQ;GAAW,UAAU,QAAQ;EAAS,CAAC;EAChG,2CAA2C,QAAQ;EACnD,QAAQ,WAAW,uCAAuC;EAC1D;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,cAAc,SAQnB;CACT,IAAI,QAAQ,SAAS,QACnB,OAAO;EACL,0BAA0B,QAAQ;EAClC,yBAAyB;GAAE,WAAW,QAAQ;GAAW,UAAU,QAAQ;EAAS,CAAC;EACrF,gCAAgC,QAAQ;EACxC;CACF,CAAC,CAAC,KAAK,GAAG;CAGZ,OAAO;EACL,sBAAsB,QAAQ;EAE9B,QAAQ,UAAU,qBAAqB,mBAAmB,QAAQ,SAAS;EAG3E;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,SAAgB,oBAAoB,SASzB;CACT,OAAO,CACL,cAAc,OAAO,GACrB,QAAQ,oBAAoB,yBAAyB,EACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,qBAAqB,SAS1B;CACT,IAAI,QAAQ,gBAAgB,SAC1B,OAAO,cAAc,OAAO;CAG9B,IAAI,QAAQ,SAAS,QACnB,OAAO,CACL,cAAc,OAAO,GACrB,0CACF,CAAC,CAAC,KAAK,GAAG;CAGZ,OAAO,CACL,cAAc,OAAO,GACrB,6CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAa,uBAAuB;;AAGpC,IAAM,wBAAwB;AAE9B,IAAa,wBAAwB;AACrC,IAAa,6BAA6B;AAC1C,IAAa,yBAAyB;AACtC,IAAa,2BAA2B,SAAS;AACjD,IAAa,0BAA0B;;AAEvC,IAAa,4BAA4B;AAEzC,SAAgB,oBAAoB,SAIzB;CACT,OAAO;EACL;EACA,QAAQ,SAAS,SAAS,6BAA6B;EACvD,QAAQ,WAAW,4BAA4B;EAC/C,CAAC,QAAQ,YAAY,QAAQ,SAAS,0BAA0B;CAClE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb"}

package/dist/chunks/grSliderStyles-B5uNxNJq.js

@@ -0,0 +1,133 @@
+//#region src/components/GrSlider/grSliderStyles.ts
+/**
+* Кастомизация через CSS-переменные (можно задать на самом слайдере или любом
+* предке — inline `style`, класс, тема). Значение по умолчанию — второй аргумент
+* `var(--name, default)`, поэтому переопределять можно точечно:
+*
+* - `--gr-slider-rail`         — цвет фона дорожки (неактивная часть).
+* - `--gr-slider-fill`         — цвет активной (заполненной) части.
+* - `--gr-slider-thumb-bg`     — заливка бегунка.
+* - `--gr-slider-thumb-border` — цвет окантовки бегунка (по умолчанию = fill).
+* - `--gr-slider-thumb-size`   — диаметр бегунка (по умолчанию — из `size`).
+* - `--gr-slider-track-height` — толщина дорожки (по умолчанию — из `size`).
+* - `--gr-slider-length`       — длина вертикальной дорожки (по умолчанию `10rem`).
+*/
+var sliderTrackHeightBySize = {
+	xs: "h-[var(--gr-slider-track-height,0.1875rem)]",
+	sm: "h-[var(--gr-slider-track-height,0.25rem)]",
+	md: "h-[var(--gr-slider-track-height,0.375rem)]",
+	lg: "h-[var(--gr-slider-track-height,0.5rem)]"
+};
+/** В вертикали та же толщина задаёт ширину, а длину берёт `--gr-slider-length`. */
+var sliderTrackWidthBySize = {
+	xs: "w-[var(--gr-slider-track-height,0.1875rem)]",
+	sm: "w-[var(--gr-slider-track-height,0.25rem)]",
+	md: "w-[var(--gr-slider-track-height,0.375rem)]",
+	lg: "w-[var(--gr-slider-track-height,0.5rem)]"
+};
+var sliderTrackVerticalLengthClass = "h-[var(--gr-slider-length,10rem)]";
+var sliderThumbSizeBySize = {
+	xs: "h-[var(--gr-slider-thumb-size,0.75rem)] w-[var(--gr-slider-thumb-size,0.75rem)]",
+	sm: "h-[var(--gr-slider-thumb-size,0.875rem)] w-[var(--gr-slider-thumb-size,0.875rem)]",
+	md: "h-[var(--gr-slider-thumb-size,1rem)] w-[var(--gr-slider-thumb-size,1rem)]",
+	lg: "h-[var(--gr-slider-thumb-size,1.25rem)] w-[var(--gr-slider-thumb-size,1.25rem)]"
+};
+var sliderPaddingBySize = {
+	xs: "py-1",
+	sm: "py-1.5",
+	md: "py-2",
+	lg: "py-2.5"
+};
+var sliderRailClass = "absolute inset-0 rounded-[var(--gr-radius-full)] bg-[var(--gr-slider-rail,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+var sliderFillBaseClass = "absolute rounded-[var(--gr-radius-full)]";
+/** Заливка растёт вдоль дорожки: по горизонтали — влево-вправо, по вертикали — снизу вверх. */
+var sliderFillOrientationClass = {
+	horizontal: "top-0 bottom-0",
+	vertical: "left-0 right-0"
+};
+/**
+* Недоступный слайдер гасится токенами, а не `opacity`: прозрачность разбавляет
+* выверенные на AA токены и роняет контраст подписей меток.
+*/
+var sliderFillDisabledClass = "bg-[var(--gr-disabled-fg)]";
+var sliderFillEnabledClass = "bg-[var(--gr-slider-fill,var(--gr-primary))]";
+function sliderFillClass(disabled) {
+	return [sliderFillBaseClass, disabled ? sliderFillDisabledClass : sliderFillEnabledClass].join(" ");
+}
+var 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)]";
+/** Бегунок центрируется поперёк дорожки, а вдоль неё его ведёт inline-стиль. */
+var sliderThumbOrientationClass = {
+	horizontal: "top-1/2 -translate-x-1/2 -translate-y-1/2",
+	vertical: "left-1/2 -translate-x-1/2 translate-y-1/2"
+};
+var sliderThumbDisabledClass = "cursor-not-allowed border-[var(--gr-disabled-fg)] bg-[var(--gr-disabled-bg)]";
+var sliderThumbEnabledClass = "cursor-grab active:cursor-grabbing hover:scale-110";
+function sliderThumbClass(options) {
+	return [
+		sliderThumbBaseClass,
+		sliderThumbOrientationClass[options.orientation ?? "horizontal"],
+		sliderThumbSizeBySize[options.size],
+		options.disabled ? sliderThumbDisabledClass : sliderThumbEnabledClass
+	].join(" ");
+}
+var 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)]";
+/** В вертикали подсказка уходит вбок: над бегунком она легла бы на дорожку. */
+var sliderTooltipOrientationClass = {
+	horizontal: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+	vertical: "right-full top-1/2 mr-2 -translate-y-1/2"
+};
+function sliderTooltipClass(orientation = "horizontal") {
+	return [sliderTooltipBaseClass, sliderTooltipOrientationClass[orientation]].join(" ");
+}
+var sliderMarkTickBaseClass = "absolute h-1.5 w-1.5 rounded-[var(--gr-radius-full)] bg-[var(--gr-bg)] ring-1 ring-[var(--gr-brd)]";
+var sliderMarkTickOrientationClass = {
+	horizontal: "top-1/2 -translate-x-1/2 -translate-y-1/2",
+	vertical: "left-1/2 -translate-x-1/2 translate-y-1/2"
+};
+function sliderMarkTickClass(orientation = "horizontal") {
+	return [sliderMarkTickBaseClass, sliderMarkTickOrientationClass[orientation]].join(" ");
+}
+var sliderMarkLabelClass = "absolute whitespace-nowrap text-[length:var(--gr-text-2xs)] leading-none text-[var(--gr-muted-fg)]";
+var sliderMarkLabelDisabledClass = "text-[var(--gr-disabled-fg)]";
+/** Вертикальные подписи уходят вправо от дорожки: под ней им места нет. */
+var sliderMarkLabelVerticalClass = "left-full ml-2.5 translate-y-1/2";
+var sliderMarkLabelHorizontalClass = "top-full mt-2.5";
+function sliderMarkLabelClassFor(pct, options = {}) {
+	const orientation = options.orientation ?? "horizontal";
+	const tone = options.disabled ? sliderMarkLabelDisabledClass : "";
+	if (orientation === "vertical") return [
+		sliderMarkLabelClass,
+		sliderMarkLabelVerticalClass,
+		tone
+	].filter(Boolean).join(" ");
+	return [
+		sliderMarkLabelClass,
+		sliderMarkLabelHorizontalClass,
+		pct <= .5 ? "translate-x-0" : pct >= 99.5 ? "-translate-x-full" : "-translate-x-1/2",
+		tone
+	].filter(Boolean).join(" ");
+}
+var sliderRootBaseClass = "relative select-none";
+var sliderRootOrientationClass = {
+	horizontal: "w-full",
+	vertical: "inline-flex"
+};
+/** Горизонтальный отступ обёртки вертикали — та же роль, что у `py-*` у горизонтали. */
+var sliderPaddingVerticalBySize = {
+	xs: "px-1",
+	sm: "px-1.5",
+	md: "px-2",
+	lg: "px-2.5"
+};
+function sliderRootClass(options) {
+	const orientation = options.orientation ?? "horizontal";
+	const vertical = orientation === "vertical";
+	return [
+		sliderRootBaseClass,
+		sliderRootOrientationClass[orientation],
+		vertical ? sliderPaddingVerticalBySize[options.size] : sliderPaddingBySize[options.size],
+		options.hasMarks ? vertical ? "mr-10" : "mb-7" : ""
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { sliderTrackVerticalLengthClass as A, sliderThumbEnabledClass as C, sliderTooltipClass as D, sliderTooltipBaseClass as E, sliderTooltipOrientationClass as O, sliderThumbDisabledClass as S, sliderThumbSizeBySize as T, sliderRootBaseClass as _, sliderFillOrientationClass as a, sliderThumbBaseClass as b, sliderMarkLabelDisabledClass as c, sliderMarkTickBaseClass as d, sliderMarkTickClass as f, sliderRailClass as g, sliderPaddingVerticalBySize as h, sliderFillEnabledClass as i, sliderTrackWidthBySize as j, sliderTrackHeightBySize as k, sliderMarkLabelHorizontalClass as l, sliderPaddingBySize as m, sliderFillClass as n, sliderMarkLabelClass as o, sliderMarkTickOrientationClass as p, sliderFillDisabledClass as r, sliderMarkLabelClassFor as s, sliderFillBaseClass as t, sliderMarkLabelVerticalClass as u, sliderRootClass as v, sliderThumbOrientationClass as w, sliderThumbClass as x, sliderRootOrientationClass as y };