import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-CMLjY6eW.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-D3IlvJMm.js";import{t as f}from"./mdx-react-shim-DzMf9EAg.js";import{Appearances as p,Basic as m,RemovableList as h,Sizes as g,Tones as _,n as v,t as y}from"./Badge.stories-DtP9p0kq.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)(o,{of:y,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
`,(0,S.jsx)(l,{children:`Badge`}),`
`,(0,S.jsx)(a,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
`,(0,S.jsx)(t.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`
`,(0,S.jsxs)(t.ul,{children:[`
`,(0,S.jsx)(t.li,{children:`статусы и состояния записи;`}),`
`,(0,S.jsx)(t.li,{children:`выбранные фильтры и теги;`}),`
`,(0,S.jsx)(t.li,{children:`служебные пометки рядом с полями, карточками и строками таблиц;`}),`
`,(0,S.jsx)(t.li,{children:`компактные списки значений с возможностью удаления.`}),`
`]}),`
`,(0,S.jsxs)(t.p,{children:[`Компонент принимает только строковый `,(0,S.jsx)(t.code,{children:`children`}),`. Длинный текст автоматически ограничивается по ширине и сокращается через `,(0,S.jsx)(t.code,{children:`TextOverflow`}),`, поэтому Badge лучше использовать для коротких и однозначных формулировок.`]}),`
`,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,S.jsx)(d,{}),`
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge } from "@/shared/ui";

export function Example() {
	return (
		<Badge tone="info" appearance="solid">
			Новый
		</Badge>
	);
}
`})}),`
`,(0,S.jsx)(r,{of:m}),`
`,(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:`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:`Если схема не передана полностью, компонент достраивает ее сам:`}),`
`,(0,S.jsxs)(t.ul,{children:[`
`,(0,S.jsxs)(t.li,{children:[`без пропсов будет использован `,(0,S.jsx)(t.code,{children:`neutral + outline`}),`;`]}),`
`,(0,S.jsxs)(t.li,{children:[`если задан цветной `,(0,S.jsx)(t.code,{children:`tone`}),`, но не задан `,(0,S.jsx)(t.code,{children:`appearance`}),`, по умолчанию используется `,(0,S.jsx)(t.code,{children:`solid`}),`;`]}),`
`,(0,S.jsxs)(t.li,{children:[`проп `,(0,S.jsx)(t.code,{children:`color`}),` поддерживается только для обратной совместимости и считается устаревшим.`]}),`
`]}),`
`,(0,S.jsx)(t.h3,{id:`тоны`,children:`Тоны`}),`
`,(0,S.jsx)(u,{of:_}),`
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";

export function StatusBadges() {
	return (
		<BadgeList>
			<Badge tone="neutral" appearance="outline">
				Черновик
			</Badge>
			<Badge tone="success" appearance="solid">
				Успешно
			</Badge>
			<Badge tone="warning" appearance="solid">
				Внимание
			</Badge>
			<Badge tone="error" appearance="solid">
				Ошибка
			</Badge>
			<Badge tone="info" appearance="solid">
				Информация
			</Badge>
		</BadgeList>
	);
}
`})}),`
`,(0,S.jsx)(t.h3,{id:`варианты-отображения`,children:`Варианты отображения`}),`
`,(0,S.jsx)(u,{of:p}),`
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";

export function AppearanceBadges() {
	return (
		<BadgeList>
			<Badge tone="neutral" appearance="solid">
				Solid
			</Badge>
			<Badge tone="neutral" appearance="outline">
				Outline
			</Badge>
			<Badge tone="info" appearance="ghost">
				Ghost
			</Badge>
			<Badge tone="warning" appearance="transparent">
				Transparent
			</Badge>
		</BadgeList>
	);
}
`})}),`
`,(0,S.jsx)(t.h2,{id:`размеры`,children:`Размеры`}),`
`,(0,S.jsxs)(t.p,{children:[`Badge поддерживает размеры от `,(0,S.jsx)(t.code,{children:`xs`}),` до `,(0,S.jsx)(t.code,{children:`xl`}),`. На практике чаще всего используются `,(0,S.jsx)(t.code,{children:`sm`}),` и `,(0,S.jsx)(t.code,{children:`md`}),`: они лучше всего подходят для строк таблиц, панелей фильтрации и карточек.`]}),`
`,(0,S.jsx)(u,{of:g}),`
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";

export function SizeBadges() {
	return (
		<BadgeList>
			<Badge size="xs">XS</Badge>
			<Badge size="sm">SM</Badge>
			<Badge size="md">MD</Badge>
			<Badge size="lg">LG</Badge>
			<Badge size="xl">XL</Badge>
		</BadgeList>
	);
}
`})}),`
`,(0,S.jsx)(t.h2,{id:`списки-фильтров-и-выбранных-значений`,children:`Списки фильтров и выбранных значений`}),`
`,(0,S.jsxs)(t.p,{children:[`Для набора бейджей в одну строку или в несколько переносимых строк есть вспомогательный контейнер `,(0,S.jsx)(t.code,{children:`BadgeList`}),`. Это самый частый сценарий в проекте: выбранные фильтры, категории, теги и активные параметры поиска.`]}),`
`,(0,S.jsx)(u,{of:h}),`
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";

import { Badge, BadgeList } from "@/shared/ui";

export function SelectedFilters() {
	const [items, setItems] = useState(["Фильтр A", "Фильтр B", "Фильтр C"]);

	return (
		<BadgeList>
			{items.map((item) => (
				<Badge
					key={item}
					tone="info"
					appearance="outline"
					onRemove={() => setItems((prev) => prev.filter((value) => value !== item))}>
					{item}
				</Badge>
			))}
		</BadgeList>
	);
}
`})}),`
`,(0,S.jsx)(t.h2,{id:`поведение-и-ограничения`,children:`Поведение и ограничения`}),`
`,(0,S.jsxs)(t.ul,{children:[`
`,(0,S.jsxs)(t.li,{children:[(0,S.jsx)(t.code,{children:`children`}),` должен быть строкой, а не произвольным JSX.`]}),`
`,(0,S.jsxs)(t.li,{children:[`Без `,(0,S.jsx)(t.code,{children:`onRemove`}),` бейдж считается пассивным и не участвует во взаимодействии мышью.`]}),`
`,(0,S.jsxs)(t.li,{children:[`При передаче `,(0,S.jsx)(t.code,{children:`onRemove`}),` справа появляется встроенная кнопка удаления.`]}),`
`,(0,S.jsx)(t.li,{children:`Для длинных значений лучше использовать короткий видимый текст, потому что Badge рассчитан на компактные подписи, а не на развернутые описания.`}),`
`,(0,S.jsxs)(t.li,{children:[`Для новых сценариев рекомендуется использовать `,(0,S.jsx)(t.code,{children:`tone`}),` и `,(0,S.jsx)(t.code,{children:`appearance`}),`, а не `,(0,S.jsx)(t.code,{children:`color`}),`.`]}),`
`]}),`
`,(0,S.jsx)(t.h2,{id:`api`,children:`API`}),`
`,(0,S.jsx)(c,{of:y}),`
`,(0,S.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,S.jsx)(i,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=t(),f(),s(),v()}))();export{x as default};