import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-GmIo3IOR.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-0RiOsxIK.js";import{t as f}from"./mdx-react-shim-DQ40dZsI.js";import{Controlled as p,CustomPresets as m,Disabled as h,DisabledPresets as g,InToolbar as _,Placeholder as v,n as y,t as b}from"./LayoutPicker.stories-C9sMcU1k.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(o,{of:b,parameters:{docs:{toc:!0}}}),`
`,(0,C.jsx)(l,{children:`LayoutPicker`}),`
`,(0,C.jsx)(a,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
`,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.
Компонент не знает, что будет внутри ячеек: он показывает только превью, принимает текущий `,(0,C.jsx)(t.code,{children:`value`}),` как ID пресета и возвращает выбранный ID через `,(0,C.jsx)(t.code,{children:`onChange`}),`.
По умолчанию trigger отображает только иконку текущей раскладки. Чтобы добавить рядом поясняющий текст, передайте `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`: компонент покажет именно строку из `,(0,C.jsx)(t.code,{children:`placeholder`}),`, не заменяя её названием выбранного пресета.`]}),`
`,(0,C.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
`,(0,C.jsx)(d,{}),`
`,(0,C.jsx)(r,{of:p}),`
`,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";

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

export function Example() {
	const [layoutId, setLayoutId] = useState("two-columns");

	return <LayoutPicker label="Layout панели" value={layoutId} onChange={setLayoutId} />;
}
`})}),`
`,(0,C.jsx)(t.h2,{id:`контракт-пресета`,children:`Контракт пресета`}),`
`,(0,C.jsxs)(t.p,{children:[`Пресет описывает размер сетки и расположение ячеек внутри CSS Grid. `,(0,C.jsx)(t.code,{children:`LayoutPicker`}),` использует эти данные только для превью и не применяет раскладку к пользовательскому контенту. Публичный `,(0,C.jsx)(t.code,{children:`onChange`}),` остаётся совместимым с `,(0,C.jsx)(t.code,{children:`UiBaseProps<string>`}),` и отдаёт только `,(0,C.jsx)(t.code,{children:`preset.id`}),`.`]}),`
`,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { type LayoutPickerPreset } from "@/shared/ui";

const dashboardPreset: LayoutPickerPreset = {
	id: "dashboard-main-aside",
	label: "Основной блок + сайдбар",
	description: "Большая рабочая область слева и вертикальная колонка справа.",
	columns: 3,
	rows: 2,
	cells: [
		{ id: "main", column: 1, columnSpan: 2, row: 1, rowSpan: 2 },
		{ id: "aside-top", column: 3, columnSpan: 1, row: 1, rowSpan: 1 },
		{ id: "aside-bottom", column: 3, columnSpan: 1, row: 2, rowSpan: 1 }
	]
};
`})}),`
`,(0,C.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
`,(0,C.jsxs)(t.ul,{children:[`
`,(0,C.jsxs)(t.li,{children:[`Храните во внешней модели только `,(0,C.jsx)(t.code,{children:`preset.id`}),`, а полный пресет берите из стабильного списка `,(0,C.jsx)(t.code,{children:`presets`}),`.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Передавайте `,(0,C.jsx)(t.code,{children:`ariaLabel`}),`, когда рядом нет видимой подписи поля.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Используйте `,(0,C.jsx)(t.code,{children:`getPresetDisabled`}),`, если отдельные схемы временно недоступны из-за лимитов, прав или текущего режима.`]}),`
`,(0,C.jsxs)(t.li,{children:[`Не помещайте бизнес-данные ячеек в `,(0,C.jsx)(t.code,{children:`shared/ui`}),`: назначение содержимого должно оставаться в вызывающем слое.`]}),`
`]}),`
`,(0,C.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
`,(0,C.jsxs)(t.h3,{id:`контролируемый-выбор-синхронизирует-value-с-storybook-args`,children:[`Контролируемый выбор синхронизирует `,(0,C.jsx)(t.code,{children:`value`}),` с Storybook args`]}),`
`,(0,C.jsxs)(t.p,{children:[`Главный story обновляет `,(0,C.jsx)(t.code,{children:`value`}),` через `,(0,C.jsx)(t.code,{children:`useArgs`}),`, поэтому Controls отражают выбранный layout.`]}),`
`,(0,C.jsx)(u,{of:p}),`
`,(0,C.jsx)(t.h3,{id:`состояние-без-выбранного-значения`,children:`Состояние без выбранного значения`}),`
`,(0,C.jsxs)(t.p,{children:[`Story явно включает `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`, поэтому trigger показывает переданный текст `,(0,C.jsx)(t.code,{children:`placeholder`}),` рядом с иконкой. Без этого пропса trigger остаётся icon-only независимо от наличия выбранного пресета.`]}),`
`,(0,C.jsx)(u,{of:v}),`
`,(0,C.jsx)(t.h3,{id:`кастомный-набор-пресетов`,children:`Кастомный набор пресетов`}),`
`,(0,C.jsxs)(t.p,{children:[`Компонент принимает произвольный список `,(0,C.jsx)(t.code,{children:`LayoutPickerPreset`}),`, пока каждая ячейка описана координатами grid.`]}),`
`,(0,C.jsx)(u,{of:m}),`
`,(0,C.jsx)(t.h3,{id:`заблокированные-пресеты`,children:`Заблокированные пресеты`}),`
`,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`getPresetDisabled`}),` блокирует отдельные варианты, не отключая весь контрол.`]}),`
`,(0,C.jsx)(u,{of:g}),`
`,(0,C.jsx)(t.h3,{id:`пример-в-панели-настройки`,children:`Пример в панели настройки`}),`
`,(0,C.jsx)(t.p,{children:`Сценарий показывает типичную связку: выбор layout, сводку текущего пресета и превью областей, которые уже рендерит вызывающий слой.`}),`
`,(0,C.jsx)(u,{of:_}),`
`,(0,C.jsx)(t.h3,{id:`заблокированный-контрол`,children:`Заблокированный контрол`}),`
`,(0,C.jsxs)(t.p,{children:[`Полное `,(0,C.jsx)(t.code,{children:`disabled`}),`-состояние блокирует trigger и открытие popup.`]}),`
`,(0,C.jsx)(u,{of:h}),`
`,(0,C.jsx)(t.h2,{id:`api`,children:`API`}),`
`,(0,C.jsx)(c,{of:b}),`
`,(0,C.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
`,(0,C.jsx)(i,{includePrimary:!1})]})}function S(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;e((()=>{C=t(),f(),s(),y()}))();export{S as default};