@ryuzaki13/react-foundation-ui 3.0.1 → 3.1.1

package/src/styles/mixins/controls.test.ts

@@ -32,6 +32,31 @@ function compileUiAppearances(): string {
 	).css;
 }
 
+/** Компилирует только tone-adapter, чтобы закрепить его связь с токенами темы. */
+function compileUiTone(): string {
+	return compileString('@use "controls" as *; .tone { @include ui-tone("brand"); }', {
+		loadPaths: [resolve("src/styles/mixins")],
+		style: "expanded"
+	}).css;
+}
+
+describe("ui-tone", () => {
+	it("использует единые формулы локально для поддержки subtree overrides", () => {
+		const css = compileUiTone();
+
+		expect(css).toContain("--ui-tone-text-hover: color-mix(in srgb, var(--brand-text) 88%, var(--content-0))");
+		expect(css).toContain("--ui-tone-text-active: color-mix(in srgb, var(--brand-text) 76%, var(--content-0))");
+		expect(css).toContain("--ui-tone-fill-hover: color-mix(in srgb, var(--brand-fill) 88%, var(--content-0))");
+		expect(css).toContain("--ui-tone-fill-active: color-mix(in srgb, var(--brand-fill) 76%, var(--content-0))");
+		expect(css).toContain("--ui-tone-soft: color-mix(in srgb, var(--brand-fill) 12%, var(--surface-0))");
+		expect(css).toContain("--ui-tone-border-hover: color-mix(in srgb, var(--brand-border) 88%, var(--content-0))");
+		expect(css).toContain("--ui-tone-border-active: color-mix(in srgb, var(--brand-border) 76%, var(--content-0))");
+		expect(css).toContain("--ui-tone-border-focus: var(--focus-ring)");
+		expect(css).toContain("--ui-tone-ghost-hover: color-mix(in srgb, var(--brand-fill) 10%, var(--surface-0))");
+		expect(css).toContain("--ui-tone-ghost-active: color-mix(in srgb, var(--brand-fill) 20%, var(--surface-0))");
+	});
+});
+
 describe("ui-control-base", () => {
 	it("ограничивает hover устройствами с поддержкой наведения", () => {
 		const css = compileUiControlBase();

package/src/styles/themes/_interactive-surface.scss

@@ -3,13 +3,13 @@
 	--s: transparent;
 	--b: transparent;
 
-	--ch: var(--accent-on-fill);
-	--sh: var(--accent-fill);
-	--bh: var(--accent-border);
+	--ch: var(--accent-text-hover);
+	--sh: var(--accent-fill-hover);
+	--bh: var(--accent-border-hover);
 
-	--ca: var(--accent-on-fill);
-	--sa: var(--accent-fill);
-	--ba: var(--accent-border);
+	--ca: var(--accent-text-active);
+	--sa: var(--accent-fill-active);
+	--ba: var(--accent-border-active);
 
 	--cs: var(--accent-on-fill);
 	--ss: var(--accent-fill);

package/src/styles/themes/_theme.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
+@use "sass:string";
 
 @use "../config" as stylesConfig;
+@use "../tone-derived" as toneDerived;
 
 @function _theme-base($mode) {
 	@if $mode == light {
@@ -14,35 +16,65 @@
 	@error "Цветовая схема темы должна иметь значение light или dark, получено: #{$mode}.";
 }
 
-/// Выводит четыре публичные роли цветовой схемы.
-/// Состояния hover/active и мягкая заливка вычисляются внутри UI-компонентов,
-/// поэтому host настраивает только устойчивый минимальный контракт.
-@mixin _status-palette($name, $status) {
-	--#{$name}-text: var(--hc-#{$name}-text, #{map.get($status, text)});
-	--#{$name}-border: var(--hc-#{$name}-border, #{map.get($status, border)});
-	--#{$name}-fill: var(--hc-#{$name}-fill, #{map.get($status, fill)});
-	--#{$name}-on-fill: var(--hc-#{$name}-on-fill, #{map.get($status, on-fill)});
+/// Формирует четыре настраиваемые роли цветовой схемы.
+@function _status-palette-tokens($name, $status) {
+	@return (
+		"--#{$name}-text": map.get($status, text),
+		"--#{$name}-border": map.get($status, border),
+		"--#{$name}-fill": map.get($status, fill),
+		"--#{$name}-on-fill": map.get($status, on-fill)
+	);
 }
 
-@mixin _theme-palette($theme) {
+/// Формирует базовые роли и общие границы темы.
+@function _theme-palette-tokens($theme) {
+	$tokens: ();
+
 	@each $name, $status in map.get($theme, status) {
-		@include _status-palette($name, $status);
+		$tokens: map.merge($tokens, _status-palette-tokens($name, $status));
 	}
 
 	// Базовые границы остаются общими layout-токенами, но получают цвет из neutral-схемы.
-	--border-0: var(--hc-border-0, var(--neutral-border));
-	--border-1: var(--hc-border-1, color-mix(in srgb, var(--neutral-border) 82%, var(--content-0)));
-	--border-2: var(--hc-border-2, color-mix(in srgb, var(--neutral-border) 64%, var(--content-0)));
-	--border-focus: var(--hc-border-focus, var(--focus-ring));
+	@return map.merge(
+		$tokens,
+		(
+			"--border-0": string.unquote("var(--hc-border-0, var(--neutral-border))"),
+			"--border-1": string.unquote("var(--hc-border-1, color-mix(in srgb, var(--neutral-border) 82%, var(--content-0)))"),
+			"--border-2": string.unquote("var(--hc-border-2, color-mix(in srgb, var(--neutral-border) 64%, var(--content-0)))"),
+			"--border-focus": string.unquote("var(--hc-border-focus, var(--focus-ring))")
+		)
+	);
+}
+
+/// Формирует переиспользуемые состояния из уже разрешённых базовых ролей.
+/// Host не настраивает эти токены через карту status: их единые формулы автоматически
+/// учитывают обычные, переопределённые и high-contrast значения базовой схемы.
+@function _theme-derived-tokens($theme) {
+	$tokens: ();
+
+	@each $name in map.keys(map.get($theme, status)) {
+		$tokens: map.merge($tokens, toneDerived.derived-tone-tokens($name, $name));
+	}
+
+	@return $tokens;
+}
+
+/// Собирает итоговую карту до вывода CSS. Карта tokens получает наивысший
+/// compile-time приоритет и заменяет совпадающие status, border и derived ключи.
+@function _theme-declarations($theme) {
+	$declarations: map.merge(_theme-palette-tokens($theme), _theme-derived-tokens($theme));
+
+	@return map.merge($declarations, stylesConfig.theme-tokens($theme));
 }
 
 /// Формирует полную тему из baseline выбранной схемы и точечных переопределений.
 /// Карта `status` содержит `accent`, `brand`, `neutral`, `error`, `warning`,
-/// `success` и `info`; у каждой схемы ровно четыре роли: `text`, `border`,
-/// `fill` и `on-fill`. Карта `tokens` выводится последней как escape hatch.
+/// `success` и `info`; у каждой схемы ровно четыре настраиваемые роли: `text`,
+/// `border`, `fill` и `on-fill`. Производные состояния выводятся из базовых
+/// переменных. Карта `tokens` имеет наивысший compile-time приоритет, после
+/// чего каждое итоговое CSS-свойство выводится ровно один раз.
 @mixin theme($mode, $overrides: ()) {
 	$resolved-theme: map.deep-merge(_theme-base($mode), $overrides);
 
-	@include _theme-palette($resolved-theme);
-	@include stylesConfig.emit-declarations(stylesConfig.theme-tokens($resolved-theme));
+	@include stylesConfig.emit-declarations(_theme-declarations($resolved-theme));
 }

package/src/styles/themes/theme.test.ts

@@ -1,7 +1,8 @@
-import { compileString } from "sass-embedded";
+import { compile, compileString } from "sass-embedded";
 import { describe, expect, it } from "vitest";
 
 import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
 
 /** Компилирует публичный themes entrypoint с точной hex-палитрой host-приложения. */
 function compileExactTheme(): string {
@@ -12,7 +13,9 @@ function compileExactTheme(): string {
 	@include foundationThemes.theme(light, (
 		tokens: (
 			"--surface-0": #fefefe,
-			"--error-text": #990011
+			"--error-text": #990011,
+			"--border-0": #abcdef,
+			"--error-soft": var(--surface-2)
 		),
 		status: (
 			accent: (
@@ -37,8 +40,22 @@ function compileExactTheme(): string {
 	).css;
 }
 
+/** Компилирует общий CSS Module с тем же `@/` alias, который использует Vite-сборка пакета. */
+function compileUiModule(): string {
+	return compile(resolve("src/ui.module.scss"), {
+		importers: [
+			{
+				findFileUrl(url) {
+					return url.startsWith("@/") ? pathToFileURL(resolve("src", url.slice(2))) : null;
+				}
+			}
+		],
+		style: "expanded"
+	}).css;
+}
+
 describe("theme", () => {
-	it("наследует baseline и принимает четыре роли каждой hex-схемы", () => {
+	it("наследует baseline и принимает четыре настраиваемые роли каждой hex-схемы", () => {
 		const css = compileExactTheme();
 		const tones = ["accent", "brand", "neutral", "error", "warning", "success", "info"] as const;
 		const roles = ["text", "border", "fill", "on-fill"] as const;
@@ -55,7 +72,7 @@ describe("theme", () => {
 		expect(css).toContain("--accent-border: var(--hc-accent-border, #345678)");
 		expect(css).toContain("--accent-fill: var(--hc-accent-fill, #ddeeff)");
 		expect(css).toContain("--accent-on-fill: var(--hc-accent-on-fill, #102030)");
-		expect(css).toContain("--error-text: var(--hc-error-text, #aa0011)");
+		expect(css).toContain("--error-text: var(--hc-error-text, #990011)");
 		expect(css).toContain("--error-border: var(--hc-error-border, #bb1122)");
 		expect(css).toContain("--error-fill: var(--hc-error-fill, #cc2233)");
 		expect(css).toContain("--error-on-fill: var(--hc-error-on-fill, #ffffff)");
@@ -63,6 +80,31 @@ describe("theme", () => {
 		expect(css).toContain("--shadow-xs: var(--hc-shadow-xs, 0 0 0.25em #00000026)");
 	});
 
+	it("выводит переиспользуемые производные состояния для каждой схемы", () => {
+		const css = compileExactTheme();
+		const tones = ["accent", "brand", "neutral", "error", "warning", "success", "info"] as const;
+		const derivedRoles = ["text-hover", "text-active", "border-hover", "border-active", "fill-hover", "fill-active", "soft"] as const;
+
+		for (const tone of tones) {
+			for (const role of derivedRoles) {
+				expect(css).toContain(`--${tone}-${role}:`);
+			}
+
+			expect(css).toContain(`--${tone}-text-hover: color-mix(in srgb, var(--${tone}-text) 88%, var(--content-0))`);
+			expect(css).toContain(`--${tone}-text-active: color-mix(in srgb, var(--${tone}-text) 76%, var(--content-0))`);
+			expect(css).toContain(`--${tone}-border-hover: color-mix(in srgb, var(--${tone}-border) 88%, var(--content-0))`);
+			expect(css).toContain(`--${tone}-border-active: color-mix(in srgb, var(--${tone}-border) 76%, var(--content-0))`);
+			expect(css).toContain(`--${tone}-fill-hover: color-mix(in srgb, var(--${tone}-fill) 88%, var(--content-0))`);
+			expect(css).toContain(`--${tone}-fill-active: color-mix(in srgb, var(--${tone}-fill) 76%, var(--content-0))`);
+
+			if (tone === "error") {
+				expect(css).toContain("--error-soft: var(--surface-2)");
+			} else {
+				expect(css).toContain(`--${tone}-soft: color-mix(in srgb, var(--${tone}-fill) 12%, var(--surface-0))`);
+			}
+		}
+	});
+
 	it("оборачивает первичные root-цвета одноимёнными high-contrast токенами", () => {
 		const css = compileString('@use "root-tokens";', {
 			loadPaths: [resolve("src/styles")],
@@ -73,13 +115,19 @@ describe("theme", () => {
 		expect(css).toContain("--black: var(--hc-black, #000000)");
 	});
 
-	it("выводит плоские token overrides после палитры", () => {
+	it("разрешает token overrides на этапе сборки и выводит каждое свойство один раз", () => {
 		const css = compileExactTheme();
-		const paletteTextIndex = css.indexOf("--error-text: var(--hc-error-text, #aa0011)");
-		const exactTokenIndex = css.lastIndexOf("--error-text: var(--hc-error-text, #990011)");
-
-		expect(paletteTextIndex).toBeGreaterThanOrEqual(0);
-		expect(exactTokenIndex).toBeGreaterThan(paletteTextIndex);
+		const declarationNames = Array.from(css.matchAll(/^\s*(--[\w-]+):/gm), ([, name]) => name);
+		const duplicateNames = declarationNames.filter((name, index) => declarationNames.indexOf(name) !== index);
+
+		expect(declarationNames).toHaveLength(94);
+		expect(duplicateNames).toEqual([]);
+		expect(css).toContain("--error-text: var(--hc-error-text, #990011)");
+		expect(css).not.toContain("--error-text: var(--hc-error-text, #aa0011)");
+		expect(css).toContain("--border-0: var(--hc-border-0, #abcdef)");
+		expect(css).not.toContain("--border-0: var(--hc-border-0, var(--neutral-border))");
+		expect(css).toContain("--error-soft: var(--surface-2)");
+		expect(css).not.toContain("--error-soft: color-mix(in srgb, var(--error-fill) 12%, var(--surface-0))");
 		expect(css).toContain("--surface-0: var(--hc-surface-0, #fefefe)");
 	});
 
@@ -113,16 +161,35 @@ describe("theme", () => {
 });
 
 describe("interactive surface", () => {
-	it("использует accent-схему для hover, active и selected", () => {
+	it("использует соответствующие состояния accent-схемы для hover, active и selected", () => {
 		const css = compileString('@use "interactive-surface";', {
 			loadPaths: [resolve("src/styles/themes")],
 			style: "expanded"
 		}).css;
 
-		expect(css).toContain("--ch: var(--accent-on-fill)");
-		expect(css).toContain("--sh: var(--accent-fill)");
-		expect(css).toContain("--bh: var(--accent-border)");
+		expect(css).toContain("--ch: var(--accent-text-hover)");
+		expect(css).toContain("--sh: var(--accent-fill-hover)");
+		expect(css).toContain("--bh: var(--accent-border-hover)");
+		expect(css).toContain("--ca: var(--accent-text-active)");
+		expect(css).toContain("--sa: var(--accent-fill-active)");
+		expect(css).toContain("--ba: var(--accent-border-active)");
+		expect(css).toContain("--cs: var(--accent-on-fill)");
+		expect(css).toContain("--ss: var(--accent-fill)");
+		expect(css).toContain("--bs: var(--accent-border)");
 		expect(css).toMatch(/\.interactiveSurface\[data-selected=true\]\.interactiveSurfaceFrame\s*\{\s*border-color: var\(--bs\);\s*\}/);
 		expect(css).not.toContain("--interactive-");
 	});
+
+	it("сохраняет ту же карту состояний в используемом popup option", () => {
+		const css = compileUiModule();
+
+		expect(css).toMatch(/\.uiPopupOption\.selected\s*\{\s*color: var\(--accent-on-fill\);\s*background-color: var\(--accent-fill\);/);
+		expect(css).toMatch(
+			/\.uiPopupOption\.uiPopupOptionActive,\s*\.uiPopupOption:active\s*\{\s*color: var\(--accent-text-active\);\s*background-color: var\(--accent-fill-active\);/
+		);
+		expect(css).toMatch(
+			/@media \(any-hover: hover\)\s*\{\s*\.uiPopupOption:hover\s*\{\s*color: var\(--accent-text-hover\);\s*background-color: var\(--accent-fill-hover\);/
+		);
+		expect(css).not.toMatch(/@media \(any-hover: none\)\s*\{\s*\.uiPopupOption:active/);
+	});
 });

package/storybook-static/assets/{Badge-CPJUZBAx.js → Badge-DZyhbbM8.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-Dyg5pyjI.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-COtaqhG7.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-BV9Ob_Oc.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-CLqd5Giv.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-BIDgFZzT.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-NTzzKHJp.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
 `,(0,S.jsx)(u,{children:`Badge`}),`
 `,(0,S.jsx)(o,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
 `,(0,S.jsx)(t.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`

package/storybook-static/assets/{Badge.stories-BV9Ob_Oc.js → Badge.stories-NTzzKHJp.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-Dyg5pyjI.js";import{i,n as a,r as o,t as s}from"./BadgeList-CtdWGEn6.js";var c=t({Appearances:()=>h,Basic:()=>p,RemovableList:()=>_,Sizes:()=>g,Tones:()=>m,__namedExportsOrder:()=>v,default:()=>f}),l,u,d,f,p,m,h,g,_,v;function y(){return(y=e((()=>{l=n(),i(),a(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:`UI/Badge`,component:o,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},tone:{description:`Цветовой тон бейджа.`,control:`inline-radio`,options:[`neutral`,`accent`,`brand`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1}}},p={render:function(){let[e]=d();return(0,u.jsx)(o,{...e})}},m={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,u.jsx)(o,{tone:`accent`,appearance:`solid`,children:`Акцент`}),(0,u.jsx)(o,{tone:`brand`,appearance:`solid`,children:`Бренд`}),(0,u.jsx)(o,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,u.jsx)(o,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,u.jsx)(o,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,u.jsx)(o,{tone:`info`,appearance:`solid`,children:`Информация`})]})},h={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,u.jsx)(o,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,u.jsx)(o,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},g={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{size:`xs`,children:`Extra Small`}),(0,u.jsx)(o,{size:`sm`,children:`Small`}),(0,u.jsx)(o,{size:`md`,children:`Medium`}),(0,u.jsx)(o,{size:`lg`,children:`Large`}),(0,u.jsx)(o,{size:`xl`,children:`Extra Large`})]})},_={render:()=>{let[e,t]=(0,l.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,u.jsx)(s,{children:e.map(e=>(0,u.jsx)(o,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-CLqd5Giv.js";import{i,n as a,r as o,t as s}from"./BadgeList-CyZwXD1B.js";var c=t({Appearances:()=>h,Basic:()=>p,RemovableList:()=>_,Sizes:()=>g,Tones:()=>m,__namedExportsOrder:()=>v,default:()=>f}),l,u,d,f,p,m,h,g,_,v;function y(){return(y=e((()=>{l=n(),i(),a(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:`UI/Badge`,component:o,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},tone:{description:`Цветовой тон бейджа.`,control:`inline-radio`,options:[`neutral`,`accent`,`brand`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1}}},p={render:function(){let[e]=d();return(0,u.jsx)(o,{...e})}},m={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,u.jsx)(o,{tone:`accent`,appearance:`solid`,children:`Акцент`}),(0,u.jsx)(o,{tone:`brand`,appearance:`solid`,children:`Бренд`}),(0,u.jsx)(o,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,u.jsx)(o,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,u.jsx)(o,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,u.jsx)(o,{tone:`info`,appearance:`solid`,children:`Информация`})]})},h={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,u.jsx)(o,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,u.jsx)(o,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},g={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{size:`xs`,children:`Extra Small`}),(0,u.jsx)(o,{size:`sm`,children:`Small`}),(0,u.jsx)(o,{size:`md`,children:`Medium`}),(0,u.jsx)(o,{size:`lg`,children:`Large`}),(0,u.jsx)(o,{size:`xl`,children:`Extra Large`})]})},_={render:()=>{let[e,t]=(0,l.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,u.jsx)(s,{children:e.map(e=>(0,u.jsx)(o,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: function Render() {
     const [args] = useArgs<BadgeStoryArgs>();
     return <Badge {...args} />;

package/storybook-static/assets/{BadgeList-CtdWGEn6.js → BadgeList-CyZwXD1B.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-sWfOdOu5.js";import{n as i}from"./iframe-Dyg5pyjI.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{c as s,i as c}from"./array-D-_yMMUK-DnJ_b27D.js";import{n as l,t as u}from"./FloatingPopover-D-hgsDWB.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-e9OQfdw2.js";import{n as h,t as g}from"./FlexContainer-BWyPlTMB.js";function _({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:c,textWrapProps:l}){let d=s(i);if(!d.length||e&&d.length<e)return(0,v.jsx)(`span`,{children:d});let f=c??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...l,...p,style:{...l?.style,...p.style},className:[l?.className,p.className].filter(Boolean).join(` `)};return(0,v.jsx)(u,{state:o,placement:t,openOnHover:!0,content:d,closeDelay:n,maxWidth:r,children:(0,v.jsx)(f,{...m,children:d})})}var v;function y(){return(y=e((()=>{c(),l(),v=i(),_.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-wBEq3sjm.js";import{n as i}from"./iframe-CLqd5Giv.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{c as s,i as c}from"./array-D-_yMMUK-DnJ_b27D.js";import{n as l,t as u}from"./FloatingPopover-0Dprr5jf.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-BY4mQ-J3.js";import{n as h,t as g}from"./FlexContainer-BWyPlTMB.js";function _({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:c,textWrapProps:l}){let d=s(i);if(!d.length||e&&d.length<e)return(0,v.jsx)(`span`,{children:d});let f=c??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...l,...p,style:{...l?.style,...p.style},className:[l?.className,p.className].filter(Boolean).join(` `)};return(0,v.jsx)(u,{state:o,placement:t,openOnHover:!0,content:d,closeDelay:n,maxWidth:r,children:(0,v.jsx)(f,{...m,children:d})})}var v;function y(){return(y=e((()=>{c(),l(),v=i(),_.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
 Если в качестве обёртки передается инлайновый компонент, то он будет
 перезаписан через стили на display: block или inline-block в зависимости
 от установки данного пропса.`},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},textWrap:{required:!1,tsType:{name:`T`},description:``},textWrapProps:{required:!1,tsType:{name:`Omit`,elements:[{name:`ComponentProps`,elements:[{name:`T`}],raw:`ComponentProps<T>`},{name:`literal`,value:`"children"`}],raw:`Omit<ComponentProps<T>, "children">`},description:``}}}})))()}var b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{b=`qBtmnH`,x=`p-HsHY`,S=`u9tQAE`,C=`FRScRz`,w=`W13uQO`,T=`_3IRcM9`,E=`R3ybI7`,D=`DdWAaC`,O=`_5cXBQF`,k={badge:b,passive:x,sizeXs:S,sizeSm:C,sizeMd:w,sizeLg:T,sizeXl:E,content:D,removeButton:O}})))()}function j({children:e,size:t=`sm`,tone:n,appearance:i,className:o,onRemove:s}){let c=n??`neutral`,l=d({tone:n,appearance:i,fallbackTone:c,fallbackAppearance:c===`neutral`?`outline`:`solid`});return(0,M.jsxs)(`div`,{className:a(k.badge,N[t],p(l.tone),m(l.appearance),!s&&k.passive,o),children:[(0,M.jsx)(_,{maxChar:25,placement:`top`,block:!0,textWrapProps:{className:k.content},children:String(e)}),s&&(0,M.jsx)(`button`,{type:`button`,onClick:s,className:k.removeButton,"aria-label":`Удалить бейдж`,"data-ui":`badge-remove-button`,"data-action":`remove-badge`,children:(0,M.jsx)(r,{})})]})}var M,N;function P(){return(P=e((()=>{o(),n(),y(),f(),A(),M=i(),N={xs:k.sizeXs,sm:k.sizeSm,md:k.sizeMd,lg:k.sizeLg,xl:k.sizeXl},j.__docgenInfo={description:`Компактный индикатор для статусов, категорий и коротких служебных меток.`,methods:[],displayName:`Badge`,props:{children:{required:!0,tsType:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``,defaultValue:{value:`"sm"`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"accent" | "neutral" | "brand" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"accent"`},{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"brand"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},onRemove:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}})))()}function F({children:e}){return(0,L.jsx)(g,{inline:!0,wrap:!0,gap:`sm`,align:`baseline`,children:I.Children.map(e,(e,t)=>(0,L.jsx)(I.Fragment,{children:e},t))})}var I,L;function R(){return(R=e((()=>{I=t(),h(),L=i(),F.__docgenInfo={description:"Контейнер для группы `Badge`, который выстраивает элементы в единый список с предсказуемыми отступами. Используется для компактного вывода набора меток или фильтров.",methods:[],displayName:`BadgeList`,props:{children:{required:!0,tsType:{name:`Array`,elements:[{name:`ReactElement`,elements:[{name:`union`,raw:`typeof Badge | null | undefined | false`,elements:[{name:`Badge`},{name:`null`},{name:`undefined`},{name:`literal`,value:`false`}]}],raw:`ReactElement<typeof Badge | null | undefined | false>`}],raw:`ReactElement<typeof Badge | null | undefined | false>[]`},description:``}}}})))()}export{P as i,R as n,j as r,F as t};