@feugene/granularity 0.12.0 → 0.16.0

package/dist/components/GrAlert/chunks/GrAlert-BC1lplbY.js

@@ -0,0 +1,272 @@
+import { n as check_circle_default, r as alert_triangle_default, t as x_circle_default } from "../../../chunks/x-circle-BCBURwyX.js";
+import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentProp } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
+//#region src/components/GrAlert/grAlertStyles.ts
+/**
+* Цветовая модель `GrAlert`.
+*
+* Модуль намеренно чистый: он оперирует **строками CSS-значений**, а не
+* utility-классами UnoCSS. Классы, живущие только строковыми литералами в
+* `.ts`, не сканируются `granularContent` и требуют ручного safelist — здесь
+* этой проблемы нет по построению, а логику цветов можно тестировать без
+* монтирования компонента.
+*/
+/**
+* `soft` — залитая тоном подложка, тональный текст. Основной вариант.
+* `outline` — фон страницы, тон несут рамка и иконка; текст нейтральный.
+*/
+var GR_ALERT_VARIANTS = ["soft", "outline"];
+/**
+* Тон → тройка токенов.
+*
+* `primary` и `neutral` не имеют пары `-light`/`-text` и отображаются на
+* ближайшие семантические роли: акцентную поверхность и нейтральную muted.
+*/
+var TONE_TOKENS = {
+	primary: {
+		surface: "var(--gr-accent)",
+		accent: "var(--gr-primary)",
+		text: "var(--gr-accent-fg)",
+		icon: "info"
+	},
+	neutral: {
+		surface: "var(--gr-muted)",
+		accent: "var(--gr-muted-fg)",
+		text: "var(--gr-fg)",
+		icon: "info"
+	},
+	success: {
+		surface: "var(--gr-success-light)",
+		accent: "var(--gr-success)",
+		text: "var(--gr-success-text)",
+		icon: "success"
+	},
+	warning: {
+		surface: "var(--gr-warning-light)",
+		accent: "var(--gr-warning)",
+		text: "var(--gr-warning-text)",
+		icon: "warning"
+	},
+	danger: {
+		surface: "var(--gr-danger-light)",
+		accent: "var(--gr-danger)",
+		text: "var(--gr-danger-text)",
+		icon: "danger"
+	},
+	info: {
+		surface: "var(--gr-info-light)",
+		accent: "var(--gr-info)",
+		text: "var(--gr-info-text)",
+		icon: "info"
+	},
+	slate: {
+		surface: "var(--gr-slate-light)",
+		accent: "var(--gr-slate)",
+		text: "var(--gr-slate-text)",
+		icon: "info"
+	},
+	azure: {
+		surface: "var(--gr-azure-light)",
+		accent: "var(--gr-azure)",
+		text: "var(--gr-azure-text)",
+		icon: "info"
+	}
+};
+function grAlertIconKey(tone) {
+	return TONE_TOKENS[tone].icon;
+}
+/**
+* Рамка выводится из тона формулой, а не задаётся отдельным токеном на каждый
+* тон: доля тона в смеси с `--gr-brd` — единственное, что отличает рамки между
+* собой. 22% (как было) давало 1.27–1.51:1 к собственной подложке — край
+* практически не читался; 35/45% поднимают его до 1.42–2.07:1.
+*/
+function border(accent, ratio) {
+	return `color-mix(in srgb, ${accent} ${ratio}%, var(--gr-brd))`;
+}
+function resolveGrAlertColors(tone, variant) {
+	const t = TONE_TOKENS[tone];
+	if (variant === "outline") return {
+		bg: "var(--gr-bg)",
+		border: border(t.accent, 45),
+		icon: t.text,
+		title: "var(--gr-fg)",
+		text: "var(--gr-muted-fg)",
+		close: "var(--gr-muted-fg)",
+		closeHover: "var(--gr-fg)",
+		closeHoverBg: "var(--gr-muted)"
+	};
+	return {
+		bg: t.surface,
+		border: border(t.accent, 35),
+		icon: t.text,
+		title: t.text,
+		text: t.text,
+		close: t.text,
+		closeHover: t.text,
+		closeHoverBg: `color-mix(in srgb, ${t.accent} 16%, transparent)`
+	};
+}
+/**
+* Пропы-эскейпы поверх тона. `textColor` красит весь текстовый слой целиком
+* (иконка, заголовок, текст, кнопка закрытия) — иначе пользовательский цвет
+* соседствовал бы с тональным и давал грязь.
+*/
+function applyGrAlertOverrides(colors, overrides) {
+	const custom = (value) => value?.trim() || void 0;
+	const text = custom(overrides.textColor);
+	return {
+		...colors,
+		bg: custom(overrides.backgroundColor) ?? colors.bg,
+		border: custom(overrides.borderColor) ?? colors.border,
+		icon: text ?? colors.icon,
+		title: text ?? colors.title,
+		text: text ?? colors.text,
+		close: text ?? colors.close,
+		closeHover: text ?? colors.closeHover,
+		closeHoverBg: text ? `color-mix(in srgb, ${text} 12%, transparent)` : colors.closeHoverBg
+	};
+}
+/**
+* Публичный контракт кастомизации: переменные `--gr-alert-*` можно
+* переопределить снаружи так же, как их задаёт компонент.
+*/
+function grAlertCssVars(colors) {
+	return {
+		"--gr-alert-bg": colors.bg,
+		"--gr-alert-brd": colors.border,
+		"--gr-alert-icon-color": colors.icon,
+		"--gr-alert-title-color": colors.title,
+		"--gr-alert-text-color": colors.text,
+		"--gr-alert-close-color": colors.close,
+		"--gr-alert-close-hover-color": colors.closeHover,
+		"--gr-alert-close-hover-bg": colors.closeHoverBg
+	};
+}
+//#endregion
+//#region src/components/GrAlert/GrAlert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = { class: "flex items-start gap-3" };
+var _hoisted_3 = {
+	key: 0,
+	"data-gr-alert-icon": "",
+	class: "mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "min-w-0 flex-1" };
+var _hoisted_5 = {
+	key: 0,
+	class: "text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]"
+};
+var _hoisted_6 = {
+	key: 1,
+	"data-gr-alert-actions": "",
+	class: "mt-2 flex flex-wrap gap-2"
+};
+var _hoisted_7 = ["aria-label"];
+//#endregion
+//#region src/components/GrAlert/GrAlert.vue
+var GrAlert_default = /* @__PURE__ */ defineComponent({
+	__name: "GrAlert",
+	props: {
+		tone: { default: void 0 },
+		variant: { default: void 0 },
+		title: { default: void 0 },
+		closable: {
+			type: Boolean,
+			default: void 0
+		},
+		live: { default: void 0 },
+		icon: {
+			type: Boolean,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		backgroundColor: { default: void 0 },
+		textColor: { default: void 0 },
+		borderColor: { default: void 0 }
+	},
+	emits: ["close", "update:visible"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.
+		*
+		* Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**
+		* `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.
+		*
+		* Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы
+		* `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.
+		*/
+		const emit = __emit;
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const tone = useGrComponentProp("GrAlert", "tone", () => props.tone, "info");
+		const variantInput = useGrComponentProp("GrAlert", "variant", () => props.variant, "soft");
+		const closable = useGrComponentProp("GrAlert", "closable", () => props.closable, false);
+		const live = useGrComponentProp("GrAlert", "live", () => props.live, "auto");
+		const variant = variantInput;
+		const ICONS = {
+			info: info_default,
+			success: check_circle_default,
+			warning: alert_triangle_default,
+			danger: x_circle_default
+		};
+		const toneIcon = computed(() => ICONS[grAlertIconKey(tone.value)]);
+		const showIcon = computed(() => props.icon !== false);
+		const isVisible = computed(() => props.visible !== false);
+		function close() {
+			emit("update:visible", false);
+			emit("close");
+		}
+		const colors = computed(() => applyGrAlertOverrides(resolveGrAlertColors(tone.value, variant.value), props));
+		const rootStyle = computed(() => ({
+			...grAlertCssVars(colors.value),
+			background: "var(--gr-alert-bg)",
+			borderColor: "var(--gr-alert-brd)"
+		}));
+		/**
+		* `role="alert"` — assertive-регион: он прерывает чтение. Вешать его на любое
+		* информационное сообщение значит превращать спокойную подсказку в тревогу,
+		* поэтому по умолчанию его получают только `warning` и `danger`.
+		*/
+		const role = computed(() => {
+			const mode = live.value === "auto" ? tone.value === "danger" || tone.value === "warning" ? "assertive" : "polite" : live.value;
+			if (mode === "off") return void 0;
+			return mode === "assertive" ? "alert" : "status";
+		});
+		return (_ctx, _cache) => {
+			return isVisible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				role: role.value,
+				"data-gr-alert": "",
+				class: "rounded-[var(--gr-radius-lg)] border px-4 py-3",
+				style: normalizeStyle(rootStyle.value)
+			}, [createElementVNode("div", _hoisted_2, [
+				showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(toneIcon.value), { class: "h-5 w-5" }))])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [
+					props.title ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(props.title), 1)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]", props.title ? "mt-1" : ""]) }, [renderSlot(_ctx.$slots, "default")], 2),
+					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
+				]),
+				unref(closable) ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]",
+					"aria-label": unref(t)("gr.common.close", "Close"),
+					onClick: close
+				}, [createVNode(unref(x_default), {
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})], 8, _hoisted_7)) : createCommentVNode("", true)
+			])], 12, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { GR_ALERT_VARIANTS as n, GrAlert_default as t };

package/dist/components/GrAlert/chunks/GrAlert-BC1lplbY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrAlert-BC1lplbY.js","names":["$slots"],"sources":["../../../../src/components/GrAlert/grAlertStyles.ts","../../../../src/components/GrAlert/GrAlert.vue","../../../../src/components/GrAlert/GrAlert.vue"],"sourcesContent":["import type { GrTone } from '../shared/tones'\n\n/**\n * Цветовая модель `GrAlert`.\n *\n * Модуль намеренно чистый: он оперирует **строками CSS-значений**, а не\n * utility-классами UnoCSS. Классы, живущие только строковыми литералами в\n * `.ts`, не сканируются `granularContent` и требуют ручного safelist — здесь\n * этой проблемы нет по построению, а логику цветов можно тестировать без\n * монтирования компонента.\n */\n\n/**\n * `soft` — залитая тоном подложка, тональный текст. Основной вариант.\n * `outline` — фон страницы, тон несут рамка и иконка; текст нейтральный.\n */\nexport const GR_ALERT_VARIANTS = ['soft', 'outline'] as const\n\nexport type GrAlertVariant = typeof GR_ALERT_VARIANTS[number]\n\n/** Ключ иконки тона. Сама иконка резолвится в SFC — модуль остаётся чистым. */\nexport type GrAlertIconKey = 'info' | 'success' | 'warning' | 'danger'\n\ntype GrAlertToneTokens = {\n  /** Подложка варианта `soft`. */\n  surface: string\n  /** Насыщенный цвет тона: база для рамки. */\n  accent: string\n  /**\n   * Тональный цвет текста — рассчитан на подложку `surface`.\n   *\n   * Именно он, а не `accent`, красит иконку и текст: на светлой теме\n   * `--gr-success` (#10b981) на `--gr-success-light` (#d1fae5) даёт 2.24:1 —\n   * ниже порога 3:1 даже для нетекстовой графики. `--gr-success-text`\n   * (#065f46) на той же подложке даёт 6.78:1.\n   */\n  text: string\n  icon: GrAlertIconKey\n}\n\n/**\n * Тон → тройка токенов.\n *\n * `primary` и `neutral` не имеют пары `-light`/`-text` и отображаются на\n * ближайшие семантические роли: акцентную поверхность и нейтральную muted.\n */\nconst TONE_TOKENS: Record<GrTone, GrAlertToneTokens> = {\n  primary: { surface: 'var(--gr-accent)', accent: 'var(--gr-primary)', text: 'var(--gr-accent-fg)', icon: 'info' },\n  neutral: { surface: 'var(--gr-muted)', accent: 'var(--gr-muted-fg)', text: 'var(--gr-fg)', icon: 'info' },\n  success: { surface: 'var(--gr-success-light)', accent: 'var(--gr-success)', text: 'var(--gr-success-text)', icon: 'success' },\n  warning: { surface: 'var(--gr-warning-light)', accent: 'var(--gr-warning)', text: 'var(--gr-warning-text)', icon: 'warning' },\n  danger: { surface: 'var(--gr-danger-light)', accent: 'var(--gr-danger)', text: 'var(--gr-danger-text)', icon: 'danger' },\n  info: { surface: 'var(--gr-info-light)', accent: 'var(--gr-info)', text: 'var(--gr-info-text)', icon: 'info' },\n  slate: { surface: 'var(--gr-slate-light)', accent: 'var(--gr-slate)', text: 'var(--gr-slate-text)', icon: 'info' },\n  azure: { surface: 'var(--gr-azure-light)', accent: 'var(--gr-azure)', text: 'var(--gr-azure-text)', icon: 'info' },\n}\n\n/** Разрешённые цвета одного алерта — ровно то, что уходит в CSS-переменные. */\nexport type GrAlertColors = {\n  bg: string\n  border: string\n  icon: string\n  title: string\n  text: string\n  close: string\n  closeHover: string\n  closeHoverBg: string\n}\n\n/** Пользовательские переопределения цвета (пропы-эскейпы). */\nexport type GrAlertColorOverrides = {\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nexport function grAlertIconKey(tone: GrTone): GrAlertIconKey {\n  return TONE_TOKENS[tone].icon\n}\n\n/**\n * Рамка выводится из тона формулой, а не задаётся отдельным токеном на каждый\n * тон: доля тона в смеси с `--gr-brd` — единственное, что отличает рамки между\n * собой. 22% (как было) давало 1.27–1.51:1 к собственной подложке — край\n * практически не читался; 35/45% поднимают его до 1.42–2.07:1.\n */\nfunction border(accent: string, ratio: number): string {\n  return `color-mix(in srgb, ${accent} ${ratio}%, var(--gr-brd))`\n}\n\nexport function resolveGrAlertColors(tone: GrTone, variant: GrAlertVariant): GrAlertColors {\n  const t = TONE_TOKENS[tone]\n\n  if (variant === 'outline') {\n    return {\n      bg: 'var(--gr-bg)',\n      border: border(t.accent, 45),\n      icon: t.text,\n      title: 'var(--gr-fg)',\n      text: 'var(--gr-muted-fg)',\n      close: 'var(--gr-muted-fg)',\n      closeHover: 'var(--gr-fg)',\n      closeHoverBg: 'var(--gr-muted)',\n    }\n  }\n\n  return {\n    bg: t.surface,\n    border: border(t.accent, 35),\n    // Иерархия «заголовок / текст» держится на размере и насыщении шрифта, а не\n    // на цвете: приглушать тональный текст подмешиванием подложки нельзя —\n    // на тёмной теме warning и danger проваливают 4.5:1 уже при 15% подмеса.\n    icon: t.text,\n    title: t.text,\n    text: t.text,\n    close: t.text,\n    closeHover: t.text,\n    closeHoverBg: `color-mix(in srgb, ${t.accent} 16%, transparent)`,\n  }\n}\n\n/**\n * Пропы-эскейпы поверх тона. `textColor` красит весь текстовый слой целиком\n * (иконка, заголовок, текст, кнопка закрытия) — иначе пользовательский цвет\n * соседствовал бы с тональным и давал грязь.\n */\nexport function applyGrAlertOverrides(colors: GrAlertColors, overrides: GrAlertColorOverrides): GrAlertColors {\n  const custom = (value?: string) => value?.trim() || undefined\n  const text = custom(overrides.textColor)\n\n  return {\n    ...colors,\n    bg: custom(overrides.backgroundColor) ?? colors.bg,\n    border: custom(overrides.borderColor) ?? colors.border,\n    icon: text ?? colors.icon,\n    title: text ?? colors.title,\n    text: text ?? colors.text,\n    close: text ?? colors.close,\n    closeHover: text ?? colors.closeHover,\n    closeHoverBg: text ? `color-mix(in srgb, ${text} 12%, transparent)` : colors.closeHoverBg,\n  }\n}\n\n/**\n * Публичный контракт кастомизации: переменные `--gr-alert-*` можно\n * переопределить снаружи так же, как их задаёт компонент.\n */\nexport function grAlertCssVars(colors: GrAlertColors): Record<string, string> {\n  return {\n    '--gr-alert-bg': colors.bg,\n    '--gr-alert-brd': colors.border,\n    '--gr-alert-icon-color': colors.icon,\n    '--gr-alert-title-color': colors.title,\n    '--gr-alert-text-color': colors.text,\n    '--gr-alert-close-color': colors.close,\n    '--gr-alert-close-hover-color': colors.closeHover,\n    '--gr-alert-close-hover-bg': colors.closeHoverBg,\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.\n *\n * Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**\n * `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.\n *\n * Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы\n * `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.\n */\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nimport type { Component } from 'vue'\nimport type { GrTone } from '../shared/tones'\nimport type { GrAlertIconKey, GrAlertVariant } from './grAlertStyles'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  applyGrAlertOverrides,\n  grAlertCssVars,\n  grAlertIconKey,\n  resolveGrAlertColors,\n} from './grAlertStyles'\n\nimport './defaults'\n\nexport type GrAlertTone = GrTone\nexport type { GrAlertVariant } from './grAlertStyles'\n\n/**\n * Режим объявления сообщения скринридеру.\n * `auto` — по тону: `warning`/`danger` перебивают речь (`role=\"alert\"`),\n * остальные ждут паузы (`role=\"status\"`).\n */\nexport type GrAlertLive = 'auto' | 'assertive' | 'polite' | 'off'\n\nexport interface GrAlertProps {\n  tone?: GrAlertTone\n  variant?: GrAlertVariant\n  title?: string\n  closable?: boolean\n  live?: GrAlertLive\n  /**\n   * Показывать ли иконку тона. Своя иконка — слотом `#icon`; проп нужен для\n   * случая «иконка мешает»: узкая колонка, плотный список, сообщение в форме.\n   */\n  icon?: boolean\n  /**\n   * Видимость сообщения — **только контролируемая**: без пропа алерт виден\n   * всегда, и закрытие остаётся заботой потребителя (`@close`). С\n   * `v-model:visible` компонент прячет себя сам.\n   *\n   * Собственного состояния у пропа нет намеренно. Оно превратило бы кнопку\n   * закрытия в необратимое действие у всех, кто уже живёт на `@close` и,\n   * например, спрашивает по нему подтверждение.\n   */\n  visible?: boolean\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nexport interface GrAlertEmits {\n  (e: 'close'): void\n  /** Пользователь закрыл сообщение (`v-model:visible`). */\n  (e: 'update:visible', value: boolean): void\n}\n\nconst emit = defineEmits<GrAlertEmits>()\n\ndefineSlots<{\n  /** Текст сообщения. */\n  default?: () => any\n  /** Иконка вместо глифа по тону. Декоративна: остаётся `aria-hidden`. */\n  icon?: () => any\n  /** Действия по сообщению: «Повторить», «Подробнее». Ложатся под текст. */\n  actions?: () => any\n}>()\n\n// Дефолты tone/variant/closable/live намеренно `undefined`: «настоящий» дефолт\n// переехал в `useGrComponentProp`, иначе `GrConfigProvider` не смог бы отличить\n// заданный пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrAlertProps>(), {\n  tone: undefined,\n  variant: undefined,\n  title: undefined,\n  closable: undefined,\n  live: undefined,\n  icon: undefined,\n  visible: undefined,\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst tone = useGrComponentProp('GrAlert', 'tone', () => props.tone, 'info')\nconst variantInput = useGrComponentProp('GrAlert', 'variant', () => props.variant, 'soft')\nconst closable = useGrComponentProp('GrAlert', 'closable', () => props.closable, false)\nconst live = useGrComponentProp('GrAlert', 'live', () => props.live, 'auto')\n\nconst variant = variantInput\n\nconst ICONS: Record<GrAlertIconKey, Component> = {\n  info: IconInfo,\n  success: IconCheck,\n  warning: IconWarning,\n  danger: IconError,\n}\n\nconst toneIcon = computed<Component>(() => ICONS[grAlertIconKey(tone.value)])\n\nconst showIcon = computed(() => props.icon !== false)\nconst isVisible = computed(() => props.visible !== false)\n\nfunction close(): void {\n  emit('update:visible', false)\n  emit('close')\n}\n\nconst colors = computed(() => applyGrAlertOverrides(\n  resolveGrAlertColors(tone.value, variant.value),\n  props,\n))\n\nconst rootStyle = computed(() => ({\n  ...grAlertCssVars(colors.value),\n  background: 'var(--gr-alert-bg)',\n  borderColor: 'var(--gr-alert-brd)',\n}))\n\n/**\n * `role=\"alert\"` — assertive-регион: он прерывает чтение. Вешать его на любое\n * информационное сообщение значит превращать спокойную подсказку в тревогу,\n * поэтому по умолчанию его получают только `warning` и `danger`.\n */\nconst role = computed(() => {\n  const mode = live.value === 'auto'\n    ? (tone.value === 'danger' || tone.value === 'warning' ? 'assertive' : 'polite')\n    : live.value\n\n  if (mode === 'off') return undefined\n  return mode === 'assertive' ? 'alert' : 'status'\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isVisible\"\n    :role=\"role\"\n    data-gr-alert\n    class=\"rounded-[var(--gr-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <span\n        v-if=\"showIcon\"\n        data-gr-alert-icon\n        class=\"mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"icon\">\n          <component :is=\"toneIcon\" class=\"h-5 w-5\" />\n        </slot>\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <div\n          v-if=\"props.title\"\n          class=\"text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]\"\n        >\n          {{ props.title }}\n        </div>\n        <div\n          class=\"text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]\"\n          :class=\"props.title ? 'mt-1' : ''\"\n        >\n          <slot />\n        </div>\n\n        <!-- Действия идут под текстом, а не рядом с ним: на узкой колонке\n             кнопки в одной строке с сообщением отжимают его до одного слова. -->\n        <div\n          v-if=\"$slots.actions\"\n          data-gr-alert-actions\n          class=\"mt-2 flex flex-wrap gap-2\"\n        >\n          <slot name=\"actions\" />\n        </div>\n      </div>\n\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]\"\n        :aria-label=\"t('gr.common.close', 'Close')\"\n        @click=\"close\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.\n *\n * Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**\n * `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.\n *\n * Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы\n * `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.\n */\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nimport type { Component } from 'vue'\nimport type { GrTone } from '../shared/tones'\nimport type { GrAlertIconKey, GrAlertVariant } from './grAlertStyles'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  applyGrAlertOverrides,\n  grAlertCssVars,\n  grAlertIconKey,\n  resolveGrAlertColors,\n} from './grAlertStyles'\n\nimport './defaults'\n\nexport type GrAlertTone = GrTone\nexport type { GrAlertVariant } from './grAlertStyles'\n\n/**\n * Режим объявления сообщения скринридеру.\n * `auto` — по тону: `warning`/`danger` перебивают речь (`role=\"alert\"`),\n * остальные ждут паузы (`role=\"status\"`).\n */\nexport type GrAlertLive = 'auto' | 'assertive' | 'polite' | 'off'\n\nexport interface GrAlertProps {\n  tone?: GrAlertTone\n  variant?: GrAlertVariant\n  title?: string\n  closable?: boolean\n  live?: GrAlertLive\n  /**\n   * Показывать ли иконку тона. Своя иконка — слотом `#icon`; проп нужен для\n   * случая «иконка мешает»: узкая колонка, плотный список, сообщение в форме.\n   */\n  icon?: boolean\n  /**\n   * Видимость сообщения — **только контролируемая**: без пропа алерт виден\n   * всегда, и закрытие остаётся заботой потребителя (`@close`). С\n   * `v-model:visible` компонент прячет себя сам.\n   *\n   * Собственного состояния у пропа нет намеренно. Оно превратило бы кнопку\n   * закрытия в необратимое действие у всех, кто уже живёт на `@close` и,\n   * например, спрашивает по нему подтверждение.\n   */\n  visible?: boolean\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nexport interface GrAlertEmits {\n  (e: 'close'): void\n  /** Пользователь закрыл сообщение (`v-model:visible`). */\n  (e: 'update:visible', value: boolean): void\n}\n\nconst emit = defineEmits<GrAlertEmits>()\n\ndefineSlots<{\n  /** Текст сообщения. */\n  default?: () => any\n  /** Иконка вместо глифа по тону. Декоративна: остаётся `aria-hidden`. */\n  icon?: () => any\n  /** Действия по сообщению: «Повторить», «Подробнее». Ложатся под текст. */\n  actions?: () => any\n}>()\n\n// Дефолты tone/variant/closable/live намеренно `undefined`: «настоящий» дефолт\n// переехал в `useGrComponentProp`, иначе `GrConfigProvider` не смог бы отличить\n// заданный пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrAlertProps>(), {\n  tone: undefined,\n  variant: undefined,\n  title: undefined,\n  closable: undefined,\n  live: undefined,\n  icon: undefined,\n  visible: undefined,\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst tone = useGrComponentProp('GrAlert', 'tone', () => props.tone, 'info')\nconst variantInput = useGrComponentProp('GrAlert', 'variant', () => props.variant, 'soft')\nconst closable = useGrComponentProp('GrAlert', 'closable', () => props.closable, false)\nconst live = useGrComponentProp('GrAlert', 'live', () => props.live, 'auto')\n\nconst variant = variantInput\n\nconst ICONS: Record<GrAlertIconKey, Component> = {\n  info: IconInfo,\n  success: IconCheck,\n  warning: IconWarning,\n  danger: IconError,\n}\n\nconst toneIcon = computed<Component>(() => ICONS[grAlertIconKey(tone.value)])\n\nconst showIcon = computed(() => props.icon !== false)\nconst isVisible = computed(() => props.visible !== false)\n\nfunction close(): void {\n  emit('update:visible', false)\n  emit('close')\n}\n\nconst colors = computed(() => applyGrAlertOverrides(\n  resolveGrAlertColors(tone.value, variant.value),\n  props,\n))\n\nconst rootStyle = computed(() => ({\n  ...grAlertCssVars(colors.value),\n  background: 'var(--gr-alert-bg)',\n  borderColor: 'var(--gr-alert-brd)',\n}))\n\n/**\n * `role=\"alert\"` — assertive-регион: он прерывает чтение. Вешать его на любое\n * информационное сообщение значит превращать спокойную подсказку в тревогу,\n * поэтому по умолчанию его получают только `warning` и `danger`.\n */\nconst role = computed(() => {\n  const mode = live.value === 'auto'\n    ? (tone.value === 'danger' || tone.value === 'warning' ? 'assertive' : 'polite')\n    : live.value\n\n  if (mode === 'off') return undefined\n  return mode === 'assertive' ? 'alert' : 'status'\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isVisible\"\n    :role=\"role\"\n    data-gr-alert\n    class=\"rounded-[var(--gr-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <span\n        v-if=\"showIcon\"\n        data-gr-alert-icon\n        class=\"mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"icon\">\n          <component :is=\"toneIcon\" class=\"h-5 w-5\" />\n        </slot>\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <div\n          v-if=\"props.title\"\n          class=\"text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]\"\n        >\n          {{ props.title }}\n        </div>\n        <div\n          class=\"text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]\"\n          :class=\"props.title ? 'mt-1' : ''\"\n        >\n          <slot />\n        </div>\n\n        <!-- Действия идут под текстом, а не рядом с ним: на узкой колонке\n             кнопки в одной строке с сообщением отжимают его до одного слова. -->\n        <div\n          v-if=\"$slots.actions\"\n          data-gr-alert-actions\n          class=\"mt-2 flex flex-wrap gap-2\"\n        >\n          <slot name=\"actions\" />\n        </div>\n      </div>\n\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]\"\n        :aria-label=\"t('gr.common.close', 'Close')\"\n        @click=\"close\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrAlert/index.js

@@ -1,3 +1,3 @@
-import { t as GrAlert_default } from "./chunks/GrAlert-DPJSU_fG.js";
+import { n as GR_ALERT_VARIANTS, t as GrAlert_default } from "./chunks/GrAlert-BC1lplbY.js";
 import { t as grAlertConfig } from "../../chunks/config-BNu8lFQB.js";
-export { GrAlert_default as GrAlert, GrAlert_default as default, grAlertConfig };
+export { GR_ALERT_VARIANTS, GrAlert_default as GrAlert, GrAlert_default as default, grAlertConfig };