@ryuzaki13/react-foundation-ui 2.1.0 → 3.0.0

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

@@ -3,10 +3,7 @@ import { describe, expect, it } from "vitest";
 
 import { resolve } from "node:path";
 
-/**
- * Компилирует публичный themes entrypoint с точной палитрой host-приложения.
- * Тест защищает порядок слоёв: baseline обязан заполнить контракт, а exact values — победить генератор.
- */
+/** Компилирует публичный themes entrypoint с точной hex-палитрой host-приложения. */
 function compileExactTheme(): string {
 	return compileString(
 		`@use "themes" as foundationThemes;
@@ -15,26 +12,20 @@ function compileExactTheme(): string {
 	@include foundationThemes.theme(light, (
 		tokens: (
 			"--surface-0": #fefefe,
-			"--status-error-text": #990011
-		),
-		accent: (
-			content: #123456,
-			surface: #ddeeff,
-			border: #345678
+			"--error-text": #990011
 		),
 		status: (
+			accent: (
+				text: #123456,
+				border: #345678,
+				fill: #ddeeff,
+				on-fill: #102030
+			),
 			error: (
-				text: (
-					base: #aa0011,
-					hover: #bb1122,
-					active: #880000
-				),
-				fill: (
-					base: #cc2233,
-					hover: #dd3344,
-					active: #aa1122,
-					on-fill: #ffffff
-				)
+				text: #aa0011,
+				border: #bb1122,
+				fill: #cc2233,
+				on-fill: #ffffff
 			)
 		)
 	));
@@ -47,42 +38,61 @@ function compileExactTheme(): string {
 }
 
 describe("theme", () => {
-	it("наследует полный baseline и принимает точные accent/status scales", () => {
+	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;
+
+		expect(css).toContain("--surface-1: var(--hc-surface-1, #f8f8f9)");
+
+		for (const tone of tones) {
+			for (const role of roles) {
+				expect(css).toContain(`--${tone}-${role}: var(--hc-${tone}-${role},`);
+			}
+		}
 
-		expect(css).toContain("--surface-1: var(--hc-surface, #f8f8f9)");
-		expect(css).toContain("--content-accent: var(--hc-content-accent, #123456)");
-		expect(css).toContain("--status-error-text-hover: var(--hc-status-error-text, #bb1122)");
-		expect(css).toContain("--status-error-border-hover: var(--hc-status-error-border, #bb1122)");
-		expect(css).toMatch(
-			/--status-error-soft:\s*var\(\s*--hc-status-error-soft,\s*color-mix\(in srgb, var\(--status-error-fill\) 12%, var\(--surface-0\)\)\s*\)/
-		);
+		expect(css).toContain("--accent-text: var(--hc-accent-text, #123456)");
+		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-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)");
+		expect(css).toContain("--overlay-backdrop: var(--hc-overlay-backdrop, #0000001a)");
+		expect(css).toContain("--shadow-xs: var(--hc-shadow-xs, 0 0 0.25em #00000026)");
 	});
 
-	it("выводит плоские token overrides после сгенерированной палитры", () => {
+	it("оборачивает первичные root-цвета одноимёнными high-contrast токенами", () => {
+		const css = compileString('@use "root-tokens";', {
+			loadPaths: [resolve("src/styles")],
+			style: "expanded"
+		}).css;
+
+		expect(css).toContain("--white: var(--hc-white, #ffffff)");
+		expect(css).toContain("--black: var(--hc-black, #000000)");
+	});
+
+	it("выводит плоские token overrides после палитры", () => {
 		const css = compileExactTheme();
-		const generatedTextIndex = css.indexOf("--status-error-text: var(--hc-status-error-text, #aa0011)");
-		const exactTokenIndex = css.lastIndexOf("--status-error-text: #990011");
+		const paletteTextIndex = css.indexOf("--error-text: var(--hc-error-text, #aa0011)");
+		const exactTokenIndex = css.lastIndexOf("--error-text: var(--hc-error-text, #990011)");
 
-		expect(generatedTextIndex).toBeGreaterThanOrEqual(0);
-		expect(exactTokenIndex).toBeGreaterThan(generatedTextIndex);
-		expect(css).toContain("--surface-0: #fefefe");
+		expect(paletteTextIndex).toBeGreaterThanOrEqual(0);
+		expect(exactTokenIndex).toBeGreaterThan(paletteTextIndex);
+		expect(css).toContain("--surface-0: var(--hc-surface-0, #fefefe)");
 	});
 
-	it("связывает brand, neutral и недостающие status tokens с точной палитрой", () => {
+	it("наследует неуказанные роли схемы и не выводит прежние color contracts", () => {
 		const css = compileString(
 			`@use "themes" as foundationThemes;
 
 .custom-theme {
 	@include foundationThemes.theme(dark, (
-		tokens: (
-			"--content-accent": #00ffaa,
-			"--surface-accent": #003322,
-			"--border-accent": #00cc88,
-			"--status-error-text": #ff6677,
-			"--status-error-text-hover": #ff8899,
-			"--status-error-text-active": #dd4455,
-			"--status-error-fill": #991122
+		status: (
+			error: (
+				text: #ff6677
+			)
 		)
 	));
 }`,
@@ -92,19 +102,27 @@ describe("theme", () => {
 			}
 		).css;
 
-		expect(css).toContain("--status-brand-fill: var(--hc-status-brand-fill, var(--content-accent))");
-		expect(css).toContain("--status-neutral-border-focus: var(--hc-status-neutral-border, var(--focus-ring))");
-		expect(css).toContain("--status-error-border-hover: var(--hc-status-error-border, var(--status-error-text-hover))");
+		expect(css).toContain("--error-text: var(--hc-error-text, #ff6677)");
+		expect(css).toContain("--error-border: var(--hc-error-border, #ff7879)");
+		expect(css).toContain("--brand-fill: var(--hc-brand-fill, #97b5ff)");
+		expect(css).toContain("--neutral-border: var(--hc-neutral-border, #4e5661)");
+		expect(css).not.toContain("oklch(");
+		expect(css).not.toContain("--interactive-");
+		expect(css).not.toContain("--status-");
 	});
 });
 
 describe("interactive surface", () => {
-	it("применяет отдельный border token выбранного состояния", () => {
+	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).toMatch(/\.interactiveSurface\[data-selected=true\]\.interactiveSurfaceFrame\s*\{\s*border-color: var\(--bs\);\s*\}/);
+		expect(css).not.toContain("--interactive-");
 	});
 });

package/storybook-static/assets/{Badge-BXbiidny.js → Badge-DLpkFLAr.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-D0R9pFj7.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-Bu5I-6jJ.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-DCOkVsyk.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-0M2vpakb.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-C4R1QC9R.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-DwwZ0O7j.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 подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`
@@ -25,7 +25,7 @@ export function Example() {
 `,(0,S.jsx)(t.h2,{id:`визуальная-схема`,children:`Визуальная схема`}),`
 `,(0,S.jsx)(t.p,{children:`В компоненте есть два уровня настройки:`}),`
 `,(0,S.jsxs)(t.ul,{children:[`
-`,(0,S.jsxs)(t.li,{children:[(0,S.jsx)(t.code,{children:`tone`}),` задает семантику: `,(0,S.jsx)(t.code,{children:`neutral`}),`, `,(0,S.jsx)(t.code,{children:`success`}),`, `,(0,S.jsx)(t.code,{children:`warning`}),`, `,(0,S.jsx)(t.code,{children:`error`}),`, `,(0,S.jsx)(t.code,{children:`info`}),`;`]}),`
+`,(0,S.jsxs)(t.li,{children:[(0,S.jsx)(t.code,{children:`tone`}),` задаёт семантику: `,(0,S.jsx)(t.code,{children:`neutral`}),`, `,(0,S.jsx)(t.code,{children:`accent`}),`, `,(0,S.jsx)(t.code,{children:`brand`}),`, `,(0,S.jsx)(t.code,{children:`success`}),`, `,(0,S.jsx)(t.code,{children:`warning`}),`, `,(0,S.jsx)(t.code,{children:`error`}),`, `,(0,S.jsx)(t.code,{children:`info`}),`;`]}),`
 `,(0,S.jsxs)(t.li,{children:[(0,S.jsx)(t.code,{children:`appearance`}),` задает форму отображения: `,(0,S.jsx)(t.code,{children:`solid`}),`, `,(0,S.jsx)(t.code,{children:`outline`}),`, `,(0,S.jsx)(t.code,{children:`ghost`}),`, `,(0,S.jsx)(t.code,{children:`transparent`}),`.`]}),`
 `]}),`
 `,(0,S.jsx)(t.p,{children:`Если схема не передана полностью, компонент достраивает ее сам:`}),`
@@ -44,6 +44,12 @@ export function StatusBadges() {
 			<Badge tone="neutral" appearance="outline">
 				Черновик
 			</Badge>
+			<Badge tone="accent" appearance="solid">
+				Акцент
+			</Badge>
+			<Badge tone="brand" appearance="solid">
+				Бренд
+			</Badge>
 			<Badge tone="success" appearance="solid">
 				Успешно
 			</Badge>

package/storybook-static/assets/{Badge.stories-DCOkVsyk.js → Badge.stories-DwwZ0O7j.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-D0R9pFj7.js";import{i,n as a,r as o,t as s}from"./BadgeList-DgUScGRc.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`,`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:`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-0M2vpakb.js";import{i,n as a,r as o,t as s}from"./BadgeList-C0bhovUR.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} />;
@@ -8,6 +8,12 @@ import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./r
             <Badge tone="neutral" appearance="outline">
                 Neutral
             </Badge>
+            <Badge tone="accent" appearance="solid">
+                Акцент
+            </Badge>
+            <Badge tone="brand" appearance="solid">
+                Бренд
+            </Badge>
             <Badge tone="success" appearance="solid">
                 Успешно
             </Badge>

package/storybook-static/assets/{BadgeList-DgUScGRc.js → BadgeList-C0bhovUR.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-DU3Tpzms.js";import{n as i}from"./iframe-D0R9pFj7.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{c as s,i as c}from"./array-D-_yMMUK-DYqn1Ozn.js";import{n as l,t as u}from"./FloatingPopover-Dch6_6e0.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-Bz6cvlDQ.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-NXcyLtyX.js";import{n as i}from"./iframe-0M2vpakb.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-B8zZ8eYf.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.
 Если в качестве обёртки передается инлайновый компонент, то он будет
 перезаписан через стили на 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:`"neutral" | "brand" | "error" | "warning" | "success" | "info"`,elements:[{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};
+от установки данного пропса.`},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};

package/storybook-static/assets/{BadgeList-CD5894x5.css → BadgeList-DbjeNuw0.css}

@@ -1 +1 @@
-.qBtmnH{color:var(--ui-color);background-color:var(--ui-background);border:var(--border-width) solid var(--ui-border-color);border-radius:var(--ui-radius,var(--radius-sm));transition-property:border-color,color,background-color,opacity;transition-duration:var(--transition-fast);align-items:center;gap:var(--space-xs);max-width:100%;padding:0 var(--space-xs);font-variation-settings:"wght" 500;vertical-align:middle;font-weight:500;transition-timing-function:ease;display:inline-flex}.p-HsHY{pointer-events:none;-webkit-user-select:none;user-select:none}.u9tQAE{font-size:var(--font-size-xs)}.FRScRz{font-size:var(--font-size-sm)}.W13uQO{font-size:var(--font-size-md)}._3IRcM9{font-size:var(--font-size-lg)}.R3ybI7{font-size:var(--font-size-xl)}.DdWAaC{min-width:0}._5cXBQF{border-radius:var(--radius-xs);width:1.25em;height:1.25em;color:inherit;transition:color var(--transition-fast) ease, background-color var(--transition-fast) ease, scale var(--transition-fast) ease;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._5cXBQF:hover{background-color:var(--status-error-soft);color:var(--status-error-text);scale:1.1}._5cXBQF:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}._5cXBQF svg{display:block}
+.qBtmnH{color:var(--ui-color);background-color:var(--ui-background);border:var(--border-width) solid var(--ui-border-color);border-radius:var(--ui-radius,var(--radius-sm));transition-property:border-color,color,background-color,opacity;transition-duration:var(--transition-fast);align-items:center;gap:var(--space-xs);max-width:100%;padding:0 var(--space-xs);font-variation-settings:"wght" 500;vertical-align:middle;font-weight:500;transition-timing-function:ease;display:inline-flex}.p-HsHY{pointer-events:none;-webkit-user-select:none;user-select:none}.u9tQAE{font-size:var(--font-size-xs)}.FRScRz{font-size:var(--font-size-sm)}.W13uQO{font-size:var(--font-size-md)}._3IRcM9{font-size:var(--font-size-lg)}.R3ybI7{font-size:var(--font-size-xl)}.DdWAaC{min-width:0}._5cXBQF{border-radius:var(--radius-xs);width:1.25em;height:1.25em;color:inherit;transition:color var(--transition-fast) ease, background-color var(--transition-fast) ease, scale var(--transition-fast) ease;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._5cXBQF:hover{background-color:color-mix(in srgb, var(--error-fill) 12%, var(--surface-0));color:var(--error-text);scale:1.1}._5cXBQF:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}._5cXBQF svg{display:block}