import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-GrlyTB2d.js";import{i as n,r}from"./react-qN2cStNd.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-DkLPipTQ.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Button.stories-D0rzleM2.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
`,(0,x.jsx)(u,{children:`Button`}),`
`,(0,x.jsx)(o,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
`,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`Button`}),` используется как универсальная кнопка интерфейса: в формах, тулбарах, модальных окнах, карточках, таблицах и компактных icon-only сценариях.`]}),`
`,(0,x.jsx)(t.p,{children:`Ключевые особенности компонента:`}),`
`,(0,x.jsxs)(t.ul,{children:[`
`,(0,x.jsxs)(t.li,{children:[`безопасный `,(0,x.jsx)(t.code,{children:`type="button"`}),` по умолчанию;`]}),`
`,(0,x.jsxs)(t.li,{children:[`готовые схемы через `,(0,x.jsx)(t.code,{children:`variant`}),`;`]}),`
`,(0,x.jsxs)(t.li,{children:[`составная настройка через `,(0,x.jsx)(t.code,{children:`tone + appearance`}),`;`]}),`
`,(0,x.jsx)(t.li,{children:`поддержка иконки слева и справа;`}),`
`,(0,x.jsx)(t.li,{children:`автоматический режим icon-only;`}),`
`,(0,x.jsxs)(t.li,{children:[`всплывающая подсказка через `,(0,x.jsx)(t.code,{children:`title`}),`.`]}),`
`]}),`
`,(0,x.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,x.jsx)(f,{}),`
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";

export function Example() {
	return <Button>Сохранить</Button>;
}
`})}),`
`,(0,x.jsx)(i,{of:v}),`
`,(0,x.jsx)(t.h2,{id:`как-выбирать-схему-оформления`,children:`Как выбирать схему оформления`}),`
`,(0,x.jsxs)(t.p,{children:[`Для большинства сценариев достаточно `,(0,x.jsx)(t.code,{children:`variant`}),`: это готовые, согласованные значения дизайн-системы.`]}),`
`,(0,x.jsxs)(t.p,{children:[`Если нужна более гибкая настройка, можно передать `,(0,x.jsx)(t.code,{children:`tone`}),` и `,(0,x.jsx)(t.code,{children:`appearance`}),`. У них приоритет выше, чем у `,(0,x.jsx)(t.code,{children:`variant`}),`, поэтому они подходят для точной донастройки без создания нового варианта.`]}),`
`,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`brand`}),` выделяет фирменное действие. Для главного действия используйте `,(0,x.jsx)(t.code,{children:`brand + solid`}),` (или `,(0,x.jsx)(t.code,{children:`variant="brand"`}),`), а для вторичного — `,(0,x.jsx)(t.code,{children:`brand + outline`}),` (или `,(0,x.jsx)(t.code,{children:`variant="brandOutline"`}),`). Отдельные `,(0,x.jsx)(t.code,{children:`primary`}),` и `,(0,x.jsx)(t.code,{children:`secondary`}),` тоны не нужны: эту иерархию уже задаёт `,(0,x.jsx)(t.code,{children:`appearance`}),`.`]}),`
`,(0,x.jsx)(t.h3,{id:`готовые-варианты`,children:`Готовые варианты`}),`
`,(0,x.jsx)(d,{of:m}),`
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";

export function ActionVariants() {
	return (
		<>
			<Button variant="neutral">Основное действие</Button>
			<Button variant="neutralOutline">Вторичное действие</Button>
			<Button variant="ghost">Легкое действие</Button>
			<Button variant="brand">Сохранить</Button>
			<Button variant="brandOutline">Предпросмотр</Button>
			<Button variant="success">Подтвердить</Button>
			<Button variant="errorOutline">Отменить</Button>
			<Button variant="transparent">Действие в плотном интерфейсе</Button>
		</>
	);
}
`})}),`
`,(0,x.jsxs)(t.h3,{id:`составная-схема-через-tone-и-appearance`,children:[`Составная схема через `,(0,x.jsx)(t.code,{children:`tone`}),` и `,(0,x.jsx)(t.code,{children:`appearance`})]}),`
`,(0,x.jsx)(d,{of:_}),`
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";

export function CustomScheme() {
	return (
		<>
			<Button tone="neutral" appearance="solid">
				Neutral Solid
			</Button>
			<Button tone="neutral" appearance="outline">
				Neutral Outline
			</Button>
			<Button tone="brand" appearance="solid">
				Сохранить
			</Button>
			<Button tone="brand" appearance="ghost">
				Подробнее
			</Button>
			<Button tone="info" appearance="outline">
				Показать детали
			</Button>
			<Button tone="success" appearance="solid">
				Применить
			</Button>
			<Button tone="error" appearance="transparent">
				Сбросить
			</Button>
		</>
	);
}
`})}),`
`,(0,x.jsx)(t.h2,{id:`иконки-и-компактные-действия`,children:`Иконки и компактные действия`}),`
`,(0,x.jsx)(t.p,{children:`Компонент поддерживает два сценария:`}),`
`,(0,x.jsxs)(t.ul,{children:[`
`,(0,x.jsx)(t.li,{children:`кнопка с текстом и иконкой;`}),`
`,(0,x.jsx)(t.li,{children:`кнопка только с иконкой.`}),`
`]}),`
`,(0,x.jsxs)(t.p,{children:[`Если в кнопке есть только `,(0,x.jsx)(t.code,{children:`icon`}),`, обязательно нужно передать `,(0,x.jsx)(t.code,{children:`title`}),` или `,(0,x.jsx)(t.code,{children:`aria-label`}),`, чтобы управление было доступным для скринридеров. В текущей реализации `,(0,x.jsx)(t.code,{children:`title`}),` также используется как содержимое всплывающей подсказки.`]}),`
`,(0,x.jsx)(d,{of:p}),`
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { BellIcon, CheckIcon, DownloadIcon, PlusIcon } from "lucide-react";

import { Button } from "@/shared/ui";

export function ButtonsWithIcons() {
	return (
		<>
			<Button icon={<DownloadIcon />}>Скачать</Button>
			<Button icon={<PlusIcon />} tone="info" appearance="solid">
				Создать
			</Button>
			<Button icon={<CheckIcon />} iconEnd tone="success" appearance="solid">
				Подтвердить
			</Button>
			<Button icon={<BellIcon />} title="Уведомления" />
		</>
	);
}
`})}),`
`,(0,x.jsx)(t.h2,{id:`использование-в-формах`,children:`Использование в формах`}),`
`,(0,x.jsxs)(t.p,{children:[`По умолчанию компонент рендерится как `,(0,x.jsx)(t.code,{children:`type="button"`}),`, поэтому он не отправляет форму случайно. Для submit-сценариев тип нужно указывать явно.`]}),`
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";

export function FormActions() {
	return (
		<form onSubmit={handleSubmit}>
			<Button type="button" variant="transparent" onClick={handleReset}>
				Сбросить
			</Button>
			<Button type="submit" variant="success">
				Сохранить
			</Button>
		</form>
	);
}
`})}),`
`,(0,x.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
`,(0,x.jsxs)(t.ul,{children:[`
`,(0,x.jsxs)(t.li,{children:[`Для типовых сценариев сначала выбирай `,(0,x.jsx)(t.code,{children:`variant`}),`, а не комбинацию отдельных пропсов.`]}),`
`,(0,x.jsxs)(t.li,{children:[`Для фирменного основного действия используй `,(0,x.jsx)(t.code,{children:`brand`}),`, а его вторичную и компактную формы выражай через `,(0,x.jsx)(t.code,{children:`outline`}),` и `,(0,x.jsx)(t.code,{children:`ghost`}),`.`]}),`
`,(0,x.jsxs)(t.li,{children:[`Для destructive-операций лучше использовать семантически явные схемы `,(0,x.jsx)(t.code,{children:`error`}),` или `,(0,x.jsx)(t.code,{children:`errorOutline`}),`.`]}),`
`,(0,x.jsxs)(t.li,{children:[`Для иконки без текста всегда задавай `,(0,x.jsx)(t.code,{children:`title`}),` или `,(0,x.jsx)(t.code,{children:`aria-label`}),`.`]}),`
`,(0,x.jsxs)(t.li,{children:[`Если нужна кнопка удаления с подтверждением в два шага, стоит рассмотреть `,(0,x.jsx)(t.code,{children:`ButtonRemove`}),` из того же модуля.`]}),`
`,(0,x.jsxs)(t.li,{children:[(0,x.jsx)(t.code,{children:`disabled`}),` блокирует нажатие, но не должен заменять явное объяснение пользователю, почему действие недоступно.`]}),`
`]}),`
`,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
`,(0,x.jsx)(l,{of:h}),`
`,(0,x.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,x.jsx)(a,{includePrimary:!1})]})}function b(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,x.jsx)(t,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;function S(){return(S=e((()=>{x=t(),r(),c(),g()})))()}S();export{b as default};