import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Basic as p,ComposableScheme as m,Variants as h,WithIcons as g,n as _,t as v}from"./Button.stories-BoNLZb6w.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
`,(0,x.jsx)(c,{children:`Button`}),`
`,(0,x.jsx)(i,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
`,(0,x.jsxs)(o.p,{children:[(0,x.jsx)(o.code,{children:`Button`}),` используется как универсальная кнопка интерфейса: в формах, тулбарах, модальных окнах, карточках, таблицах и компактных icon-only сценариях.`]}),`
`,(0,x.jsx)(o.p,{children:`Ключевые особенности компонента:`}),`
`,(0,x.jsxs)(o.ul,{children:[`
`,(0,x.jsxs)(o.li,{children:[`безопасный `,(0,x.jsx)(o.code,{children:`type="button"`}),` по умолчанию;`]}),`
`,(0,x.jsxs)(o.li,{children:[`готовые схемы через `,(0,x.jsx)(o.code,{children:`variant`}),`;`]}),`
`,(0,x.jsxs)(o.li,{children:[`составная настройка через `,(0,x.jsx)(o.code,{children:`tone + appearance`}),`;`]}),`
`,(0,x.jsx)(o.li,{children:`поддержка иконки слева и справа;`}),`
`,(0,x.jsx)(o.li,{children:`автоматический режим icon-only;`}),`
`,(0,x.jsxs)(o.li,{children:[`всплывающая подсказка через `,(0,x.jsx)(o.code,{children:`title`}),`.`]}),`
`]}),`
`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,x.jsx)(u,{}),`
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";

export function Example() {
	return <Button>Сохранить</Button>;
}
`})}),`
`,(0,x.jsx)(n,{of:p}),`
`,(0,x.jsx)(o.h2,{id:`как-выбирать-схему-оформления`,children:`Как выбирать схему оформления`}),`
`,(0,x.jsxs)(o.p,{children:[`Для большинства сценариев достаточно `,(0,x.jsx)(o.code,{children:`variant`}),`: это готовые, согласованные значения дизайн-системы.`]}),`
`,(0,x.jsxs)(o.p,{children:[`Если нужна более гибкая настройка, можно передать `,(0,x.jsx)(o.code,{children:`tone`}),` и `,(0,x.jsx)(o.code,{children:`appearance`}),`. У них приоритет выше, чем у `,(0,x.jsx)(o.code,{children:`variant`}),`, поэтому они подходят для точной донастройки без создания нового варианта.`]}),`
`,(0,x.jsx)(o.h3,{id:`готовые-варианты`,children:`Готовые варианты`}),`
`,(0,x.jsx)(l,{of:h}),`
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.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="success">Подтвердить</Button>
			<Button variant="errorOutline">Отменить</Button>
			<Button variant="transparent">Действие в плотном интерфейсе</Button>
		</>
	);
}
`})}),`
`,(0,x.jsxs)(o.h3,{id:`составная-схема-через-tone-и-appearance`,children:[`Составная схема через `,(0,x.jsx)(o.code,{children:`tone`}),` и `,(0,x.jsx)(o.code,{children:`appearance`})]}),`
`,(0,x.jsx)(l,{of:m}),`
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.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="info" appearance="outline">
				Показать детали
			</Button>
			<Button tone="success" appearance="solid">
				Применить
			</Button>
			<Button tone="error" appearance="transparent">
				Сбросить
			</Button>
		</>
	);
}
`})}),`
`,(0,x.jsx)(o.h2,{id:`иконки-и-компактные-действия`,children:`Иконки и компактные действия`}),`
`,(0,x.jsx)(o.p,{children:`Компонент поддерживает два сценария:`}),`
`,(0,x.jsxs)(o.ul,{children:[`
`,(0,x.jsx)(o.li,{children:`кнопка с текстом и иконкой;`}),`
`,(0,x.jsx)(o.li,{children:`кнопка только с иконкой.`}),`
`]}),`
`,(0,x.jsxs)(o.p,{children:[`Если в кнопке есть только `,(0,x.jsx)(o.code,{children:`icon`}),`, обязательно нужно передать `,(0,x.jsx)(o.code,{children:`title`}),` или `,(0,x.jsx)(o.code,{children:`aria-label`}),`, чтобы управление было доступным для скринридеров. В текущей реализации `,(0,x.jsx)(o.code,{children:`title`}),` также используется как содержимое всплывающей подсказки.`]}),`
`,(0,x.jsx)(l,{of:g}),`
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.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)(o.h2,{id:`использование-в-формах`,children:`Использование в формах`}),`
`,(0,x.jsxs)(o.p,{children:[`По умолчанию компонент рендерится как `,(0,x.jsx)(o.code,{children:`type="button"`}),`, поэтому он не отправляет форму случайно. Для submit-сценариев тип нужно указывать явно.`]}),`
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.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)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
`,(0,x.jsxs)(o.ul,{children:[`
`,(0,x.jsxs)(o.li,{children:[`Для типовых сценариев сначала выбирай `,(0,x.jsx)(o.code,{children:`variant`}),`, а не комбинацию отдельных пропсов.`]}),`
`,(0,x.jsxs)(o.li,{children:[`Для destructive-операций лучше использовать семантически явные схемы `,(0,x.jsx)(o.code,{children:`error`}),` или `,(0,x.jsx)(o.code,{children:`errorOutline`}),`.`]}),`
`,(0,x.jsxs)(o.li,{children:[`Для иконки без текста всегда задавай `,(0,x.jsx)(o.code,{children:`title`}),` или `,(0,x.jsx)(o.code,{children:`aria-label`}),`.`]}),`
`,(0,x.jsxs)(o.li,{children:[`Если нужна кнопка удаления с подтверждением в два шага, стоит рассмотреть `,(0,x.jsx)(o.code,{children:`ButtonRemove`}),` из того же модуля.`]}),`
`,(0,x.jsxs)(o.li,{children:[(0,x.jsx)(o.code,{children:`disabled`}),` блокирует нажатие, но не должен заменять явное объяснение пользователю, почему действие недоступно.`]}),`
`]}),`
`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
`,(0,x.jsx)(s,{of:v}),`
`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};