@feugene/granularity 0.13.0 → 0.18.0

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

@@ -0,0 +1,221 @@
+//#region src/components/GrButton/grButtonStyles.ts
+var base = "inline-flex items-center justify-center gap-2 select-none whitespace-nowrap rounded-[var(--gr-button-radius,0.375rem)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed";
+/** Кнопка на всю ширину контейнера. */
+var blockClass = "w-full";
+/**
+* Отключённая кнопка гасится токенами, а не `opacity`: прозрачность разбавляет
+* выверенные на AA цвета, а кнопка чаще всего оказывается на цветной подложке,
+* где разбавленный текст проваливается первым.
+*
+* Классы применяются ВМЕСТО вариантных, а не поверх: два `bg-*` одной
+* специфичности разрулил бы порядок в сгенерированном CSS, а не порядок в
+* списке классов. Отсюда же и разбиение по вариантам: у прозрачных
+* (`outline`, `ghost`, `ghost-border`) заливки нет и в отключённом виде —
+* иначе стрелка пагинации превращалась бы в залитую плашку.
+*/
+var disabledClassByVariant = {
+	primary: "bg-[var(--gr-button-disabled-bg)] text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed",
+	secondary: "bg-[var(--gr-button-disabled-bg)] text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed",
+	outline: "bg-transparent text-[var(--gr-button-disabled-fg)] border border-[var(--gr-button-disabled-brd)] cursor-not-allowed",
+	ghost: "bg-transparent text-[var(--gr-button-disabled-fg)] cursor-not-allowed",
+	"ghost-border": "bg-transparent text-[var(--gr-button-disabled-fg)] border border-transparent cursor-not-allowed"
+};
+var grButtonBaseClass = base;
+var sizes = {
+	xs: "h-7 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] px-2.5",
+	sm: "h-8 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] px-3",
+	md: "h-10 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] px-4",
+	lg: "h-11 text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)] px-5"
+};
+/**
+* Квадратный режим — через `--gr-button-square-size` с размерным дефолтом в
+* fallback: потребитель задаёт переменную в своём CSS и подгоняет кнопку под
+* свою сетку (приём из `GrSlider`). Размер задаётся только здесь: инлайн-стиль
+* в SFC перекрыл бы эти классы, и переменная перестала бы что-либо значить.
+*/
+var squareSizes = {
+	xs: "h-[var(--gr-button-square-size,1.75rem)] w-[var(--gr-button-square-size,1.75rem)] min-w-[var(--gr-button-square-size,1.75rem)] p-0",
+	sm: "h-[var(--gr-button-square-size,2rem)] w-[var(--gr-button-square-size,2rem)] min-w-[var(--gr-button-square-size,2rem)] p-0",
+	md: "h-[var(--gr-button-square-size,2.5rem)] w-[var(--gr-button-square-size,2.5rem)] min-w-[var(--gr-button-square-size,2.5rem)] p-0",
+	lg: "h-[var(--gr-button-square-size,2.75rem)] w-[var(--gr-button-square-size,2.75rem)] min-w-[var(--gr-button-square-size,2.75rem)] p-0"
+};
+var tones = {
+	primary: {
+		solidBackground: "var(--gr-button-primary-bg,var(--gr-primary))",
+		solidBackgroundHover: "var(--gr-button-primary-bg-hover,var(--gr-primary-hover))",
+		solidBackgroundActive: "var(--gr-button-primary-bg-active,var(--gr-primary-active))",
+		solidForeground: "var(--gr-button-primary-fg,var(--gr-primary-fg))",
+		accentText: "var(--gr-accent-fg)",
+		softBackground: "var(--gr-button-primary-soft-bg)",
+		softBackgroundHover: "var(--gr-button-primary-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-primary-soft-bg-active)",
+		softForeground: "var(--gr-accent-fg)",
+		border: "var(--gr-primary)",
+		borderHover: "var(--gr-primary-hover)",
+		borderActive: "var(--gr-primary-active)"
+	},
+	neutral: {
+		solidBackground: "var(--gr-secondary)",
+		solidBackgroundHover: "var(--gr-secondary-hover)",
+		solidBackgroundActive: "var(--gr-secondary-active)",
+		solidForeground: "var(--gr-secondary-fg)",
+		accentText: "var(--gr-fg)",
+		softBackground: "var(--gr-secondary)",
+		softBackgroundHover: "var(--gr-secondary-hover)",
+		softBackgroundActive: "var(--gr-secondary-active)",
+		softForeground: "var(--gr-secondary-fg)",
+		border: "var(--gr-brd)",
+		borderHover: "var(--gr-brd-hover,var(--gr-brd))",
+		borderActive: "var(--gr-brd-active,var(--gr-brd))"
+	},
+	success: {
+		solidBackground: "var(--gr-button-success-bg,var(--gr-success))",
+		solidBackgroundHover: "var(--gr-button-success-bg-hover,var(--gr-success-hover))",
+		solidBackgroundActive: "var(--gr-button-success-bg-active,var(--gr-success-active))",
+		solidForeground: "var(--gr-button-success-fg,var(--gr-success-fg,var(--gr-fg)))",
+		accentText: "var(--gr-success-text,var(--gr-success))",
+		softBackground: "var(--gr-button-success-soft-bg)",
+		softBackgroundHover: "var(--gr-button-success-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-success-soft-bg-active)",
+		softForeground: "var(--gr-success-text,var(--gr-success))",
+		border: "var(--gr-success)",
+		borderHover: "var(--gr-success-hover)",
+		borderActive: "var(--gr-success-active)"
+	},
+	warning: {
+		solidBackground: "var(--gr-button-warning-bg,var(--gr-warning))",
+		solidBackgroundHover: "var(--gr-button-warning-bg-hover,var(--gr-warning-hover))",
+		solidBackgroundActive: "var(--gr-button-warning-bg-active,var(--gr-warning-active))",
+		solidForeground: "var(--gr-button-warning-fg,var(--gr-warning-fg,var(--gr-fg)))",
+		accentText: "var(--gr-warning-text,var(--gr-warning))",
+		softBackground: "var(--gr-button-warning-soft-bg)",
+		softBackgroundHover: "var(--gr-button-warning-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-warning-soft-bg-active)",
+		softForeground: "var(--gr-warning-text,var(--gr-warning))",
+		border: "var(--gr-warning)",
+		borderHover: "var(--gr-warning-hover)",
+		borderActive: "var(--gr-warning-active)"
+	},
+	danger: {
+		solidBackground: "var(--gr-button-danger-bg,var(--gr-danger))",
+		solidBackgroundHover: "var(--gr-button-danger-bg-hover,var(--gr-danger-hover))",
+		solidBackgroundActive: "var(--gr-button-danger-bg-active,var(--gr-danger-active))",
+		solidForeground: "var(--gr-button-danger-fg,var(--gr-danger-fg,var(--gr-fg)))",
+		accentText: "var(--gr-danger-text,var(--gr-danger))",
+		softBackground: "var(--gr-button-danger-soft-bg)",
+		softBackgroundHover: "var(--gr-button-danger-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-danger-soft-bg-active)",
+		softForeground: "var(--gr-danger-text,var(--gr-danger))",
+		border: "var(--gr-danger)",
+		borderHover: "var(--gr-danger-hover)",
+		borderActive: "var(--gr-danger-active)"
+	},
+	info: {
+		solidBackground: "var(--gr-button-info-bg,var(--gr-info))",
+		solidBackgroundHover: "var(--gr-button-info-bg-hover,var(--gr-info-hover))",
+		solidBackgroundActive: "var(--gr-button-info-bg-active,var(--gr-info-active))",
+		solidForeground: "var(--gr-button-info-fg,var(--gr-info-fg,var(--gr-fg)))",
+		accentText: "var(--gr-info-text,var(--gr-info))",
+		softBackground: "var(--gr-button-info-soft-bg)",
+		softBackgroundHover: "var(--gr-button-info-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-info-soft-bg-active)",
+		softForeground: "var(--gr-info-text,var(--gr-info))",
+		border: "var(--gr-info)",
+		borderHover: "var(--gr-info-hover)",
+		borderActive: "var(--gr-info-active)"
+	},
+	slate: {
+		solidBackground: "var(--gr-button-slate-bg,var(--gr-slate))",
+		solidBackgroundHover: "var(--gr-button-slate-bg-hover,var(--gr-slate-hover))",
+		solidBackgroundActive: "var(--gr-button-slate-bg-active,var(--gr-slate-active))",
+		solidForeground: "var(--gr-button-slate-fg,var(--gr-slate-fg,var(--gr-fg)))",
+		accentText: "var(--gr-slate-text,var(--gr-slate))",
+		softBackground: "var(--gr-button-slate-soft-bg)",
+		softBackgroundHover: "var(--gr-button-slate-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-slate-soft-bg-active)",
+		softForeground: "var(--gr-slate-text,var(--gr-slate))",
+		border: "var(--gr-slate)",
+		borderHover: "var(--gr-slate-hover)",
+		borderActive: "var(--gr-slate-active)"
+	},
+	azure: {
+		solidBackground: "var(--gr-button-azure-bg,var(--gr-azure))",
+		solidBackgroundHover: "var(--gr-button-azure-bg-hover,var(--gr-azure-hover))",
+		solidBackgroundActive: "var(--gr-button-azure-bg-active,var(--gr-azure-active))",
+		solidForeground: "var(--gr-button-azure-fg,var(--gr-azure-fg,var(--gr-fg)))",
+		accentText: "var(--gr-azure-text,var(--gr-azure))",
+		softBackground: "var(--gr-button-azure-soft-bg)",
+		softBackgroundHover: "var(--gr-button-azure-soft-bg-hover)",
+		softBackgroundActive: "var(--gr-button-azure-soft-bg-active)",
+		softForeground: "var(--gr-azure-text,var(--gr-azure))",
+		border: "var(--gr-azure)",
+		borderHover: "var(--gr-azure-hover)",
+		borderActive: "var(--gr-azure-active)"
+	}
+};
+function withVar(token) {
+	return `[${token}]`;
+}
+function variantClass(variant, tone) {
+	const tokens = tones[tone];
+	if (variant === "primary") return [
+		`bg-${withVar(tokens.solidBackground)}`,
+		`text-${withVar(tokens.solidForeground)}`,
+		`border border-${withVar(tokens.solidBackground)}`,
+		`hover:bg-${withVar(tokens.solidBackgroundHover)}`,
+		`hover:border-${withVar(tokens.solidBackgroundHover)}`,
+		`active:bg-${withVar(tokens.solidBackgroundActive)}`,
+		`hover:active:bg-${withVar(tokens.solidBackgroundActive)}`,
+		`active:border-${withVar(tokens.solidBackgroundActive)}`,
+		`hover:active:border-${withVar(tokens.solidBackgroundActive)}`
+	].join(" ");
+	if (variant === "secondary") return [
+		`bg-${withVar(tokens.softBackground)}`,
+		`text-${withVar(tokens.softForeground)}`,
+		`border border-${withVar(tokens.border)}`,
+		`hover:bg-${withVar(tokens.softBackgroundHover)}`,
+		`hover:border-${withVar(tokens.borderHover)}`,
+		`active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`hover:active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`active:border-${withVar(tokens.borderActive)}`,
+		`hover:active:border-${withVar(tokens.borderActive)}`
+	].join(" ");
+	if (variant === "outline") return [
+		"bg-transparent",
+		`text-${withVar(tokens.accentText)}`,
+		`border border-${withVar(tokens.border)}`,
+		`hover:bg-${withVar(tokens.softBackgroundHover)}`,
+		`hover:border-${withVar(tokens.borderHover)}`,
+		`active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`hover:active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`active:border-${withVar(tokens.borderActive)}`,
+		`hover:active:border-${withVar(tokens.borderActive)}`
+	].join(" ");
+	if (variant === "ghost") return [
+		"bg-transparent",
+		`text-${withVar(tokens.accentText)}`,
+		`hover:bg-${withVar(tokens.softBackgroundHover)}`,
+		`active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`hover:active:bg-${withVar(tokens.softBackgroundActive)}`
+	].join(" ");
+	return [
+		"bg-transparent",
+		`text-${withVar(tokens.accentText)}`,
+		"border border-transparent",
+		`hover:bg-${withVar(tokens.softBackgroundHover)}`,
+		`hover:border-${withVar(tokens.borderHover)}`,
+		`active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`hover:active:bg-${withVar(tokens.softBackgroundActive)}`,
+		`active:border-${withVar(tokens.borderActive)}`,
+		`hover:active:border-${withVar(tokens.borderActive)}`
+	].join(" ");
+}
+function grButtonClass(options) {
+	return [
+		options.square ? squareSizes[options.size] : sizes[options.size],
+		options.block ? blockClass : "",
+		options.disabled ? disabledClassByVariant[options.variant] : variantClass(options.variant, options.tone)
+	].filter(Boolean).join(" ");
+}
+//#endregion
+export { grButtonClass as a, tones as c, grButtonBaseClass as i, variantClass as l, blockClass as n, sizes as o, disabledClassByVariant as r, squareSizes as s, base as t };

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

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

package/dist/chunks/grCheckboxStyles-hOAgURZG.js

@@ -0,0 +1,82 @@
+//#region src/components/GrCheckbox/grCheckboxStyles.ts
+var rootBase = "inline-flex items-center select-none";
+var rootGaps = {
+	xs: "gap-1.5",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2"
+};
+var rootDisabledClass = "cursor-not-allowed";
+var rootEnabledClass = "cursor-pointer";
+var rootLabelStartClass = "flex-row-reverse justify-end";
+var controlBase = "rounded-[var(--gr-radius-sm)] border flex items-center justify-center transition-colors duration-[var(--gr-duration-fast)] focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--gr-ring),0_0_0_4px_var(--gr-bg)]";
+var controlSizes = {
+	xs: "h-3 w-3",
+	sm: "h-3.5 w-3.5",
+	md: "h-4 w-4",
+	lg: "h-5 w-5"
+};
+var controlCheckedClass = "border-[var(--gr-primary)] bg-[var(--gr-primary)]";
+var controlUncheckedClass = "border-[var(--gr-brd)] bg-[var(--gr-bg)]";
+var controlInvalidCheckedClass = "border-[var(--gr-danger)] bg-[var(--gr-danger)]";
+var controlInvalidUncheckedClass = "border-[var(--gr-danger)] bg-[var(--gr-bg)]";
+var controlDisabledCheckedClass = "border-[var(--gr-muted-fg)] bg-[var(--gr-muted-fg)]";
+var controlDisabledUncheckedClass = "border-[var(--gr-brd)] bg-[var(--gr-muted)]";
+var iconBase = "gr-checkbox-icon";
+var iconColorClass = "text-[var(--gr-primary-fg)]";
+var iconSizes = {
+	xs: "h-2.5 w-2.5",
+	sm: "h-3 w-3",
+	md: "h-3.5 w-3.5",
+	lg: "h-4 w-4"
+};
+var iconCheckTransitionClass = "transition-transform transition-opacity duration-[var(--gr-duration-fast)]";
+var iconCheckVisibleClass = "opacity-100 scale-100 text-[var(--gr-primary-fg)]";
+var iconCheckHiddenClass = "opacity-0 scale-75 text-transparent";
+var labelBase = "text-[var(--gr-muted-fg)]";
+var labelSizes = {
+	xs: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
+	sm: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
+	md: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
+	lg: "text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]"
+};
+function grCheckboxRootClass(options) {
+	return [
+		rootBase,
+		rootGaps[options.size],
+		options.disabled ? rootDisabledClass : rootEnabledClass,
+		options.labelPosition === "start" ? rootLabelStartClass : ""
+	].filter(Boolean).join(" ");
+}
+function grCheckboxControlClass(options) {
+	return [
+		controlBase,
+		controlSizes[options.size],
+		grCheckboxControlStateClass(options)
+	].join(" ");
+}
+function grCheckboxControlStateClass(options) {
+	if (options.disabled) return options.active ? controlDisabledCheckedClass : controlDisabledUncheckedClass;
+	if (options.invalid) return options.active ? controlInvalidCheckedClass : controlInvalidUncheckedClass;
+	return options.active ? controlCheckedClass : controlUncheckedClass;
+}
+function grCheckboxIndeterminateIconClass(size) {
+	return [
+		iconBase,
+		iconSizes[size],
+		iconColorClass
+	].join(" ");
+}
+function grCheckboxCheckIconClass(options) {
+	return [
+		iconBase,
+		iconSizes[options.size],
+		iconCheckTransitionClass,
+		options.checked ? iconCheckVisibleClass : iconCheckHiddenClass
+	].join(" ");
+}
+function grCheckboxLabelClass(size) {
+	return [labelBase, labelSizes[size]].join(" ");
+}
+//#endregion
+export { rootEnabledClass as C, rootDisabledClass as S, rootLabelStartClass as T, iconColorClass as _, controlInvalidCheckedClass as a, labelSizes as b, controlUncheckedClass as c, grCheckboxIndeterminateIconClass as d, grCheckboxLabelClass as f, iconCheckVisibleClass as g, iconCheckTransitionClass as h, controlDisabledUncheckedClass as i, grCheckboxCheckIconClass as l, iconCheckHiddenClass as m, controlCheckedClass as n, controlInvalidUncheckedClass as o, grCheckboxRootClass as p, controlDisabledCheckedClass as r, controlSizes as s, controlBase as t, grCheckboxControlClass as u, iconSizes as v, rootGaps as w, rootBase as x, labelBase as y };

package/dist/chunks/grCheckboxStyles-hOAgURZG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grCheckboxStyles-hOAgURZG.js","names":[],"sources":["../../src/components/GrCheckbox/grCheckboxStyles.ts"],"sourcesContent":["import type { GrButtonSize } from '../GrButton/grButtonStyles'\n\n/** Размерная шкала общая с формным рядом (`GrRadio`, `GrInput`, `GrButton`). */\nexport type GrCheckboxSize = GrButtonSize\n\n/** Сторона подписи относительно контрола — логическая, не физическая (RTL). */\nexport const GR_CHECKBOX_LABEL_POSITIONS = ['start', 'end'] as const\nexport type GrCheckboxLabelPosition = typeof GR_CHECKBOX_LABEL_POSITIONS[number]\n\nexport const rootBase = 'inline-flex items-center select-none'\n\nexport const rootGaps: Record<GrCheckboxSize, string> = {\n  xs: 'gap-1.5',\n  sm: 'gap-1.5',\n  md: 'gap-2',\n  lg: 'gap-2',\n}\n\nexport const rootDisabledClass = 'cursor-not-allowed'\nexport const rootEnabledClass = 'cursor-pointer'\n\n// Подпись слева от контрола — порядком флекса, а не физическими отступами.\n// `justify-end` обязателен: в `row-reverse` главная ось идёт справа налево, и\n// без него растянутая строка (внутри `grid`/`w-full`) прижалась бы к правому краю.\nexport const rootLabelStartClass = 'flex-row-reverse justify-end'\n\nexport const controlBase = 'rounded-[var(--gr-radius-sm)] border flex items-center justify-center transition-colors duration-[var(--gr-duration-fast)] focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--gr-ring),0_0_0_4px_var(--gr-bg)]'\n\nexport const controlSizes: Record<GrCheckboxSize, string> = {\n  xs: 'h-3 w-3',\n  sm: 'h-3.5 w-3.5',\n  md: 'h-4 w-4',\n  lg: 'h-5 w-5',\n}\n\nexport const controlCheckedClass = 'border-[var(--gr-primary)] bg-[var(--gr-primary)]'\nexport const controlUncheckedClass = 'border-[var(--gr-brd)] bg-[var(--gr-bg)]'\nexport const controlInvalidCheckedClass = 'border-[var(--gr-danger)] bg-[var(--gr-danger)]'\nexport const controlInvalidUncheckedClass = 'border-[var(--gr-danger)] bg-[var(--gr-bg)]'\n\n// Disabled показываем фоном, а не `opacity`: прозрачность разбавляет выверенные\n// на AA токены и роняет контраст галочки на заливке.\nexport const controlDisabledCheckedClass = 'border-[var(--gr-muted-fg)] bg-[var(--gr-muted-fg)]'\nexport const controlDisabledUncheckedClass = 'border-[var(--gr-brd)] bg-[var(--gr-muted)]'\n\n// Цвет задаётся состоянием, а не базой: `text-transparent` и `text-[var(--gr-primary-fg)]`\n// генерируют одно и то же свойство, и победит не тот, кто правее в атрибуте, а тот,\n// кто ниже в сгенерированном CSS. Держим их взаимоисключающими.\nexport const iconBase = 'gr-checkbox-icon'\nexport const iconColorClass = 'text-[var(--gr-primary-fg)]'\n\nexport const iconSizes: Record<GrCheckboxSize, string> = {\n  xs: 'h-2.5 w-2.5',\n  sm: 'h-3 w-3',\n  md: 'h-3.5 w-3.5',\n  lg: 'h-4 w-4',\n}\n\n// Галочка «проявляется» анимацией, поэтому у неё есть состояние, а у тире — нет.\nexport const iconCheckTransitionClass = 'transition-transform transition-opacity duration-[var(--gr-duration-fast)]'\nexport const iconCheckVisibleClass = 'opacity-100 scale-100 text-[var(--gr-primary-fg)]'\nexport const iconCheckHiddenClass = 'opacity-0 scale-75 text-transparent'\n\nexport const labelBase = 'text-[var(--gr-muted-fg)]'\n\nexport const labelSizes: Record<GrCheckboxSize, string> = {\n  xs: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  sm: 'text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n  md: 'text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n  lg: 'text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]',\n}\n\nexport function grCheckboxRootClass(options: {\n  size: GrCheckboxSize\n  disabled: boolean\n  labelPosition: GrCheckboxLabelPosition\n}): string {\n  return [\n    rootBase,\n    rootGaps[options.size],\n    options.disabled ? rootDisabledClass : rootEnabledClass,\n    options.labelPosition === 'start' ? rootLabelStartClass : '',\n  ].filter(Boolean).join(' ')\n}\n\n// Порядок состояний — приоритет: недоступный контрол не показывает ни ошибку,\n// ни акцент, иначе «выключено» читается как «требует внимания».\nexport function grCheckboxControlClass(options: {\n  size: GrCheckboxSize\n  active: boolean\n  disabled?: boolean\n  invalid?: boolean\n}): string {\n  return [\n    controlBase,\n    controlSizes[options.size],\n    grCheckboxControlStateClass(options),\n  ].join(' ')\n}\n\nfunction grCheckboxControlStateClass(options: { active: boolean, disabled?: boolean, invalid?: boolean }): string {\n  if (options.disabled)\n    return options.active ? controlDisabledCheckedClass : controlDisabledUncheckedClass\n\n  if (options.invalid)\n    return options.active ? controlInvalidCheckedClass : controlInvalidUncheckedClass\n\n  return options.active ? controlCheckedClass : controlUncheckedClass\n}\n\nexport function grCheckboxIndeterminateIconClass(size: GrCheckboxSize): string {\n  return [iconBase, iconSizes[size], iconColorClass].join(' ')\n}\n\nexport function grCheckboxCheckIconClass(options: { size: GrCheckboxSize, checked: boolean }): string {\n  return [\n    iconBase,\n    iconSizes[options.size],\n    iconCheckTransitionClass,\n    options.checked ? iconCheckVisibleClass : iconCheckHiddenClass,\n  ].join(' ')\n}\n\nexport function grCheckboxLabelClass(size: GrCheckboxSize): string {\n  return [labelBase, labelSizes[size]].join(' ')\n}\n"],"mappings":";AASA,IAAa,WAAW;AAExB,IAAa,WAA2C;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,oBAAoB;AACjC,IAAa,mBAAmB;AAKhC,IAAa,sBAAsB;AAEnC,IAAa,cAAc;AAE3B,IAAa,eAA+C;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,sBAAsB;AACnC,IAAa,wBAAwB;AACrC,IAAa,6BAA6B;AAC1C,IAAa,+BAA+B;AAI5C,IAAa,8BAA8B;AAC3C,IAAa,gCAAgC;AAK7C,IAAa,WAAW;AACxB,IAAa,iBAAiB;AAE9B,IAAa,YAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAGA,IAAa,2BAA2B;AACxC,IAAa,wBAAwB;AACrC,IAAa,uBAAuB;AAEpC,IAAa,YAAY;AAEzB,IAAa,aAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,oBAAoB,SAIzB;CACT,OAAO;EACL;EACA,SAAS,QAAQ;EACjB,QAAQ,WAAW,oBAAoB;EACvC,QAAQ,kBAAkB,UAAU,sBAAsB;CAC5D,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B;AAIA,SAAgB,uBAAuB,SAK5B;CACT,OAAO;EACL;EACA,aAAa,QAAQ;EACrB,4BAA4B,OAAO;CACrC,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,SAAS,4BAA4B,SAA6E;CAChH,IAAI,QAAQ,UACV,OAAO,QAAQ,SAAS,8BAA8B;CAExD,IAAI,QAAQ,SACV,OAAO,QAAQ,SAAS,6BAA6B;CAEvD,OAAO,QAAQ,SAAS,sBAAsB;AAChD;AAEA,SAAgB,iCAAiC,MAA8B;CAC7E,OAAO;EAAC;EAAU,UAAU;EAAO;CAAc,CAAC,CAAC,KAAK,GAAG;AAC7D;AAEA,SAAgB,yBAAyB,SAA6D;CACpG,OAAO;EACL;EACA,UAAU,QAAQ;EAClB;EACA,QAAQ,UAAU,wBAAwB;CAC5C,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,SAAgB,qBAAqB,MAA8B;CACjE,OAAO,CAAC,WAAW,WAAW,KAAK,CAAC,CAAC,KAAK,GAAG;AAC/C"}

package/dist/chunks/grDropdownStyles-V7TRiCXn.js

@@ -0,0 +1,24 @@
+//#region src/components/GrDropdown/grDropdownStyles.ts
+var originClassByPlacement = {
+	"bottom-start": "origin-top-left",
+	"bottom-end": "origin-top-right",
+	"bottom": "origin-top",
+	"top-start": "origin-bottom-left",
+	"top-end": "origin-bottom-right",
+	"top": "origin-bottom",
+	"left-start": "origin-top-right",
+	"left-end": "origin-bottom-right",
+	"left": "origin-right",
+	"right-start": "origin-top-left",
+	"right-end": "origin-bottom-left",
+	"right": "origin-left"
+};
+function grDropdownOriginClass(placement) {
+	return originClassByPlacement[placement] ?? "origin-top";
+}
+var dropdownContentBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] p-1";
+function grDropdownContentClass(contentClass) {
+	return [dropdownContentBaseClass, contentClass].filter(Boolean).join(" ");
+}
+//#endregion
+export { originClassByPlacement as i, grDropdownContentClass as n, grDropdownOriginClass as r, dropdownContentBaseClass as t };

package/dist/chunks/grDropdownStyles-V7TRiCXn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grDropdownStyles-V7TRiCXn.js","names":[],"sources":["../../src/components/GrDropdown/grDropdownStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\n/** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\nexport type GrDropdownWidth = number | string\n\n// `transform-origin` для scale-transition — координата x/y уже приходит от\n// `useFloating` (см. `floatingStyle`), здесь остаётся только направление\n// \"роста\" панели относительно триггера. Ключи — это `resolvedPlacement` ПОСЛЕ\n// применения `flip`, поэтому origin остаётся верным и когда панели не хватило\n// места снизу и её перевернуло вверх.\nexport const originClassByPlacement: Record<Placement, string> = {\n  'bottom-start': 'origin-top-left',\n  'bottom-end': 'origin-top-right',\n  'bottom': 'origin-top',\n  'top-start': 'origin-bottom-left',\n  'top-end': 'origin-bottom-right',\n  'top': 'origin-bottom',\n  'left-start': 'origin-top-right',\n  'left-end': 'origin-bottom-right',\n  'left': 'origin-right',\n  'right-start': 'origin-top-left',\n  'right-end': 'origin-bottom-left',\n  'right': 'origin-left',\n}\n\nexport function grDropdownOriginClass(placement: Placement): string {\n  return originClassByPlacement[placement] ?? 'origin-top'\n}\n\nexport const dropdownContentBaseClass = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] p-1'\n\nexport function grDropdownContentClass(contentClass?: string): string {\n  return [\n    dropdownContentBaseClass,\n    contentClass,\n  ].filter(Boolean).join(' ')\n}\n"],"mappings":";AAUA,IAAa,yBAAoD;CAC/D,gBAAgB;CAChB,cAAc;CACd,UAAU;CACV,aAAa;CACb,WAAW;CACX,OAAO;CACP,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,aAAa;CACb,SAAS;AACX;AAEA,SAAgB,sBAAsB,WAA8B;CAClE,OAAO,uBAAuB,cAAc;AAC9C;AAEA,IAAa,2BAA2B;AAExC,SAAgB,uBAAuB,cAA+B;CACpE,OAAO,CACL,0BACA,YACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}

package/dist/chunks/grFormFieldStyles-BkeZHIw0.js

@@ -0,0 +1,32 @@
+//#region src/components/GrFormField/grFormFieldStyles.ts
+/** Вертикальный ритм поля: подпись → подсказка → контрол → ошибка. */
+var fieldGaps = {
+	xs: "gap-1",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2"
+};
+var labelTexts = {
+	xs: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
+	sm: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
+	md: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
+	lg: "text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]"
+};
+/** Подсказка набирается на ступень мельче подписи — она вторична. */
+var hintTexts = {
+	xs: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
+	sm: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
+	md: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
+	lg: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]"
+};
+var errorTexts = labelTexts;
+var rootColumnClass = "flex flex-col";
+var rootRowClass = "flex items-start";
+var labelInlineClass = "shrink-0";
+var controlColumnClass = "flex flex-col min-w-0 flex-1";
+var labelBaseClass = "text-[var(--gr-muted-fg)]";
+var hintBaseClass = "text-[var(--gr-muted-fg)]";
+var errorBaseClass = "text-[var(--gr-invalid-text)]";
+var requiredMarkClass = "text-[var(--gr-invalid-text)]";
+//#endregion
+export { hintBaseClass as a, labelInlineClass as c, rootColumnClass as d, rootRowClass as f, fieldGaps as i, labelTexts as l, errorBaseClass as n, hintTexts as o, errorTexts as r, labelBaseClass as s, controlColumnClass as t, requiredMarkClass as u };

package/dist/chunks/grFormFieldStyles-BkeZHIw0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grFormFieldStyles-BkeZHIw0.js","names":[],"sources":["../../src/components/GrFormField/grFormFieldStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrFormFieldSize = GrComponentSize\n\n/** Вертикальный ритм поля: подпись → подсказка → контрол → ошибка. */\nexport const fieldGaps: Record<GrFormFieldSize, string> = {\n  xs: 'gap-1',\n  sm: 'gap-1.5',\n  md: 'gap-2',\n  lg: 'gap-2',\n}\n\nexport const labelTexts: Record<GrFormFieldSize, string> = {\n  xs: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  sm: 'text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n  md: 'text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n  lg: 'text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]',\n}\n\n/** Подсказка набирается на ступень мельче подписи — она вторична. */\nexport const hintTexts: Record<GrFormFieldSize, string> = {\n  xs: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  sm: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  md: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  lg: 'text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n}\n\nexport const errorTexts: Record<GrFormFieldSize, string> = labelTexts\n\n/** Сторона подписи относительно контрола — логическая, не физическая (RTL). */\nexport const GR_FORM_FIELD_LABEL_POSITIONS = ['top', 'start'] as const\nexport type GrFormFieldLabelPosition = typeof GR_FORM_FIELD_LABEL_POSITIONS[number]\n\nexport const rootColumnClass = 'flex flex-col'\nexport const rootRowClass = 'flex items-start'\nexport const labelInlineClass = 'shrink-0'\nexport const controlColumnClass = 'flex flex-col min-w-0 flex-1'\n\nexport const labelBaseClass = 'text-[var(--gr-muted-fg)]'\nexport const hintBaseClass = 'text-[var(--gr-muted-fg)]'\nexport const errorBaseClass = 'text-[var(--gr-invalid-text)]'\nexport const requiredMarkClass = 'text-[var(--gr-invalid-text)]'\n"],"mappings":";;AAKA,IAAa,YAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,YAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAA8C;AAM3D,IAAa,kBAAkB;AAC/B,IAAa,eAAe;AAC5B,IAAa,mBAAmB;AAChC,IAAa,qBAAqB;AAElC,IAAa,iBAAiB;AAC9B,IAAa,gBAAgB;AAC7B,IAAa,iBAAiB;AAC9B,IAAa,oBAAoB"}

package/dist/chunks/grIconStyles-BwJrml2L.js

@@ -0,0 +1,44 @@
+import { t as splitClassTokens } from "./classTokens-BzazaERD.js";
+//#region src/components/GrIcon/grIconStyles.ts
+/**
+* Шкала размеров — токенами, а не числами: иконка обязана масштабироваться
+* вместе с темой, а не вместе с пересборкой пакета. Произвольный размер
+* задаётся числом прямо на компоненте, это escape-hatch мимо шкалы.
+*/
+var iconSizeVarBySize = {
+	xs: "var(--gr-icon-size-xs)",
+	sm: "var(--gr-icon-size-sm)",
+	md: "var(--gr-icon-size-md)",
+	lg: "var(--gr-icon-size-lg)"
+};
+/**
+* Тон → токен **текста**, а не насыщенный тон: правило пакета запрещает
+* насыщенный цвет как цвет текста (контраст на `-light`-подложках падает до
+* 2:1). Отображение повторяет `GrAlert/grAlertStyles.ts`: у `primary` и
+* `neutral` пары `-text` нет, поэтому берутся ближайшие семантические роли.
+*/
+var iconToneClass = {
+	primary: "text-[var(--gr-primary)]",
+	neutral: "text-[var(--gr-muted-fg)]",
+	success: "text-[var(--gr-success-text)]",
+	warning: "text-[var(--gr-warning-text)]",
+	danger: "text-[var(--gr-danger-text)]",
+	info: "text-[var(--gr-info-text)]",
+	slate: "text-[var(--gr-slate-text)]",
+	azure: "text-[var(--gr-azure-text)]"
+};
+/** `gr-icon` — не утилита, а зацепка для глобального стиля компонента. */
+var iconHookClass = "gr-icon";
+var iconUtilityClass = "inline-flex items-center justify-center align-middle";
+var iconBaseClass = `${iconHookClass} ${iconUtilityClass}`;
+var iconSpinClass = "animate-spin";
+function grIconToneClass(tone) {
+	return tone === "current" ? "" : iconToneClass[tone];
+}
+var grIconClassTokens = [
+	...splitClassTokens(iconUtilityClass),
+	...splitClassTokens(iconSpinClass),
+	...Object.values(iconToneClass).flatMap(splitClassTokens)
+];
+//#endregion
+export { iconSpinClass as a, iconSizeVarBySize as i, grIconToneClass as n, iconBaseClass as r, grIconClassTokens as t };

package/dist/chunks/grIconStyles-BwJrml2L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grIconStyles-BwJrml2L.js","names":[],"sources":["../../src/components/GrIcon/grIconStyles.ts"],"sourcesContent":["import { splitClassTokens } from '../shared/classTokens'\nimport type { GrComponentSize } from '../shared/sizes'\nimport type { GrTone } from '../shared/tones'\n\nexport type GrIconSize = GrComponentSize\n\n/** Цвет иконки: тон палитры либо наследование от родителя. */\nexport type GrIconTone = GrTone | 'current'\n\n/**\n * Шкала размеров — токенами, а не числами: иконка обязана масштабироваться\n * вместе с темой, а не вместе с пересборкой пакета. Произвольный размер\n * задаётся числом прямо на компоненте, это escape-hatch мимо шкалы.\n */\nexport const iconSizeVarBySize: Record<GrIconSize, string> = {\n  xs: 'var(--gr-icon-size-xs)',\n  sm: 'var(--gr-icon-size-sm)',\n  md: 'var(--gr-icon-size-md)',\n  lg: 'var(--gr-icon-size-lg)',\n}\n\n/**\n * Тон → токен **текста**, а не насыщенный тон: правило пакета запрещает\n * насыщенный цвет как цвет текста (контраст на `-light`-подложках падает до\n * 2:1). Отображение повторяет `GrAlert/grAlertStyles.ts`: у `primary` и\n * `neutral` пары `-text` нет, поэтому берутся ближайшие семантические роли.\n */\nexport const iconToneClass: Record<GrTone, string> = {\n  primary: 'text-[var(--gr-primary)]',\n  neutral: 'text-[var(--gr-muted-fg)]',\n  success: 'text-[var(--gr-success-text)]',\n  warning: 'text-[var(--gr-warning-text)]',\n  danger: 'text-[var(--gr-danger-text)]',\n  info: 'text-[var(--gr-info-text)]',\n  slate: 'text-[var(--gr-slate-text)]',\n  azure: 'text-[var(--gr-azure-text)]',\n}\n\n/** `gr-icon` — не утилита, а зацепка для глобального стиля компонента. */\nexport const iconHookClass = 'gr-icon'\nexport const iconUtilityClass = 'inline-flex items-center justify-center align-middle'\nexport const iconBaseClass = `${iconHookClass} ${iconUtilityClass}`\nexport const iconSpinClass = 'animate-spin'\n\nexport function grIconToneClass(tone: GrIconTone): string {\n  return tone === 'current' ? '' : iconToneClass[tone]\n}\n\n// В safelist идут только утилиты: `gr-icon` CSS не порождает — он лишь селектор\n// собственного стиля компонента, и гейт `documentedConfig` справедливо считает\n// такую запись мёртвой.\nexport const grIconClassTokens = [\n  ...splitClassTokens(iconUtilityClass),\n  ...splitClassTokens(iconSpinClass),\n  ...Object.values(iconToneClass).flatMap(splitClassTokens),\n]\n"],"mappings":";;;;;;;AAcA,IAAa,oBAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;AAQA,IAAa,gBAAwC;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,IAAa,gBAAgB;AAC7B,IAAa,mBAAmB;AAChC,IAAa,gBAAgB,GAAG,cAAc,GAAG;AACjD,IAAa,gBAAgB;AAE7B,SAAgB,gBAAgB,MAA0B;CACxD,OAAO,SAAS,YAAY,KAAK,cAAc;AACjD;AAKA,IAAa,oBAAoB;CAC/B,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,iBAAiB,aAAa;CACjC,GAAG,OAAO,OAAO,aAAa,CAAC,CAAC,QAAQ,gBAAgB;AAC1D"}

package/dist/chunks/grInputStyles-CJeMhUe5.js

@@ -0,0 +1,66 @@
+//#region src/components/GrInput/grInputStyles.ts
+/**
+* Классы `GrInput`.
+*
+* Единственный источник правды: те же карты были продублированы инлайн в
+* `GrInput.vue`, копии разошлись (`focus-visible:` против `focus-within:`), и
+* safelist декларировал классы, которых в разметке нет.
+*
+* Кольцо фокуса живёт на оболочке через `focus-within`: фокус получает инпут
+* внутри, а рамку рисует оболочка вместе с аддонами.
+*/
+var sizes = {
+	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)]"
+};
+/**
+* Горизонтальный padding из `sizes`, но числом: аддоны задают паддинги инлайн-
+* стилем, а он перекрывает класс — значение нужно обеим формам, и расходиться
+* им нельзя.
+*/
+var paddingX = {
+	xs: "10px",
+	sm: "12px",
+	md: "12px",
+	lg: "16px"
+};
+var textAlign = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+};
+var states = {
+	default: "border-[var(--gr-brd)]",
+	success: "border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]",
+	warning: "border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]",
+	danger: "border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]"
+};
+/**
+* Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+* `state="danger"` — это подсветка по решению разработчика, `invalid` — вердикт
+* валидации, и тема вправе развести их по цвету.
+*/
+var invalidClass = "border-[var(--gr-invalid-brd)] focus-within:ring-[var(--gr-invalid-ring)]";
+var shellBaseClass = "relative w-full overflow-hidden rounded-[var(--gr-radius-control)] border transition-colors duration-[var(--gr-duration-fast)] focus-within:ring-2 focus-within:ring-[var(--gr-ring)]";
+var shellEnabledClass = "bg-[var(--gr-bg)]";
+/**
+* Заблокированное поле гасится фоном, а не `opacity`: прозрачность разбавляет
+* выверенные на AA токены текста и роняет контраст. Фон взаимоисключающий с
+* `shellEnabledClass` — два `bg-*` одной специфичности разрулил бы порядок в
+* сгенерированном CSS, а не порядок в списке классов.
+*/
+var shellDisabledClass = "bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed";
+function grInputShellClass(options) {
+	return [
+		shellBaseClass,
+		options.invalid ? invalidClass : states[options.state],
+		options.disabled ? shellDisabledClass : shellEnabledClass
+	].join(" ");
+}
+function grInputFieldClass(options) {
+	return [sizes[options.size], textAlign[options.align]].join(" ");
+}
+//#endregion
+export { shellBaseClass as a, sizes as c, paddingX as i, states as l, grInputShellClass as n, shellDisabledClass as o, invalidClass as r, shellEnabledClass as s, grInputFieldClass as t, textAlign as u };

package/dist/chunks/grInputStyles-CJeMhUe5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grInputStyles-CJeMhUe5.js","names":[],"sources":["../../src/components/GrInput/grInputStyles.ts"],"sourcesContent":["/**\n * Классы `GrInput`.\n *\n * Единственный источник правды: те же карты были продублированы инлайн в\n * `GrInput.vue`, копии разошлись (`focus-visible:` против `focus-within:`), и\n * safelist декларировал классы, которых в разметке нет.\n *\n * Кольцо фокуса живёт на оболочке через `focus-within`: фокус получает инпут\n * внутри, а рамку рисует оболочка вместе с аддонами.\n */\n\nexport const sizes = {\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} as const\n\n/**\n * Горизонтальный padding из `sizes`, но числом: аддоны задают паддинги инлайн-\n * стилем, а он перекрывает класс — значение нужно обеим формам, и расходиться\n * им нельзя.\n */\nexport const paddingX = {\n  xs: '10px',\n  sm: '12px',\n  md: '12px',\n  lg: '16px',\n} as const\n\nexport const textAlign = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n} as const\n\nexport const states = {\n  default: 'border-[var(--gr-brd)]',\n  success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n  warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n  danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n} as const\n\n/**\n * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:\n * `state=\"danger\"` — это подсветка по решению разработчика, `invalid` — вердикт\n * валидации, и тема вправе развести их по цвету.\n */\nexport const invalidClass = 'border-[var(--gr-invalid-brd)] focus-within:ring-[var(--gr-invalid-ring)]'\n\nexport type GrInputState = keyof typeof states\n\nexport const shellBaseClass = 'relative w-full overflow-hidden rounded-[var(--gr-radius-control)] border transition-colors duration-[var(--gr-duration-fast)] focus-within:ring-2 focus-within:ring-[var(--gr-ring)]'\n\nexport const shellEnabledClass = 'bg-[var(--gr-bg)]'\n\n/**\n * Заблокированное поле гасится фоном, а не `opacity`: прозрачность разбавляет\n * выверенные на AA токены текста и роняет контраст. Фон взаимоисключающий с\n * `shellEnabledClass` — два `bg-*` одной специфичности разрулил бы порядок в\n * сгенерированном CSS, а не порядок в списке классов.\n */\nexport const shellDisabledClass = 'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed'\n\nexport function grInputShellClass(options: {\n  state: GrInputState\n  invalid: boolean\n  disabled: boolean\n}): string {\n  return [\n    shellBaseClass,\n    options.invalid ? invalidClass : states[options.state],\n    options.disabled ? shellDisabledClass : shellEnabledClass,\n  ].join(' ')\n}\n\nexport function grInputFieldClass(options: {\n  size: keyof typeof sizes\n  align: keyof typeof textAlign\n}): string {\n  return [sizes[options.size], textAlign[options.align]].join(' ')\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,QAAQ;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY;CACvB,MAAM;CACN,QAAQ;CACR,OAAO;AACT;AAEA,IAAa,SAAS;CACpB,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;;;;;AAOA,IAAa,eAAe;AAI5B,IAAa,iBAAiB;AAE9B,IAAa,oBAAoB;;;;;;;AAQjC,IAAa,qBAAqB;AAElC,SAAgB,kBAAkB,SAIvB;CACT,OAAO;EACL;EACA,QAAQ,UAAU,eAAe,OAAO,QAAQ;EAChD,QAAQ,WAAW,qBAAqB;CAC1C,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,SAAgB,kBAAkB,SAGvB;CACT,OAAO,CAAC,MAAM,QAAQ,OAAO,UAAU,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG;AACjE"}

package/dist/chunks/grKbdStyles-CeZhGQHr.js

@@ -0,0 +1,43 @@
+//#region src/components/GrKbd/grKbdStyles.ts
+var keyBaseClass = "inline-flex items-center justify-center rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] font-medium leading-none text-[var(--gr-muted-fg)] shadow-[var(--gr-shadow-1)] tabular-nums";
+var keySizes = {
+	xs: "min-w-[1.25rem] h-5 px-1 text-[length:var(--gr-control-text-3xs)]",
+	sm: "min-w-[1.5rem] h-6 px-1.5 text-[length:var(--gr-control-text-xs)]",
+	md: "min-w-[1.75rem] h-7 px-2 text-[length:var(--gr-control-text-md)]",
+	lg: "min-w-[2rem] h-8 px-2.5 text-[length:var(--gr-control-text-lg)]"
+};
+/**
+* Клавиша внутри общей плашки: ни рамки, ни фона, ни собственной ширины —
+* иначе `⌘K` разъехалось бы зазорами внутри одного чипа.
+*/
+var mergedKeyClass = "inline-flex items-center justify-center";
+/** Обёртка `split`: сама рамки не имеет — её рисуют вложенные клавиши. */
+var comboBaseClass = "inline-flex items-center align-middle";
+var comboGaps = {
+	xs: "gap-0.5",
+	sm: "gap-1",
+	md: "gap-1",
+	lg: "gap-1.5"
+};
+/** Зазор внутри общей плашки: между глифами он меньше, чем между плашками. */
+var mergedGaps = {
+	xs: "gap-0",
+	sm: "gap-0.5",
+	md: "gap-0.5",
+	lg: "gap-1"
+};
+var separatorClass = "select-none text-[var(--gr-muted-fg)]";
+/** Слово-разделитель аккорда стоит между плашками и не липнет к ним. */
+var sequenceSeparatorClass = "select-none px-1 text-[var(--gr-muted-fg)]";
+function grKbdKeyClass(size) {
+	return `${keyBaseClass} ${keySizes[size]}`;
+}
+function grKbdComboClass(size, variant) {
+	return variant === "merged" ? `${keyBaseClass} ${keySizes[size]} ${mergedGaps[size]}` : `${comboBaseClass} ${comboGaps[size]}`;
+}
+/** Класс клавиши внутри сочетания: в общей плашке она без собственной рамки. */
+function grKbdInnerKeyClass(size, variant) {
+	return variant === "merged" ? mergedKeyClass : grKbdKeyClass(size);
+}
+//#endregion
+export { grKbdKeyClass as a, mergedGaps as c, sequenceSeparatorClass as d, grKbdInnerKeyClass as i, mergedKeyClass as l, comboGaps as n, keyBaseClass as o, grKbdComboClass as r, keySizes as s, comboBaseClass as t, separatorClass as u };

package/dist/chunks/grKbdStyles-CeZhGQHr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grKbdStyles-CeZhGQHr.js","names":[],"sources":["../../src/components/GrKbd/grKbdStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\n/**\n * Классы `GrKbd`.\n *\n * Шкала полная (`xs…lg`), а не «sm и всё остальное»: тип пропа обещает четыре\n * ступени, и `xs`/`lg` не должны молча рендериться как `md`.\n */\n\nexport const GR_KBD_VARIANTS = ['merged', 'split', 'sequence'] as const\n\n/**\n * `merged` — сочетание одной плашкой (`⌘K`), как его пишут сами системы;\n * `split` — по плашке на клавишу; `sequence` — аккорд «G затем I».\n */\nexport type GrKbdVariant = typeof GR_KBD_VARIANTS[number]\n\nexport const keyBaseClass = 'inline-flex items-center justify-center rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] font-medium leading-none text-[var(--gr-muted-fg)] shadow-[var(--gr-shadow-1)] tabular-nums'\n\nexport const keySizes: Record<GrComponentSize, string> = {\n  xs: 'min-w-[1.25rem] h-5 px-1 text-[length:var(--gr-control-text-3xs)]',\n  sm: 'min-w-[1.5rem] h-6 px-1.5 text-[length:var(--gr-control-text-xs)]',\n  md: 'min-w-[1.75rem] h-7 px-2 text-[length:var(--gr-control-text-md)]',\n  lg: 'min-w-[2rem] h-8 px-2.5 text-[length:var(--gr-control-text-lg)]',\n}\n\n/**\n * Клавиша внутри общей плашки: ни рамки, ни фона, ни собственной ширины —\n * иначе `⌘K` разъехалось бы зазорами внутри одного чипа.\n */\nexport const mergedKeyClass = 'inline-flex items-center justify-center'\n\n/** Обёртка `split`: сама рамки не имеет — её рисуют вложенные клавиши. */\nexport const comboBaseClass = 'inline-flex items-center align-middle'\n\nexport const comboGaps: Record<GrComponentSize, string> = {\n  xs: 'gap-0.5',\n  sm: 'gap-1',\n  md: 'gap-1',\n  lg: 'gap-1.5',\n}\n\n/** Зазор внутри общей плашки: между глифами он меньше, чем между плашками. */\nexport const mergedGaps: Record<GrComponentSize, string> = {\n  xs: 'gap-0',\n  sm: 'gap-0.5',\n  md: 'gap-0.5',\n  lg: 'gap-1',\n}\n\nexport const separatorClass = 'select-none text-[var(--gr-muted-fg)]'\n\n/** Слово-разделитель аккорда стоит между плашками и не липнет к ним. */\nexport const sequenceSeparatorClass = 'select-none px-1 text-[var(--gr-muted-fg)]'\n\nexport function grKbdKeyClass(size: GrComponentSize): string {\n  return `${keyBaseClass} ${keySizes[size]}`\n}\n\nexport function grKbdComboClass(size: GrComponentSize, variant: GrKbdVariant): string {\n  return variant === 'merged'\n    ? `${keyBaseClass} ${keySizes[size]} ${mergedGaps[size]}`\n    : `${comboBaseClass} ${comboGaps[size]}`\n}\n\n/** Класс клавиши внутри сочетания: в общей плашке она без собственной рамки. */\nexport function grKbdInnerKeyClass(size: GrComponentSize, variant: GrKbdVariant): string {\n  return variant === 'merged' ? mergedKeyClass : grKbdKeyClass(size)\n}\n"],"mappings":";AAiBA,IAAa,eAAe;AAE5B,IAAa,WAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;AAMA,IAAa,iBAAiB;;AAG9B,IAAa,iBAAiB;AAE9B,IAAa,YAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,aAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,iBAAiB;;AAG9B,IAAa,yBAAyB;AAEtC,SAAgB,cAAc,MAA+B;CAC3D,OAAO,GAAG,aAAa,GAAG,SAAS;AACrC;AAEA,SAAgB,gBAAgB,MAAuB,SAA+B;CACpF,OAAO,YAAY,WACf,GAAG,aAAa,GAAG,SAAS,MAAM,GAAG,WAAW,UAChD,GAAG,eAAe,GAAG,UAAU;AACrC;;AAGA,SAAgB,mBAAmB,MAAuB,SAA+B;CACvF,OAAO,YAAY,WAAW,iBAAiB,cAAc,IAAI;AACnE"}