@feugene/granularity 0.12.0 → 0.16.0

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 };

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

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

package/dist/chunks/grStyle-CrgLQKKf.js

@@ -0,0 +1,46 @@
+//#region src/components/GrProgressBar/grStyle.ts
+/**
+* Размер линейного индикатора — это толщина трека: ширину задаёт контейнер.
+*/
+var trackSizes = {
+	xs: "h-1",
+	sm: "h-1.5",
+	md: "h-2",
+	lg: "h-3"
+};
+/** Зазор между треком и подписью значения. */
+var rowGaps = {
+	xs: "gap-2",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-3"
+};
+var valueTextSizes = {
+	xs: "text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-tight)]",
+	sm: "text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-tight)]",
+	md: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-tight)]",
+	lg: "text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-tight)]"
+};
+/**
+* Буфер не наследует тон: `-light`-роли есть не у всех восьми тонов, а
+* нейтральный слой между треком и заливкой читается и без цвета тона.
+*/
+var bufferClass = "bg-[var(--gr-progress-buffer-bg,var(--gr-brd))]";
+function withVar(token) {
+	return `[${token}]`;
+}
+var toneVars = {
+	primary: "var(--gr-progress-bg,var(--gr-primary))",
+	neutral: "var(--gr-progress-neutral-bg,var(--gr-secondary))",
+	success: "var(--gr-progress-success-bg,var(--gr-success))",
+	warning: "var(--gr-progress-warning-bg,var(--gr-warning))",
+	danger: "var(--gr-progress-danger-bg,var(--gr-danger))",
+	info: "var(--gr-progress-info-bg,var(--gr-info))",
+	slate: "var(--gr-progress-slate-bg,var(--gr-slate))",
+	azure: "var(--gr-progress-azure-bg,var(--gr-azure))"
+};
+function grProgressBarFillClass(tone) {
+	return `bg-${withVar(toneVars[tone])}`;
+}
+//#endregion
+export { valueTextSizes as a, trackSizes as i, grProgressBarFillClass as n, rowGaps as r, bufferClass as t };

package/dist/chunks/grStyle-CrgLQKKf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grStyle-CrgLQKKf.js","names":[],"sources":["../../src/components/GrProgressBar/grStyle.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\nimport type { GrTone } from '../shared/tones'\n\nexport type GrProgressBarTone = GrTone\nexport type GrProgressBarSize = GrComponentSize\n\n/**\n * Размер линейного индикатора — это толщина трека: ширину задаёт контейнер.\n */\nexport const trackSizes: Record<GrProgressBarSize, string> = {\n  xs: 'h-1',\n  sm: 'h-1.5',\n  md: 'h-2',\n  lg: 'h-3',\n}\n\n/** Зазор между треком и подписью значения. */\nexport const rowGaps: Record<GrProgressBarSize, string> = {\n  xs: 'gap-2',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-3',\n}\n\nexport const valueTextSizes: Record<GrProgressBarSize, string> = {\n  xs: 'text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-tight)]',\n  sm: 'text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-tight)]',\n  md: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-tight)]',\n  lg: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-tight)]',\n}\n\n/**\n * Буфер не наследует тон: `-light`-роли есть не у всех восьми тонов, а\n * нейтральный слой между треком и заливкой читается и без цвета тона.\n */\nexport const bufferClass = 'bg-[var(--gr-progress-buffer-bg,var(--gr-brd))]'\n\nfunction withVar(token: string): string {\n  return `[${token}]`\n}\n\nconst toneVars: Record<GrProgressBarTone, string> = {\n  primary: 'var(--gr-progress-bg,var(--gr-primary))',\n  neutral: 'var(--gr-progress-neutral-bg,var(--gr-secondary))',\n  success: 'var(--gr-progress-success-bg,var(--gr-success))',\n  warning: 'var(--gr-progress-warning-bg,var(--gr-warning))',\n  danger: 'var(--gr-progress-danger-bg,var(--gr-danger))',\n  info: 'var(--gr-progress-info-bg,var(--gr-info))',\n  slate: 'var(--gr-progress-slate-bg,var(--gr-slate))',\n  azure: 'var(--gr-progress-azure-bg,var(--gr-azure))',\n}\n\nexport function grProgressBarFillClass(tone: GrProgressBarTone): string {\n  return `bg-${withVar(toneVars[tone])}`\n}\n"],"mappings":";;;;AASA,IAAa,aAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,UAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,iBAAoD;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;AAMA,IAAa,cAAc;AAE3B,SAAS,QAAQ,OAAuB;CACtC,OAAO,IAAI,MAAM;AACnB;AAEA,IAAM,WAA8C;CAClD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,OAAO;AACT;AAEA,SAAgB,uBAAuB,MAAiC;CACtE,OAAO,MAAM,QAAQ,SAAS,KAAK;AACrC"}

package/dist/chunks/grTableStyles-C-iaqQUN.js

@@ -0,0 +1,26 @@
+//#region src/components/GrTable/grTableStyles.ts
+/**
+* `GrTable` — «тонкий» контейнер: он задаёт только кегль таблицы, паддинги
+* ячеек остаются за потребителем (см. `GrTableProps`). Поэтому карта здесь
+* одна, а метрики ячеек живут в `GrDataTable`, который рисует их сам.
+*/
+/**
+* Лестница 12/13/14/16 совпадает с `GrInput`, `GrTextarea` и `GrSelect` — это
+* типографика контролов пакета, а не самодеятельность таблицы. В шкале
+* `--gr-text-*` ступени 13px нет, и подстановка `--gr-text-sm` схлопнула бы
+* `sm` и `md` в один кегль. Перевод всей лестницы на токены — отдельная
+* системная задача.
+*/
+var tableSizes = {
+	xs: "text-[length:var(--gr-control-text-xs)]",
+	sm: "text-[length:var(--gr-control-text-sm)]",
+	md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]",
+	lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]"
+};
+/** Чередование строк и подсветка под курсором — на `<tbody>`, а не на ячейках. */
+var stripedClass = "[&>tr:nth-child(even)]:bg-[color-mix(in_srgb,var(--gr-muted)_35%,transparent)]";
+var hoverableClass = "[&>tr:hover]:bg-[color-mix(in_srgb,var(--gr-muted)_45%,transparent)]";
+var emptyCellClass = "px-4 py-8 text-center text-[var(--gr-muted-fg)]";
+var loadingRowCellClass = "px-4 py-3";
+//#endregion
+export { tableSizes as a, stripedClass as i, hoverableClass as n, loadingRowCellClass as r, emptyCellClass as t };

package/dist/chunks/grTableStyles-C-iaqQUN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grTableStyles-C-iaqQUN.js","names":[],"sources":["../../src/components/GrTable/grTableStyles.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrTableSize = GrComponentSize\n\n/**\n * `GrTable` — «тонкий» контейнер: он задаёт только кегль таблицы, паддинги\n * ячеек остаются за потребителем (см. `GrTableProps`). Поэтому карта здесь\n * одна, а метрики ячеек живут в `GrDataTable`, который рисует их сам.\n */\n/**\n * Лестница 12/13/14/16 совпадает с `GrInput`, `GrTextarea` и `GrSelect` — это\n * типографика контролов пакета, а не самодеятельность таблицы. В шкале\n * `--gr-text-*` ступени 13px нет, и подстановка `--gr-text-sm` схлопнула бы\n * `sm` и `md` в один кегль. Перевод всей лестницы на токены — отдельная\n * системная задача.\n */\nexport const tableSizes: Record<GrTableSize, 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)] leading-[var(--gr-leading-sm)]',\n  lg: 'text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/** Чередование строк и подсветка под курсором — на `<tbody>`, а не на ячейках. */\nexport const stripedClass = '[&>tr:nth-child(even)]:bg-[color-mix(in_srgb,var(--gr-muted)_35%,transparent)]'\nexport const hoverableClass = '[&>tr:hover]:bg-[color-mix(in_srgb,var(--gr-muted)_45%,transparent)]'\n\nexport const emptyCellClass = 'px-4 py-8 text-center text-[var(--gr-muted-fg)]'\nexport const loadingRowCellClass = 'px-4 py-3'\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,aAA0C;CACrD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,eAAe;AAC5B,IAAa,iBAAiB;AAE9B,IAAa,iBAAiB;AAC9B,IAAa,sBAAsB"}

package/dist/chunks/grTextareaStyles-CWI2SqC8.js

@@ -0,0 +1,50 @@
+//#region src/components/GrTextarea/grTextareaStyles.ts
+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)]";
+/**
+* Кегль совпадает с `GrInput` на каждой ступени: поле ввода и текстовая область
+* в одной форме обязаны читаться одинаково. Вертикальный паддинг меньше, чем у
+* `GrInput`: там он центрирует одну строку в фиксированной высоте, здесь высоту
+* задаёт `rows`.
+*/
+var sizes = {
+	xs: "px-2.5 py-1 text-[length:var(--gr-control-text-xs)]",
+	sm: "px-3 py-1.5 text-[length:var(--gr-control-text-sm)]",
+	md: "px-3 py-2 text-[length:var(--gr-control-text-md)]",
+	lg: "px-4 py-2.5 text-[length:var(--gr-control-text-lg)]"
+};
+var resizeClass = {
+	none: "resize-none",
+	vertical: "resize-y",
+	both: "resize"
+};
+var enabledSurfaceClass = "bg-[var(--gr-bg)]";
+/**
+* Заблокированное поле гасится фоном, а не `opacity`: прозрачность разбавляет
+* выверенные на AA токены текста. Классы взаимоисключающие — два `bg-*` одной
+* специфичности разрулил бы порядок в сгенерированном CSS.
+*/
+var disabledSurfaceClass = "bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed";
+/**
+* Ряд счётчиков под полем: слева строки, справа символы. Обе подписи — один
+* визуальный уровень, поэтому кегль и цвет у них общие (`countClass`).
+*/
+var countRowClass = "mt-1 flex items-baseline justify-between gap-3";
+/** Счётчик строк. Слева, потому что читается раньше: сначала «сколько строк», потом лимит символов. */
+var lineCountClass = "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] [font-variant-numeric:tabular-nums]";
+var countClass = "mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] [font-variant-numeric:tabular-nums]";
+function grTextareaClass(options) {
+	return options.invalid ? invalidBorderClass : borderClassByState[options.state];
+}
+//#endregion
+export { enabledSurfaceClass as a, lineCountClass as c, disabledSurfaceClass as i, resizeClass as l, countClass as n, grTextareaClass as o, countRowClass as r, invalidBorderClass as s, borderClassByState as t, sizes as u };

package/dist/chunks/grTextareaStyles-CWI2SqC8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grTextareaStyles-CWI2SqC8.js","names":[],"sources":["../../src/components/GrTextarea/grTextareaStyles.ts"],"sourcesContent":["import type { GrComponentSize, GrControlState } from '../shared/sizes'\n\nexport type GrTextareaState = GrControlState\nexport type GrTextareaSize = GrComponentSize\n\nexport const borderClassByState: Record<GrTextareaState, 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)]'\n\n/**\n * Кегль совпадает с `GrInput` на каждой ступени: поле ввода и текстовая область\n * в одной форме обязаны читаться одинаково. Вертикальный паддинг меньше, чем у\n * `GrInput`: там он центрирует одну строку в фиксированной высоте, здесь высоту\n * задаёт `rows`.\n */\nexport const sizes: Record<GrTextareaSize, string> = {\n  xs: 'px-2.5 py-1 text-[length:var(--gr-control-text-xs)]',\n  sm: 'px-3 py-1.5 text-[length:var(--gr-control-text-sm)]',\n  md: 'px-3 py-2 text-[length:var(--gr-control-text-md)]',\n  lg: 'px-4 py-2.5 text-[length:var(--gr-control-text-lg)]',\n}\n\nexport type GrTextareaResize = 'none' | 'vertical' | 'both'\n\nexport const resizeClass: Record<GrTextareaResize, string> = {\n  none: 'resize-none',\n  vertical: 'resize-y',\n  both: 'resize',\n}\n\nexport const enabledSurfaceClass = 'bg-[var(--gr-bg)]'\n\n/**\n * Заблокированное поле гасится фоном, а не `opacity`: прозрачность разбавляет\n * выверенные на AA токены текста. Классы взаимоисключающие — два `bg-*` одной\n * специфичности разрулил бы порядок в сгенерированном CSS.\n */\nexport const disabledSurfaceClass = 'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed'\n\n/**\n * Ряд счётчиков под полем: слева строки, справа символы. Обе подписи — один\n * визуальный уровень, поэтому кегль и цвет у них общие (`countClass`).\n */\nexport const countRowClass = 'mt-1 flex items-baseline justify-between gap-3'\n\n/** Счётчик строк. Слева, потому что читается раньше: сначала «сколько строк», потом лимит символов. */\nexport const lineCountClass = 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] [font-variant-numeric:tabular-nums]'\n\nexport const countClass = 'mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] [font-variant-numeric:tabular-nums]'\n\nexport function grTextareaClass(options: { state: GrTextareaState, invalid: boolean }): string {\n  return options.invalid ? invalidBorderClass : borderClassByState[options.state]\n}\n"],"mappings":";AAKA,IAAa,qBAAsD;CACjE,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;;;;;AAOA,IAAa,qBAAqB;;;;;;;AAQlC,IAAa,QAAwC;CACnD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,cAAgD;CAC3D,MAAM;CACN,UAAU;CACV,MAAM;AACR;AAEA,IAAa,sBAAsB;;;;;;AAOnC,IAAa,uBAAuB;;;;;AAMpC,IAAa,gBAAgB;;AAG7B,IAAa,iBAAiB;AAE9B,IAAa,aAAa;AAE1B,SAAgB,gBAAgB,SAA+D;CAC7F,OAAO,QAAQ,UAAU,qBAAqB,mBAAmB,QAAQ;AAC3E"}