@ryuzaki13/react-foundation-ui 1.2.7 → 1.2.9

package/storybook-static/assets/{SliderInput.stories-CDS4YS_3.js → SliderInput.stories-BK5zJTQY.js}

@@ -1,4 +1,4 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{j as a}from"./formatters-Br290Dmy.js";import{t as o}from"./odata-service-DMzLjWr8.js";import{n as s,r as c,t as l}from"./slider-D7YUv9lW.js";var u=e({Basic:()=>y,DecimalManualInput:()=>x,Disabled:()=>D,MarksSnap:()=>b,RangeInputMonthToDaysOutput:()=>w,RangeInputOpenMonthToDaysOutput:()=>T,RangeInputOpenWithoutExplicitMiddleOutput:()=>C,RangeInputPlain:()=>S,RangeInputReadonlyText:()=>E,__namedExportsOrder:()=>O,default:()=>v});function d({value:e,field:t,children:n}){let[r,i]=e??[null,null];return(0,p.jsxs)(`div`,{className:`marginTopMd`,children:[(0,p.jsx)(`div`,{className:`textSm сontent2`,children:`Preview фильтра`}),(0,p.jsx)(`pre`,{children:JSON.stringify({value:[r,i],filter:a(t,e)},null,2)}),n]})}var f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k=n((()=>{f=t(r(),1),o(),l(),p=i(),m=[{value:0,label:`0`},{value:20,label:`20`},{value:40,label:`40`},{value:60,label:`60`},{value:80,label:`80`},{value:100,label:`100`}],h=[{value:0,label:`Без нижней границы`,outputValue:null},{value:1,label:`1 мес.`},{value:3,label:`3 мес.`},{value:6,label:`6 мес.`},{value:12,label:`12 мес.`},{value:24,label:`24 мес.`},{value:25,label:`Без верхней границы`,outputValue:null}],g=[{value:1,label:`1 мес.`,outputValue:30},{value:3,label:`3 мес.`,outputValue:90},{value:6,label:`6 мес.`,outputValue:180},{value:12,label:`12 мес.`,outputValue:360},{value:24,label:`24 мес.`,outputValue:720}],_=[{value:0,label:`-`,outputValue:null},{value:1,label:`1м.`,outputValue:30},{value:3,label:`3м.`,outputValue:90},{value:6,label:`6м.`,outputValue:180},{value:12,label:`1г.`,outputValue:360},{value:18,label:`1.5г.`,outputValue:540},{value:24,label:`2г.`,outputValue:720},{value:25,label:`-`,outputValue:null}],v={title:`Shared/UI/SliderInput`,component:s,args:{value:12,onChange:()=>{},min:0,max:100,step:.5},parameters:{atomicCanvas:!0,layout:`padded`}},y={render:e=>{let[t,n]=(0,f.useState)(e.value);return(0,p.jsx)(s,{...e,label:`Порог`,description:`Ручной ввод и popover slider работают с одним значением.`,value:t,onChange:n})}},b={render:e=>{let[t,n]=(0,f.useState)(40);return(0,p.jsx)(s,{...e,label:`Готовый пресет`,marks:m,value:t,onChange:n})}},x={render:e=>{let[t,n]=(0,f.useState)(17.5);return(0,p.jsx)(s,{...e,label:`Десятичное значение`,value:t,onChange:n})},args:{step:.5}},S={render:()=>{let[e,t]=(0,f.useState)([20,80]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Процент выполнения`,description:"RangeInput без outputValue: наружу отдаётся координата `value`.",min:0,max:100,marks:m,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`progress`,unit:`%`})]})}},C={render:()=>{let[e,t]=(0,f.useState)([null,12]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок в месяцах`,description:"У крайних marks `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",min:0,max:25,marks:h,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`months`,unit:` мес.`})]})}},w={render:()=>{let[e,t]=(0,f.useState)([90,360]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: месяцы на шкале, дни в фильтре`,description:`В поле и фильтре видны дни, а popover показывает месячные marks.`,min:1,max:24,marks:g,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},T={render:()=>{let[e,t]=(0,f.useState)([null,720]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: открытые границы и дни в фильтре`,description:"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},E={render:()=>{let[e,t]=(0,f.useState)([90,180]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок текстом`,description:`В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.`,min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t,readonlyValueText:!0,placeholder:`Любой срок`}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},D={args:{label:`Недоступно`,description:`Поле и popover отключены.`,value:20,disabled:!0,marks:m}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{j as a}from"./formatters-B2V6HAWH.js";import{t as o}from"./odata-service-DVIoNhNQ.js";import{n as s,r as c,t as l}from"./slider-B5mloux6.js";var u=e({Basic:()=>y,DecimalManualInput:()=>x,Disabled:()=>D,MarksSnap:()=>b,RangeInputMonthToDaysOutput:()=>w,RangeInputOpenMonthToDaysOutput:()=>T,RangeInputOpenWithoutExplicitMiddleOutput:()=>C,RangeInputPlain:()=>S,RangeInputReadonlyText:()=>E,__namedExportsOrder:()=>O,default:()=>v});function d({value:e,field:t,children:n}){let[r,i]=e??[null,null];return(0,p.jsxs)(`div`,{className:`marginTopMd`,children:[(0,p.jsx)(`div`,{className:`textSm сontent2`,children:`Preview фильтра`}),(0,p.jsx)(`pre`,{children:JSON.stringify({value:[r,i],filter:a(t,e)},null,2)}),n]})}var f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k=n((()=>{f=t(r(),1),o(),l(),p=i(),m=[{value:0,label:`0`},{value:20,label:`20`},{value:40,label:`40`},{value:60,label:`60`},{value:80,label:`80`},{value:100,label:`100`}],h=[{value:0,label:`Без нижней границы`,outputValue:null},{value:1,label:`1 мес.`},{value:3,label:`3 мес.`},{value:6,label:`6 мес.`},{value:12,label:`12 мес.`},{value:24,label:`24 мес.`},{value:25,label:`Без верхней границы`,outputValue:null}],g=[{value:1,label:`1 мес.`,outputValue:30},{value:3,label:`3 мес.`,outputValue:90},{value:6,label:`6 мес.`,outputValue:180},{value:12,label:`12 мес.`,outputValue:360},{value:24,label:`24 мес.`,outputValue:720}],_=[{value:0,label:`-`,outputValue:null},{value:1,label:`1м.`,outputValue:30},{value:3,label:`3м.`,outputValue:90},{value:6,label:`6м.`,outputValue:180},{value:12,label:`1г.`,outputValue:360},{value:18,label:`1.5г.`,outputValue:540},{value:24,label:`2г.`,outputValue:720},{value:25,label:`-`,outputValue:null}],v={title:`Shared/UI/SliderInput`,component:s,args:{value:12,onChange:()=>{},min:0,max:100,step:.5},parameters:{atomicCanvas:!0,layout:`padded`}},y={render:e=>{let[t,n]=(0,f.useState)(e.value);return(0,p.jsx)(s,{...e,label:`Порог`,description:`Ручной ввод и popover slider работают с одним значением.`,value:t,onChange:n})}},b={render:e=>{let[t,n]=(0,f.useState)(40);return(0,p.jsx)(s,{...e,label:`Готовый пресет`,marks:m,value:t,onChange:n})}},x={render:e=>{let[t,n]=(0,f.useState)(17.5);return(0,p.jsx)(s,{...e,label:`Десятичное значение`,value:t,onChange:n})},args:{step:.5}},S={render:()=>{let[e,t]=(0,f.useState)([20,80]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Процент выполнения`,description:"RangeInput без outputValue: наружу отдаётся координата `value`.",min:0,max:100,marks:m,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`progress`,unit:`%`})]})}},C={render:()=>{let[e,t]=(0,f.useState)([null,12]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок в месяцах`,description:"У крайних marks `outputValue:null`; у обычных marks outputValue не указан и берётся `value`.",min:0,max:25,marks:h,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`months`,unit:` мес.`})]})}},w={render:()=>{let[e,t]=(0,f.useState)([90,360]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: месяцы на шкале, дни в фильтре`,description:`В поле и фильтре видны дни, а popover показывает месячные marks.`,min:1,max:24,marks:g,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},T={render:()=>{let[e,t]=(0,f.useState)([null,720]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок: открытые границы и дни в фильтре`,description:"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},E={render:()=>{let[e,t]=(0,f.useState)([90,180]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(c,{label:`Срок текстом`,description:`В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.`,min:0,max:25,marks:_,marksPosition:`index`,value:e,onChange:t,readonlyValueText:!0,placeholder:`Любой срок`}),(0,p.jsx)(d,{value:e,field:`days`,unit:` дн.`})]})}},D={args:{label:`Недоступно`,description:`Поле и popover отключены.`,value:20,disabled:!0,marks:m}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [value, setValue] = useState<number>(args.value);
     return <SliderInput {...args} label="Порог" description="Ручной ввод и popover slider работают с одним значением." value={value} onChange={setValue} />;

package/storybook-static/assets/Sortable-DgOwhJcd.js

@@ -0,0 +1,72 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Basic as p,DisabledItems as m,GridCards as h,HandleOnly as g,HorizontalList as _,NestedContainers as v,n as y,t as b}from"./Sortable.stories-_kesL24S.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:`Sortable`}),`
+`,(0,C.jsxs)(a,{children:[`Headless-набор для сортируемых коллекций на базе `,(0,C.jsx)(t.code,{children:`dnd-kit`}),` с поддержкой list, horizontal и grid-layout`]}),`
+`,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`Sortable`}),` не навязывает визуальный вид элементов и используется как композиционный слой поверх `,(0,C.jsx)(t.code,{children:`dnd-kit`}),`.
+Он дает единый API для `,(0,C.jsx)(t.code,{children:`DndContext`}),`, `,(0,C.jsx)(t.code,{children:`SortableContext`}),`, sortable-item и drag-handle, а бизнес-логика reorder остается у потребителя.
+Для типовой визуальной ручки есть `,(0,C.jsx)(t.code,{children:`Sortable.DragHandle`}),`; низкоуровневый `,(0,C.jsx)(t.code,{children:`Sortable.Handle`}),` нужен, когда внешний вид полностью задает потребитель.`]}),`
+`,(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 { Sortable, getSortableReorderResult } from "@/shared/ui";
+
+function Example({ items, setItems }: { items: string[]; setItems: (next: string[]) => void }) {
+	return (
+		<Sortable.Root
+			onDragEnd={(event) => {
+				const reorder = getSortableReorderResult({
+					event,
+					items: {
+						list: items
+					}
+				});
+				if (!reorder) return;
+
+				const next = [...items];
+				const [moved] = next.splice(reorder.fromIndex, 1);
+				next.splice(reorder.toIndex, 0, moved!);
+				setItems(next);
+			}}>
+			<Sortable.Container containerId="list" items={items} layout="vertical">
+				{items.map((item) => (
+					<Sortable.Item key={item} id={item}>
+						<Sortable.DragHandle title={\`Перетащить \${item}\`} />
+						<span>{item}</span>
+					</Sortable.Item>
+				))}
+			</Sortable.Container>
+		</Sortable.Root>
+	);
+}
+`})}),`
+`,(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:`Sortable.Root`}),` как общий контекст drag-and-drop для одного сценария взаимодействия.`]}),`
+`,(0,C.jsxs)(t.li,{children:[`Для нескольких независимых списков внутри одного экрана задавайте отдельные `,(0,C.jsx)(t.code,{children:`containerId`}),` через `,(0,C.jsx)(t.code,{children:`Sortable.Container`}),`.`]}),`
+`,(0,C.jsxs)(t.li,{children:[`Логику reorder удобнее выносить в helper `,(0,C.jsx)(t.code,{children:`getSortableReorderResult`}),`, если перенос между контейнерами не нужен.`]}),`
+`,(0,C.jsxs)(t.li,{children:[`Для вложенных сценариев размещайте несколько `,(0,C.jsx)(t.code,{children:`Sortable.Container`}),` внутри одного `,(0,C.jsx)(t.code,{children:`Sortable.Root`}),`.`]}),`
+`,(0,C.jsxs)(t.li,{children:[(0,C.jsx)(t.code,{children:`Sortable.Item`}),` отвечает только за DnD-bindings и inline-style трансформации; визуальный каркас строки или карточки должен оставаться у потребителя.`]}),`
+`,(0,C.jsxs)(t.li,{children:[`Используйте `,(0,C.jsx)(t.code,{children:`Sortable.DragHandle`}),` для стандартной ручки с `,(0,C.jsx)(t.code,{children:`GripIcon`}),`, локальными стилями и состояниями disabled/dragging.`]}),`
+`]}),`
+`,(0,C.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,C.jsx)(t.h3,{id:`базовый-вертикальный-список`,children:`Базовый вертикальный список`}),`
+`,(0,C.jsx)(t.p,{children:`Базовый headless-сценарий сортировки элементов по вертикали.`}),`
+`,(0,C.jsx)(u,{of:p}),`
+`,(0,C.jsx)(t.h3,{id:`горизонтальный-список`,children:`Горизонтальный список`}),`
+`,(0,C.jsxs)(t.p,{children:[`Использование `,(0,C.jsx)(t.code,{children:`layout="horizontal"`}),` для toolbar, чипов и полос вкладок.`]}),`
+`,(0,C.jsx)(u,{of:_}),`
+`,(0,C.jsx)(t.h3,{id:`grid-карточки`,children:`Grid-карточки`}),`
+`,(0,C.jsxs)(t.p,{children:[`Использование `,(0,C.jsx)(t.code,{children:`layout="grid"`}),` для карточек и flow-раскладок.`]}),`
+`,(0,C.jsx)(u,{of:h}),`
+`,(0,C.jsx)(t.h3,{id:`отключенные-элементы`,children:`Отключенные элементы`}),`
+`,(0,C.jsx)(t.p,{children:`Проверка поведения для элементов, которые видны в списке, но не должны перетаскиваться.`}),`
+`,(0,C.jsx)(u,{of:m}),`
+`,(0,C.jsx)(t.h3,{id:`handle-only-drag`,children:`Handle-only drag`}),`
+`,(0,C.jsx)(t.p,{children:`Перетаскивание доступно только через handle, а не через весь элемент.`}),`
+`,(0,C.jsx)(u,{of:g}),`
+`,(0,C.jsx)(t.h3,{id:`вложенные-контейнеры`,children:`Вложенные контейнеры`}),`
+`,(0,C.jsxs)(t.p,{children:[`Два уровня `,(0,C.jsx)(t.code,{children:`Sortable.Container`}),` внутри одного `,(0,C.jsx)(t.code,{children:`Sortable.Root`}),` без переноса между контейнерами.`]}),`
+`,(0,C.jsx)(u,{of:v}),`
+`,(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};

package/storybook-static/assets/{Sortable.stories--yPzhn7U.js → Sortable.stories-_kesL24S.js}

@@ -1,4 +1,4 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{i as a,n as o,r as s,t as c}from"./sortable-_Ry8I9Yk.js";var l=e({Basic:()=>b,DisabledItems:()=>C,GridCards:()=>S,HandleOnly:()=>w,HorizontalList:()=>x,NestedContainers:()=>T,SortablePreview:()=>f,__namedExportsOrder:()=>E,default:()=>y});function u(e,t,n){let r=[...e],[i]=r.splice(t,1);return r.splice(n,0,i),r}function d(e){switch(e){case`horizontal`:return{display:`flex`,gap:`var(--space-sm)`,overflowX:`auto`};case`grid`:return{display:`grid`,gap:`var(--space-sm)`,gridTemplateColumns:`repeat(auto-fill, minmax(12rem, 1fr))`};default:return{display:`grid`,gap:`var(--space-sm)`}}}function f(e){let[t,n]=(0,p.useState)(e.initialItems),r=new Set(e.disabledIds??[]);return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:r=>{let i=s({event:r,items:{[e.containerId]:t}});i&&n(e=>u(e,i.fromIndex,i.toIndex))},children:(0,m.jsx)(c.Container,{containerId:e.containerId,items:t,layout:e.layout,children:(0,m.jsx)(`div`,{style:d(e.layout),children:t.map(t=>(0,m.jsxs)(c.Item,{id:t,disabled:r.has(t),style:{...h,minWidth:e.itemWidth},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${t}`}),(0,m.jsx)(`div`,{children:t})]},t))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:`Порядок элементов изменяется локально в рамках story.`})]})}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D=n((()=>{p=t(r(),1),o(),a(),m=i(),h={display:`grid`,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`center`,gap:`var(--space-sm)`,padding:`var(--space-sm)`,border:`var(--border)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-0)`},g=[`Alpha`,`Bravo`,`Charlie`,`Delta`],_=[`Фильтры`,`Графики`,`Сводка`,`История`],v=[`Карточка 1`,`Карточка 2`,`Карточка 3`,`Карточка 4`,`Карточка 5`,`Карточка 6`],y={title:`Shared/UI/Sortable`,component:f,args:{containerId:`sortable-demo`,layout:`vertical`,initialItems:g,itemWidth:void 0,disabledIds:[]},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{containerId:{description:"Идентификатор `SortableContext`, который используется для вычисления reorder внутри контейнера.",control:`text`},layout:{description:`Режим раскладки и стратегия сортировки: вертикальный список, горизонтальный список или grid.`,control:`inline-radio`,options:[`vertical`,`horizontal`,`grid`]},initialItems:{description:`Начальный набор элементов. Внутри story состояние управляется локально.`,control:!1},itemWidth:{description:`Минимальная ширина карточки; полезна для горизонтального режима.`,control:`text`},disabledIds:{description:`Список id, для которых drag-handle отключен.`,control:!1}}},b={},x={args:{containerId:`sortable-horizontal`,layout:`horizontal`,initialItems:_,itemWidth:`12rem`}},S={args:{containerId:`sortable-grid`,layout:`grid`,initialItems:v}},C={args:{containerId:`sortable-disabled`,layout:`vertical`,initialItems:g,disabledIds:[`Bravo`,`Delta`]}},w={args:{containerId:`sortable-handle-only`,layout:`vertical`,initialItems:[`Пункт 1`,`Пункт 2`,`Пункт 3`,`Пункт 4`]}},T={args:{containerId:`top`,layout:`vertical`,initialItems:[`Группа A`,`Группа B`]},render:()=>{let[e,t]=(0,p.useState)([`Группа A`,`Группа B`]),[n,r]=(0,p.useState)({"Группа A":[`A.1`,`A.2`,`A.3`],"Группа B":[`B.1`,`B.2`]});return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:i=>{let a=s({event:i,items:{top:e,...Object.fromEntries(e.map(e=>[`parent:${e}`,n[e]??[]]))}});if(!a)return;if(a.containerId===`top`){t(e=>u(e,a.fromIndex,a.toIndex));return}let o=String(a.containerId).slice(7);r(e=>({...e,[o]:u(e[o]??[],a.fromIndex,a.toIndex)}))},children:(0,m.jsx)(c.Container,{containerId:`top`,items:e,children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-md)`},children:e.map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`start`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsxs)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:[(0,m.jsx)(`strong`,{children:e}),(0,m.jsx)(c.Container,{containerId:`parent:${e}`,items:n[e]??[],children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-xs)`},children:(n[e]??[]).map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,background:`var(--surface-1)`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsx)(`div`,{children:e})]},e))})})]})]},e))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:"Вложенные контейнеры сортируются независимо и используют общий `Sortable.Root`."})]})}},f.__docgenInfo={description:``,methods:[],displayName:`SortablePreview`,props:{containerId:{required:!0,tsType:{name:`string`},description:``},layout:{required:!0,tsType:{name:`union`,raw:`"vertical" | "horizontal" | "grid"`,elements:[{name:`literal`,value:`"vertical"`},{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"grid"`}]},description:``},initialItems:{required:!0,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``},itemWidth:{required:!1,tsType:{name:`string`},description:``},disabledIds:{required:!1,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`function SortablePreview(props: SortablePreviewProps) {
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{i as a,n as o,r as s,t as c}from"./sortable-C4ZkJ2Xa.js";var l=e({Basic:()=>b,DisabledItems:()=>C,GridCards:()=>S,HandleOnly:()=>w,HorizontalList:()=>x,NestedContainers:()=>T,SortablePreview:()=>f,__namedExportsOrder:()=>E,default:()=>y});function u(e,t,n){let r=[...e],[i]=r.splice(t,1);return r.splice(n,0,i),r}function d(e){switch(e){case`horizontal`:return{display:`flex`,gap:`var(--space-sm)`,overflowX:`auto`};case`grid`:return{display:`grid`,gap:`var(--space-sm)`,gridTemplateColumns:`repeat(auto-fill, minmax(12rem, 1fr))`};default:return{display:`grid`,gap:`var(--space-sm)`}}}function f(e){let[t,n]=(0,p.useState)(e.initialItems),r=new Set(e.disabledIds??[]);return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:r=>{let i=s({event:r,items:{[e.containerId]:t}});i&&n(e=>u(e,i.fromIndex,i.toIndex))},children:(0,m.jsx)(c.Container,{containerId:e.containerId,items:t,layout:e.layout,children:(0,m.jsx)(`div`,{style:d(e.layout),children:t.map(t=>(0,m.jsxs)(c.Item,{id:t,disabled:r.has(t),style:{...h,minWidth:e.itemWidth},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${t}`}),(0,m.jsx)(`div`,{children:t})]},t))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:`Порядок элементов изменяется локально в рамках story.`})]})}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D=n((()=>{p=t(r(),1),o(),a(),m=i(),h={display:`grid`,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`center`,gap:`var(--space-sm)`,padding:`var(--space-sm)`,border:`var(--border)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-0)`},g=[`Alpha`,`Bravo`,`Charlie`,`Delta`],_=[`Фильтры`,`Графики`,`Сводка`,`История`],v=[`Карточка 1`,`Карточка 2`,`Карточка 3`,`Карточка 4`,`Карточка 5`,`Карточка 6`],y={title:`Shared/UI/Sortable`,component:f,args:{containerId:`sortable-demo`,layout:`vertical`,initialItems:g,itemWidth:void 0,disabledIds:[]},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{containerId:{description:"Идентификатор `SortableContext`, который используется для вычисления reorder внутри контейнера.",control:`text`},layout:{description:`Режим раскладки и стратегия сортировки: вертикальный список, горизонтальный список или grid.`,control:`inline-radio`,options:[`vertical`,`horizontal`,`grid`]},initialItems:{description:`Начальный набор элементов. Внутри story состояние управляется локально.`,control:!1},itemWidth:{description:`Минимальная ширина карточки; полезна для горизонтального режима.`,control:`text`},disabledIds:{description:`Список id, для которых drag-handle отключен.`,control:!1}}},b={},x={args:{containerId:`sortable-horizontal`,layout:`horizontal`,initialItems:_,itemWidth:`12rem`}},S={args:{containerId:`sortable-grid`,layout:`grid`,initialItems:v}},C={args:{containerId:`sortable-disabled`,layout:`vertical`,initialItems:g,disabledIds:[`Bravo`,`Delta`]}},w={args:{containerId:`sortable-handle-only`,layout:`vertical`,initialItems:[`Пункт 1`,`Пункт 2`,`Пункт 3`,`Пункт 4`]}},T={args:{containerId:`top`,layout:`vertical`,initialItems:[`Группа A`,`Группа B`]},render:()=>{let[e,t]=(0,p.useState)([`Группа A`,`Группа B`]),[n,r]=(0,p.useState)({"Группа A":[`A.1`,`A.2`,`A.3`],"Группа B":[`B.1`,`B.2`]});return(0,m.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,m.jsx)(c.Root,{onDragEnd:i=>{let a=s({event:i,items:{top:e,...Object.fromEntries(e.map(e=>[`parent:${e}`,n[e]??[]]))}});if(!a)return;if(a.containerId===`top`){t(e=>u(e,a.fromIndex,a.toIndex));return}let o=String(a.containerId).slice(7);r(e=>({...e,[o]:u(e[o]??[],a.fromIndex,a.toIndex)}))},children:(0,m.jsx)(c.Container,{containerId:`top`,items:e,children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-md)`},children:e.map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`start`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsxs)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:[(0,m.jsx)(`strong`,{children:e}),(0,m.jsx)(c.Container,{containerId:`parent:${e}`,items:n[e]??[],children:(0,m.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-xs)`},children:(n[e]??[]).map(e=>(0,m.jsxs)(c.Item,{id:e,style:{...h,background:`var(--surface-1)`},children:[(0,m.jsx)(c.DragHandle,{title:`Перетащить ${e}`}),(0,m.jsx)(`div`,{children:e})]},e))})})]})]},e))})})}),(0,m.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:"Вложенные контейнеры сортируются независимо и используют общий `Sortable.Root`."})]})}},f.__docgenInfo={description:``,methods:[],displayName:`SortablePreview`,props:{containerId:{required:!0,tsType:{name:`string`},description:``},layout:{required:!0,tsType:{name:`union`,raw:`"vertical" | "horizontal" | "grid"`,elements:[{name:`literal`,value:`"vertical"`},{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"grid"`}]},description:``},initialItems:{required:!0,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``},itemWidth:{required:!1,tsType:{name:`string`},description:``},disabledIds:{required:!1,tsType:{name:`Array`,elements:[{name:`string`}],raw:`string[]`},description:``}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`function SortablePreview(props: SortablePreviewProps) {
   const [items, setItems] = useState(props.initialItems);
   const disabledIdSet = new Set(props.disabledIds ?? []);
   return <div style={{

package/storybook-static/assets/{Splitter-6_oQu3c4.js → Splitter-Ce70KsGU.js}

@@ -1,11 +1,11 @@
-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-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{Basic as p,Constrained as m,Horizontal as h,NestedFourPanels as g,n as _,t as v}from"./Splitter.stories-BLDqjnbb.js";function y(e){let o={code:`code`,h2:`h2`,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:{docs:{toc:!0}}}),`
-`,(0,x.jsx)(c,{children:`Splitter`}),`
-`,(0,x.jsx)(i,{children:(0,x.jsx)(o.p,{children:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
-`,(0,x.jsxs)(o.p,{children:[(0,x.jsx)(o.code,{children:`Splitter`}),` подходит для интерфейсов, где пользователь должен самостоятельно перераспределять пространство между соседними областями: навигацией и контентом, таблицей и деталями, превью и журналом событий.`]}),`
-`,(0,x.jsxs)(o.p,{children:[`Компонент ожидает ровно два прямых дочерних элемента. Если нужно больше областей, их лучше собирать через вложенные `,(0,x.jsx)(o.code,{children:`Splitter`}),`, чтобы сохранить простую модель поведения и предсказуемый resize.`]}),`
-`,(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 { Splitter } from "@/shared/ui";
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Basic as p,Constrained as m,Horizontal as h,NestedFourPanels as g,n as _,t as v}from"./Splitter.stories-FPS6WZyt.js";function y(e){let t={code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(o,{of:v,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(l,{children:`Splitter`}),`
+`,(0,x.jsx)(a,{children:(0,x.jsx)(t.p,{children:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
+`,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`Splitter`}),` подходит для интерфейсов, где пользователь должен самостоятельно перераспределять пространство между соседними областями: навигацией и контентом, таблицей и деталями, превью и журналом событий.`]}),`
+`,(0,x.jsxs)(t.p,{children:[`Компонент ожидает ровно два прямых дочерних элемента. Если нужно больше областей, их лучше собирать через вложенные `,(0,x.jsx)(t.code,{children:`Splitter`}),`, чтобы сохранить простую модель поведения и предсказуемый resize.`]}),`
+`,(0,x.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(d,{}),`
+`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function Example() {
 	return (
@@ -18,21 +18,21 @@ export function Example() {
 	);
 }
 `})}),`
-`,(0,x.jsx)(n,{of:p}),`
-`,(0,x.jsx)(o.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
-`,(0,x.jsxs)(o.ul,{children:[`
-`,(0,x.jsx)(o.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
-`,(0,x.jsxs)(o.li,{children:[`Значения `,(0,x.jsx)(o.code,{children:`initial`}),`, `,(0,x.jsx)(o.code,{children:`min`}),` и `,(0,x.jsx)(o.code,{children:`max`}),` автоматически нормализуются в диапазон `,(0,x.jsx)(o.code,{children:`0..1`}),`.`]}),`
-`,(0,x.jsxs)(o.li,{children:[`Если `,(0,x.jsx)(o.code,{children:`min`}),` и `,(0,x.jsx)(o.code,{children:`max`}),` заданы в обратном порядке, компонент сам исправляет диапазон.`]}),`
-`,(0,x.jsxs)(o.li,{children:[`Разделитель управляется клавиатурой: стрелки двигают границу пошагово, `,(0,x.jsx)(o.code,{children:`Home`}),` переводит в минимум, `,(0,x.jsx)(o.code,{children:`End`}),` в максимум.`]}),`
+`,(0,x.jsx)(r,{of:p}),`
+`,(0,x.jsx)(t.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
+`,(0,x.jsxs)(t.ul,{children:[`
+`,(0,x.jsx)(t.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
+`,(0,x.jsxs)(t.li,{children:[`Значения `,(0,x.jsx)(t.code,{children:`initial`}),`, `,(0,x.jsx)(t.code,{children:`min`}),` и `,(0,x.jsx)(t.code,{children:`max`}),` автоматически нормализуются в диапазон `,(0,x.jsx)(t.code,{children:`0..1`}),`.`]}),`
+`,(0,x.jsxs)(t.li,{children:[`Если `,(0,x.jsx)(t.code,{children:`min`}),` и `,(0,x.jsx)(t.code,{children:`max`}),` заданы в обратном порядке, компонент сам исправляет диапазон.`]}),`
+`,(0,x.jsxs)(t.li,{children:[`Разделитель управляется клавиатурой: стрелки двигают границу пошагово, `,(0,x.jsx)(t.code,{children:`Home`}),` переводит в минимум, `,(0,x.jsx)(t.code,{children:`End`}),` в максимум.`]}),`
 `]}),`
-`,(0,x.jsx)(o.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
-`,(0,x.jsx)(o.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
-`,(0,x.jsx)(l,{of:p}),`
-`,(0,x.jsx)(o.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
-`,(0,x.jsx)(o.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
-`,(0,x.jsx)(l,{of:h}),`
-`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
+`,(0,x.jsx)(t.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
+`,(0,x.jsx)(t.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
+`,(0,x.jsx)(u,{of:p}),`
+`,(0,x.jsx)(t.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
+`,(0,x.jsx)(t.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
+`,(0,x.jsx)(u,{of:h}),`
+`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function HorizontalLayout() {
 	return (
@@ -45,10 +45,10 @@ export function HorizontalLayout() {
 	);
 }
 `})}),`
-`,(0,x.jsx)(o.h2,{id:`разделение-на-4-части`,children:`Разделение на 4 части`}),`
-`,(0,x.jsxs)(o.p,{children:[`Чтобы собрать четыре независимые области, используйте `,(0,x.jsx)(o.code,{children:`Splitter`}),` внутри `,(0,x.jsx)(o.code,{children:`Splitter`}),`. Такой подход даёт предсказуемую вложенную структуру и хорошо масштабируется для сложных рабочих экранов.`]}),`
-`,(0,x.jsx)(l,{of:g}),`
-`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
+`,(0,x.jsx)(t.h2,{id:`разделение-на-4-части`,children:`Разделение на 4 части`}),`
+`,(0,x.jsxs)(t.p,{children:[`Чтобы собрать четыре независимые области, используйте `,(0,x.jsx)(t.code,{children:`Splitter`}),` внутри `,(0,x.jsx)(t.code,{children:`Splitter`}),`. Такой подход даёт предсказуемую вложенную структуру и хорошо масштабируется для сложных рабочих экранов.`]}),`
+`,(0,x.jsx)(u,{of:g}),`
+`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function FourPaneLayout() {
 	return (
@@ -67,17 +67,17 @@ export function FourPaneLayout() {
 	);
 }
 `})}),`
-`,(0,x.jsx)(o.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
-`,(0,x.jsx)(o.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
-`,(0,x.jsx)(l,{of:m}),`
-`,(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:`Splitter`}),` не сможет корректно распределить пространство по вертикали.`]}),`
-`,(0,x.jsxs)(o.li,{children:[`Держите в `,(0,x.jsx)(o.code,{children:`Splitter`}),` только два прямых потомка. Для трёх и более областей используйте вложенность.`]}),`
-`,(0,x.jsx)(o.li,{children:`Если в панелях живут тяжёлые таблицы, графики или сложные формы, лучше избегать лишней бизнес-логики, завязанной на каждое движение разделителя.`}),`
-`,(0,x.jsx)(o.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
+`,(0,x.jsx)(t.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
+`,(0,x.jsx)(t.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
+`,(0,x.jsx)(u,{of:m}),`
+`,(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:`Splitter`}),` не сможет корректно распределить пространство по вертикали.`]}),`
+`,(0,x.jsxs)(t.li,{children:[`Держите в `,(0,x.jsx)(t.code,{children:`Splitter`}),` только два прямых потомка. Для трёх и более областей используйте вложенность.`]}),`
+`,(0,x.jsx)(t.li,{children:`Если в панелях живут тяжёлые таблицы, графики или сложные формы, лучше избегать лишней бизнес-логики, завязанной на каждое движение разделителя.`}),`
+`,(0,x.jsx)(t.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
 `]}),`
-`,(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};
+`,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(c,{of:v}),`
+`,(0,x.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(i,{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;e((()=>{x=t(),f(),s(),_()}))();export{b as default};

package/storybook-static/assets/Splitter.stories-FPS6WZyt.js

@@ -0,0 +1,22 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{pn as r,t as i}from"./iframe-NOj5DEP4.js";import{a,i as o}from"./utils-C5_R17vJ.js";var s,c,l,u,d,f,p,m=n((()=>{s=`wAovST`,c=`QVVMwe`,l=`H43AJ8`,u=`pgo8sW`,d=`_8fCvqA`,f=`t6RFcI`,p={splitter:s,vertical:c,separator:l,horizontal:u,topLeft:d,bottomRight:f}}));function h(e,t,n){return Math.min(n,Math.max(t,e))}function g(e,t){return Number.isFinite(e)?h(e,0,1):t}function _(e,t){let n=g(e,D),r=g(t,O);return n<=r?[n,r]:[r,n]}function v(e,t){return e===`vertical`?t.clientX:t.clientY}function y(e,t){return e===`vertical`?t.width:t.height}function b(e,t){if(e===`vertical`){if(t===`ArrowLeft`)return-.02;if(t===`ArrowRight`)return A}if(e===`horizontal`){if(t===`ArrowUp`)return-.02;if(t===`ArrowDown`)return A}return null}function x(e,t){return t===`start`?0:t===`end`?1:e}function S({direction:e,initial:t,min:n,max:r,collapsedPane:i}){let[a,o]=_(n,r),s=(0,T.useRef)(null),c=(0,T.useRef)(null),l=(0,T.useRef)(null),u=(0,T.useRef)(null),d=(0,T.useRef)(null),f=(0,T.useRef)(null),p=(0,T.useRef)(0),m=(0,T.useRef)(h(g(t,k),a,o)),S=(0,T.useRef)(t),[C,w]=(0,T.useState)(()=>h(g(t,k),a,o)),E=(0,T.useRef)(C),D=(0,T.useCallback)(e=>{E.current=e,c.current?.style.setProperty(`flex-basis`,`${x(e,i)*100}%`),l.current?.setAttribute(`aria-valuenow`,`${Math.round(e*100)}`)},[i]),O=()=>{if(f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),d.current===null)return E.current;let e=d.current;return d.current=null,D(e),e},A=e=>{d.current=e,f.current===null&&(f.current=requestAnimationFrame(()=>{f.current=null,d.current!==null&&D(d.current)}))},j=()=>{u.current?.(),u.current=null},M=e=>{O(),w(h(e,a,o))};return(0,T.useLayoutEffect)(()=>{D(C)},[D,C]),(0,T.useEffect)(()=>{w(e=>{let n=S.current!==t;return S.current=t,h(n?g(t,k):e,a,o)})},[t,a,o]),(0,T.useEffect)(()=>()=>{j(),f.current!==null&&cancelAnimationFrame(f.current)},[]),{containerRef:s,topLeftRef:c,separatorRef:l,ratio:C,minRatio:a,maxRatio:o,handleSeparatorPointerDown:t=>{if(t.button!==0)return;t.preventDefault();let n=s.current;if(!n)return;j();try{t.currentTarget.setPointerCapture?.(t.pointerId)}catch{}p.current=v(e,t),m.current=E.current;let r=t=>{let r=y(e,n.getBoundingClientRect());if(r<=0)return;let i=v(e,t)-p.current,s=h(m.current+i/r,a,o);A(s)},i=()=>{j(),w(O())};u.current=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,i),document.removeEventListener(`pointercancel`,i)},document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,i),document.addEventListener(`pointercancel`,i)},handleSeparatorKeyDown:t=>{let n=b(e,t.key);if(n!==null){t.preventDefault(),M(E.current+n);return}if(t.key===`Home`){t.preventDefault(),M(a);return}t.key===`End`&&(t.preventDefault(),M(o))}}}function C({className:e,direction:t,left:n,right:r,collapsedPane:i,logic:o}){let{containerRef:s,topLeftRef:c,separatorRef:l,ratio:u,minRatio:d,maxRatio:f,handleSeparatorPointerDown:m,handleSeparatorKeyDown:h}=o,g=x(u,i),_=i===`start`,v=i===`end`,y=i===null;return(0,E.jsxs)(`div`,{ref:s,className:a(p.splitter,p[t],e),children:[(0,E.jsx)(`div`,{ref:c,className:p.topLeft,style:{flexBasis:`${g*100}%`},hidden:_,children:n}),(0,E.jsx)(`div`,{ref:l,hidden:!y,role:`separator`,"aria-orientation":t===`vertical`?`vertical`:`horizontal`,"aria-valuemin":Math.round(d*100),"aria-valuemax":Math.round(f*100),"aria-valuenow":Math.round(u*100),tabIndex:y?0:-1,onPointerDown:m,onKeyDown:h,className:p.separator}),(0,E.jsx)(`div`,{className:p.bottomRight,hidden:v,children:r})]})}function w({direction:e=`vertical`,initial:t=k,min:n=D,max:r=O,className:i,collapsedPane:a=null,children:o}){let[s,c]=T.Children.toArray(o),l=S({direction:e,initial:t,min:n,max:r,collapsedPane:a});return c?(0,E.jsx)(C,{className:i,direction:e,left:s,right:c,collapsedPane:a,logic:l}):s}var T,E,D,O,k,A,j=n((()=>{T=t(r(),1),o(),m(),E=i(),D=.1,O=.9,k=.7,A=.02,w.__docgenInfo={description:``,methods:[],displayName:`Splitter`,props:{direction:{defaultValue:{value:`"vertical"`,computed:!1},required:!1},initial:{defaultValue:{value:`0.7`,computed:!1},required:!1},min:{defaultValue:{value:`0.1`,computed:!1},required:!1},max:{defaultValue:{value:`0.9`,computed:!1},required:!1},collapsedPane:{defaultValue:{value:`null`,computed:!1},required:!1}}}})),M=e({Basic:()=>B,Constrained:()=>U,Horizontal:()=>V,NestedFourPanels:()=>H,__namedExportsOrder:()=>W,default:()=>z});function N({children:e}){return(0,R.jsx)(`div`,{style:{height:490},children:e})}function P({title:e,description:t,items:n=[]}){return(0,R.jsxs)(`div`,{style:{height:`100%`,padding:`var(--space-md)`,borderRadius:`var(--radius-md)`,border:`var(--border)`,display:`grid`,alignContent:`start`,gap:`var(--space-md)`},className:`scrollable`,children:[(0,R.jsxs)(`div`,{children:[(0,R.jsx)(`h2`,{children:e}),(0,R.jsx)(`p`,{children:t})]}),n.length>0&&(0,R.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:n.map(e=>(0,R.jsx)(`div`,{style:{padding:`var(--space-sm) var(--space-md)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-1)`},children:e},e))})]})}function F(e){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{...e,children:[(0,R.jsx)(P,{title:`Навигация`,description:`Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.`,items:[`Раздел 1`,`Раздел 2`,`Раздел 3`,`Раздел 4`]}),(0,R.jsx)(P,{title:`Рабочая область`,description:`Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.`,items:[`Текущий документ`,`История изменений`,`Комментарии`,`Связанные объекты`,`Параметры отображения`]})]})})}function I(){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{initial:.48,min:.25,max:.75,children:[(0,R.jsxs)(w,{direction:`horizontal`,initial:.58,min:.25,max:.75,children:[(0,R.jsx)(P,{title:`Список`,description:`Верхняя левая панель может держать навигацию или результат поиска.`,items:[`Поиск`,`Фильтр по статусу`,`Группы`,`Быстрые действия`]}),(0,R.jsx)(P,{title:`Подробности`,description:`Нижняя левая панель подходит для связанного контента по выбранному элементу.`,items:[`Свойства`,`Ответственный`,`Теги`,`Контекст`]})]}),(0,R.jsxs)(w,{direction:`horizontal`,initial:.36,min:.2,max:.8,children:[(0,R.jsx)(P,{title:`Превью`,description:`Верхняя правая панель может содержать документ, схему, карту или live-просмотр.`,items:[`Предпросмотр файла`,`Масштаб 100%`,`Слой подсветки`]}),(0,R.jsx)(P,{title:`Журнал`,description:`Нижняя правая панель часто используется для событий, логов или вспомогательных данных.`,items:[`10:31 Импорт завершён`,`10:34 Индексация`,`10:36 Синхронизация`,`10:38 Проверка целостности`]})]})]})})}function L(e){return(0,R.jsx)(N,{children:(0,R.jsxs)(w,{...e,children:[(0,R.jsx)(P,{title:`Фиксированные ограничения`,description:"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",items:[`Нажмите на разделитель`,`Используйте стрелки`,`Home = минимум`,`End = максимум`]}),(0,R.jsx)(P,{title:`Проверка доступности`,description:`Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.`,items:[`ArrowLeft / ArrowRight`,`ArrowUp / ArrowDown`,`Перетаскивание мышью`,`Перетаскивание на тач-устройстве`]})]})})}var R,z,B,V,H,U,W,G=n((()=>{j(),R=i(),z={title:`Shared/UI/Splitter`,component:w,parameters:{atomicCanvas:!0,layout:`padded`},args:{direction:`vertical`,initial:.45,min:.15,max:.85},argTypes:{direction:{description:`Направление разделения: вертикальное по ширине или горизонтальное по высоте.`,control:`inline-radio`,options:[`vertical`,`horizontal`]},initial:{description:`Начальная доля первой панели в диапазоне от 0 до 1.`,control:{type:`range`,min:0,max:1,step:.01}},min:{description:`Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.`,control:{type:`range`,min:0,max:1,step:.01}},max:{description:"Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.",control:{type:`range`,min:0,max:1,step:.01}},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},children:{description:`Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.`,control:!1}}},B={name:`Две панели`,render:e=>(0,R.jsx)(F,{...e})},V={name:`Горизонтальное разделение`,render:e=>(0,R.jsx)(F,{...e}),args:{direction:`horizontal`,initial:.55}},H={name:`Четыре панели через вложенность`,render:()=>(0,R.jsx)(I,{})},U={name:`Ограничения и клавиатура`,render:e=>(0,R.jsx)(L,{...e}),args:{initial:.35,min:.25,max:.55}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  name: "Две панели",
+  render: args => <TwoPaneLayout {...args} />
+}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  name: "Горизонтальное разделение",
+  render: args => <TwoPaneLayout {...args} />,
+  args: {
+    direction: "horizontal",
+    initial: 0.55
+  }
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  name: "Четыре панели через вложенность",
+  render: () => <NestedFourPaneLayout />
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  name: "Ограничения и клавиатура",
+  render: args => <ConstrainedLayout {...args} />,
+  args: {
+    initial: 0.35,
+    min: 0.25,
+    max: 0.55
+  }
+}`,...U.parameters?.docs?.source}}},W=[`Basic`,`Horizontal`,`NestedFourPanels`,`Constrained`]}));G();export{B as Basic,U as Constrained,V as Horizontal,H as NestedFourPanels,W as __namedExportsOrder,z as default,G as n,M as t};

package/storybook-static/assets/{StateSelect-ClrBKHfD.js → StateSelect-vSXP1PRc.js}

@@ -1,12 +1,12 @@
-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-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{Controlled as p,PaletteOnly as m,WithMeta as h,n as g,t as _}from"./StateSelect.stories-DtpIwsdv.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
-`,(0,b.jsx)(c,{children:`StateSelect`}),`
-`,(0,b.jsx)(i,{children:`Специализированный select для выбора визуального статуса или семантического состояния`}),`
-`,(0,b.jsx)(o.p,{children:`StateSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{Controlled as p,PaletteOnly as m,WithMeta as h,n as g,t as _}from"./StateSelect.stories-2Mxg7JsZ.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(l,{children:`StateSelect`}),`
+`,(0,b.jsx)(a,{children:`Специализированный select для выбора визуального статуса или семантического состояния`}),`
+`,(0,b.jsx)(t.p,{children:`StateSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии.`}),`
-`,(0,b.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(u,{}),`
-`,(0,b.jsx)(n,{of:p}),`
-`,(0,b.jsx)(o.pre,{children:(0,b.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+`,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,b.jsx)(d,{}),`
+`,(0,b.jsx)(r,{of:p}),`
+`,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { StateSelect } from "@/shared/ui";
 
@@ -16,21 +16,21 @@ export function Example() {
 	return <StateSelect label="Состояние" value={value} onChange={setValue} />;
 }
 `})}),`
-`,(0,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,b.jsxs)(o.ul,{children:[`
-`,(0,b.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,b.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,b.jsxs)(t.ul,{children:[`
+`,(0,b.jsx)(t.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
 `]}),`
-`,(0,b.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,b.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
-`,(0,b.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,b.jsx)(l,{of:p}),`
-`,(0,b.jsx)(o.h3,{id:`кастомизация-подписей-и-иконок-состояний`,children:`Кастомизация подписей и иконок состояний`}),`
-`,(0,b.jsx)(o.p,{children:`Кастомизация подписей и иконок состояний.`}),`
-`,(0,b.jsx)(l,{of:h}),`
-`,(0,b.jsx)(o.h3,{id:`ограниченный-набор-доступных-состояний`,children:`Ограниченный набор доступных состояний`}),`
-`,(0,b.jsx)(o.p,{children:`Ограниченный набор доступных состояний.`}),`
-`,(0,b.jsx)(l,{of:m}),`
-`,(0,b.jsx)(o.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(s,{of:_}),`
-`,(0,b.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,b.jsx)(r,{includePrimary:!1})]})}function y(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,b.jsx)(n,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=d(),f(),o(),g()}))();export{y as default};
+`,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,b.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,b.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,b.jsx)(u,{of:p}),`
+`,(0,b.jsx)(t.h3,{id:`кастомизация-подписей-и-иконок-состояний`,children:`Кастомизация подписей и иконок состояний`}),`
+`,(0,b.jsx)(t.p,{children:`Кастомизация подписей и иконок состояний.`}),`
+`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(t.h3,{id:`ограниченный-набор-доступных-состояний`,children:`Ограниченный набор доступных состояний`}),`
+`,(0,b.jsx)(t.p,{children:`Ограниченный набор доступных состояний.`}),`
+`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,b.jsx)(i,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=t(),f(),s(),g()}))();export{y as default};

package/storybook-static/assets/{StateSelect.stories-DtpIwsdv.js → StateSelect.stories-2Mxg7JsZ.js}

@@ -1,7 +1,7 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-DKOsD-4R.js";import{R as s,ct as c,it as l,ot as u,t as d,u as f}from"./lucide-react-DiTL2FZl.js";import{d as p,n as m,t as h}from"./formatters-Br290Dmy.js";import{t as g}from"./Select-C5DH0hMi.js";import{t as _}from"./select-Dcb4X2qB.js";var v,y,b,x,S,C,w,T,E,D,O,k,A=n((()=>{v=`p4nQdZ`,y=`_94tg5v`,b=`HyK7Zs`,x=`Mm4hrB`,S=`clxxBQ`,C=`_5pJ7o-`,w=`VV6hKN`,T=`cuQNP0`,E=`w7nIOT`,D=`ed-Afj`,O=`Lbxloe`,k={button:v,valueContainer:y,swatch:b,optionsPalette:x,optionsDetailed:S,option:C,optionPalette:w,optionDetailed:T,optionMeta:E,optionMetaIcon:D,optionMetaLabel:O}}));function j({state:e,className:t}){return(0,R.jsx)(`span`,{className:a(k.swatch,t),"data-empty":e===`none`?``:void 0,style:{"--state-color":p[e]}})}function M(e){return!!(e?.icon||e?.label)}function N(e,t){return typeof t?.label==`string`&&t.label.trim()?t.label:e||`empty`}function P(e){return M(e)?(0,R.jsxs)(`span`,{className:k.optionMeta,children:[e?.icon?(0,R.jsx)(`span`,{className:k.optionMetaIcon,children:e.icon}):null,e?.label?(0,R.jsx)(`span`,{className:k.optionMetaLabel,children:e.label}):null]}):null}function F(e,t){return(0,R.jsxs)(`div`,{className:k.valueContainer,children:[(0,R.jsx)(j,{state:e}),P(t)]})}function I({label:e,description:t,disabled:n,placeholder:r,size:i,value:o,onChange:s,options:c=m,stateMeta:l,className:u,clearable:d}){let f=(0,L.useMemo)(()=>Array.from(new Set(c)),[c]),p=f.some(e=>M(l?.[e]));return(0,R.jsx)(g,{label:e,description:t,disabled:n,placeholder:r,size:i,value:o,onChange:s,options:f,className:u,clearable:d,getOptionKey:e=>e||`__empty_state__`,getOptionLabel:e=>l?.[e]?.label??e,getOptionAriaLabel:e=>N(e,l?.[e]),renderValue:e=>F(e,l?.[e]),renderOption:e=>(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(j,{state:e}),p?P(l?.[e]):null]}),buttonClassName:k.button,optionsContentClassName:a(p?k.optionsDetailed:k.optionsPalette),getOptionClassName:()=>a(k.option,p?k.optionDetailed:k.optionPalette)})}var L,R,z=n((()=>{L=t(r(),1),h(),o(),_(),A(),R=i(),I.__docgenInfo={description:`Специализированный селект для выбора цветового или статусного состояния. Используется там, где значению соответствует визуальный swatch.`,methods:[],displayName:`StateSelect`,props:{placeholder:{required:!1,tsType:{name:`string`},description:``},options:{required:!1,tsType:{name:`unknown`},description:``,defaultValue:{value:`DEFAULT_VALUE_STATES`,computed:!0}},stateMeta:{required:!1,tsType:{name:`Partial`,elements:[{name:`Record`,elements:[{name:`State`},{name:`signature`,type:`object`,raw:`{
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{at as r,d as i,lt as a,n as o,pn as s,st as c,t as l,z as u}from"./iframe-NOj5DEP4.js";import{a as d,i as f}from"./utils-C5_R17vJ.js";import{d as p,n as m,t as h}from"./formatters-B2V6HAWH.js";import{t as g}from"./Select-DbumJ08V.js";import{t as _}from"./select-C1H_K5pE.js";var v,y,b,x,S,C,w,T,E,D,O,k,A=n((()=>{v=`p4nQdZ`,y=`_94tg5v`,b=`HyK7Zs`,x=`Mm4hrB`,S=`clxxBQ`,C=`_5pJ7o-`,w=`VV6hKN`,T=`cuQNP0`,E=`w7nIOT`,D=`ed-Afj`,O=`Lbxloe`,k={button:v,valueContainer:y,swatch:b,optionsPalette:x,optionsDetailed:S,option:C,optionPalette:w,optionDetailed:T,optionMeta:E,optionMetaIcon:D,optionMetaLabel:O}}));function j({state:e,className:t}){return(0,R.jsx)(`span`,{className:d(k.swatch,t),"data-empty":e===`none`?``:void 0,style:{"--state-color":p[e]}})}function M(e){return!!(e?.icon||e?.label)}function N(e,t){return typeof t?.label==`string`&&t.label.trim()?t.label:e||`empty`}function P(e){return M(e)?(0,R.jsxs)(`span`,{className:k.optionMeta,children:[e?.icon?(0,R.jsx)(`span`,{className:k.optionMetaIcon,children:e.icon}):null,e?.label?(0,R.jsx)(`span`,{className:k.optionMetaLabel,children:e.label}):null]}):null}function F(e,t){return(0,R.jsxs)(`div`,{className:k.valueContainer,children:[(0,R.jsx)(j,{state:e}),P(t)]})}function I({label:e,description:t,disabled:n,placeholder:r,size:i,value:a,onChange:o,options:s=m,stateMeta:c,className:l,clearable:u}){let f=(0,L.useMemo)(()=>Array.from(new Set(s)),[s]),p=f.some(e=>M(c?.[e]));return(0,R.jsx)(g,{label:e,description:t,disabled:n,placeholder:r,size:i,value:a,onChange:o,options:f,className:l,clearable:u,getOptionKey:e=>e||`__empty_state__`,getOptionLabel:e=>c?.[e]?.label??e,getOptionAriaLabel:e=>N(e,c?.[e]),renderValue:e=>F(e,c?.[e]),renderOption:e=>(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(j,{state:e}),p?P(c?.[e]):null]}),buttonClassName:k.button,optionsContentClassName:d(p?k.optionsDetailed:k.optionsPalette),getOptionClassName:()=>d(k.option,p?k.optionDetailed:k.optionPalette)})}var L,R,z=n((()=>{L=t(s(),1),h(),f(),_(),A(),R=l(),I.__docgenInfo={description:`Специализированный селект для выбора цветового или статусного состояния. Используется там, где значению соответствует визуальный swatch.`,methods:[],displayName:`StateSelect`,props:{placeholder:{required:!1,tsType:{name:`string`},description:``},options:{required:!1,tsType:{name:`unknown`},description:``,defaultValue:{value:`DEFAULT_VALUE_STATES`,computed:!0}},stateMeta:{required:!1,tsType:{name:`Partial`,elements:[{name:`Record`,elements:[{name:`State`},{name:`signature`,type:`object`,raw:`{
 	label?: ReactNode;
 	icon?: ReactNode;
-}`,signature:{properties:[{key:`label`,value:{name:`ReactNode`,required:!1}},{key:`icon`,value:{name:`ReactNode`,required:!1}}]}}],raw:`Record<State, StateMeta>`}],raw:`Partial<Record<State, StateMeta>>`},description:``},className:{required:!1,tsType:{name:`string`},description:``},clearable:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}})),B=e({Controlled:()=>W,PaletteOnly:()=>K,WithMeta:()=>G,__namedExportsOrder:()=>q,default:()=>U}),V,H,U,W,G,K,q,J=n((()=>{V=t(r(),1),d(),z(),H=i(),U={title:`Shared/UI/StateSelect`,component:I,args:{label:`Состояние`,description:`Выберите визуальный статус.`,placeholder:`Выберите значение`,value:`information`,onChange:()=>{},disabled:!1,size:`md`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля выбора состояния.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда значение не выбрано.`,control:`text`},value:{description:`Текущее состояние.`,control:`select`,options:[``,`none`,`information`,`success`,`warning`,`error`]},onChange:{description:`Вызывается при выборе состояния.`,control:!1},options:{description:`Кастомный набор доступных состояний.`,control:!1},stateMeta:{description:`Кастомные иконки и подписи для значений.`,control:!1},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},W={render:e=>{let[t,n]=(0,V.useState)(`information`);return(0,H.jsx)(I,{...e,value:t,onChange:n})}},G={render:e=>{let[t,n]=(0,V.useState)(`warning`);return(0,H.jsx)(I,{...e,value:t,onChange:n,stateMeta:{none:{label:`Без статуса`,icon:(0,H.jsx)(u,{})},information:{label:`Инфо`,icon:(0,H.jsx)(s,{})},success:{label:`Успех`,icon:(0,H.jsx)(c,{})},warning:{label:`Предупреждение`,icon:(0,H.jsx)(f,{})},error:{label:`Ошибка`,icon:(0,H.jsx)(l,{})}}})},args:{value:`warning`}},K={render:e=>{let[t,n]=(0,V.useState)(`none`);return(0,H.jsx)(I,{...e,value:t,onChange:n,options:[`none`,`success`,`error`]})},args:{options:[`none`,`success`,`error`],value:`none`}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+}`,signature:{properties:[{key:`label`,value:{name:`ReactNode`,required:!1}},{key:`icon`,value:{name:`ReactNode`,required:!1}}]}}],raw:`Record<State, StateMeta>`}],raw:`Partial<Record<State, StateMeta>>`},description:``},className:{required:!1,tsType:{name:`string`},description:``},clearable:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}})),B=e({Controlled:()=>W,PaletteOnly:()=>K,WithMeta:()=>G,__namedExportsOrder:()=>q,default:()=>U}),V,H,U,W,G,K,q,J=n((()=>{V=t(s(),1),o(),z(),H=l(),U={title:`Shared/UI/StateSelect`,component:I,args:{label:`Состояние`,description:`Выберите визуальный статус.`,placeholder:`Выберите значение`,value:`information`,onChange:()=>{},disabled:!1,size:`md`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля выбора состояния.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда значение не выбрано.`,control:`text`},value:{description:`Текущее состояние.`,control:`select`,options:[``,`none`,`information`,`success`,`warning`,`error`]},onChange:{description:`Вызывается при выборе состояния.`,control:!1},options:{description:`Кастомный набор доступных состояний.`,control:!1},stateMeta:{description:`Кастомные иконки и подписи для значений.`,control:!1},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},W={render:e=>{let[t,n]=(0,V.useState)(`information`);return(0,H.jsx)(I,{...e,value:t,onChange:n})}},G={render:e=>{let[t,n]=(0,V.useState)(`warning`);return(0,H.jsx)(I,{...e,value:t,onChange:n,stateMeta:{none:{label:`Без статуса`,icon:(0,H.jsx)(c,{})},information:{label:`Инфо`,icon:(0,H.jsx)(u,{})},success:{label:`Успех`,icon:(0,H.jsx)(a,{})},warning:{label:`Предупреждение`,icon:(0,H.jsx)(i,{})},error:{label:`Ошибка`,icon:(0,H.jsx)(r,{})}}})},args:{value:`warning`}},K={render:e=>{let[t,n]=(0,V.useState)(`none`);return(0,H.jsx)(I,{...e,value:t,onChange:n,options:[`none`,`success`,`error`]})},args:{options:[`none`,`success`,`error`],value:`none`}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [value, setValue] = useState<State | undefined>("information");
     return <StateSelect {...args} value={value} onChange={setValue} />;

package/storybook-static/assets/Switch-Dhk6dRdu.js

@@ -0,0 +1,36 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-NOj5DEP4.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-DBO0IAf-.js";import{t as f}from"./mdx-react-shim-BgV0cHDR.js";import{BiState as p,Disabled as m,TriState as h,n as g,t as _}from"./Switch.stories-Bs1nsEqA.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(l,{children:`Switch`}),`
+`,(0,b.jsx)(a,{children:`Переключатель в виде слайдера для быстрых включений, отключений и tri-state сценариев`}),`
+`,(0,b.jsx)(t.p,{children:`Switch уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны заблокированные состояния.`}),`
+`,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,b.jsx)(d,{}),`
+`,(0,b.jsx)(r,{of:p}),`
+`,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Switch } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState(undefined);
+
+	return <Switch triState label="Автовыбор" value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,b.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,b.jsxs)(t.ul,{children:[`
+`,(0,b.jsx)(t.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`]}),`
+`,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,b.jsx)(t.h3,{id:`классический-двухсостоянный-режим`,children:`Классический двухсостоянный режим`}),`
+`,(0,b.jsx)(t.p,{children:`Классический двухсостоянный режим.`}),`
+`,(0,b.jsx)(u,{of:p}),`
+`,(0,b.jsx)(t.h3,{id:`трехсостояние-с-промежуточным-значением`,children:`Трехсостояние с промежуточным значением`}),`
+`,(0,b.jsx)(t.p,{children:`Трехсостояние с промежуточным значением.`}),`
+`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(t.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
+`,(0,b.jsx)(t.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
+`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,b.jsx)(i,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=t(),f(),s(),g()}))();export{y as default};

package/storybook-static/assets/Switch.stories-Bs1nsEqA.js

@@ -0,0 +1,26 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{Lt as r,lt as i,n as a,pn as o,t as s}from"./iframe-NOj5DEP4.js";import{a as c,i as l}from"./utils-C5_R17vJ.js";import{n as u,t as d}from"./ui.module-wFHXkJzp.js";var f,p,m,h,g,_=n((()=>{f=`Or5LYA`,p=`w0AMfA`,m=`P1x4lq`,h=`-ZVOZo`,g={switchWrapper:f,switch:`qge3io`,iconWrapper:p,auto:m,checked:h}}));function v(e){let{label:t,description:n,disabled:a,checkedIcon:o=(0,b.jsx)(i,{}),uncheckedIcon:s=(0,b.jsx)(r,{}),className:l,type:d,id:f,size:p,placeholder:m,onChange:h,value:_,triState:v,...x}=e,S=(0,y.useId)(),C=f??S,w=n?`${C}-description`:void 0,T=t?`${C}-label`:void 0,E=()=>{if(!e.triState){e.onChange(!e.value);return}if(e.value===void 0){e.onChange(!0);return}if(e.value===!0){e.onChange(!1);return}e.value===!1&&e.onChange(void 0)},D=typeof e.value==`boolean`?e.value:!1,O=e.triState&&typeof e.value!=`boolean`,k=x[`aria-label`]??(t?void 0:`Переключатель`);return(0,b.jsxs)(`div`,{className:c(u.uiElement,a&&u.disabled),"aria-disabled":a||void 0,children:[t&&(0,b.jsxs)(`div`,{id:T,className:u.uiLabel,children:[t,`:`]}),n&&(0,b.jsx)(`p`,{id:w,className:u.uiDescription,children:n}),(0,b.jsx)(`button`,{...x,id:C,type:d??`button`,role:`switch`,disabled:a,"aria-checked":D,"aria-describedby":w,"aria-labelledby":T,"aria-label":k,"aria-disabled":a,"data-ui":`switch`,"data-action":`toggle-switch`,onClick:E,className:c(u.uiInputControl,g.switchWrapper,l),children:(0,b.jsx)(`div`,{className:g.switch,"data-disabled":a||void 0,children:O?(0,b.jsx)(`div`,{className:c(g.iconWrapper,g.auto,g.checked),children:`Auto`}):(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(`div`,{className:c(g.iconWrapper,!e.value&&g.checked),children:s}),(0,b.jsx)(`div`,{className:c(g.iconWrapper,e.value&&g.checked),children:o})]})})})]})}var y,b,x=n((()=>{y=t(o(),1),l(),a(),d(),_(),b=s(),v.__docgenInfo={description:`Переключатель boolean-состояния в виде слайдера. Подходит для быстрых настроек и включения/отключения опций.`,methods:[],displayName:`Switch`}})),S=e({BiState:()=>E,Disabled:()=>O,TriState:()=>D,__namedExportsOrder:()=>k,default:()=>T}),C,w,T,E,D,O,k,A=n((()=>{C=t(o(),1),x(),w=s(),T={title:`Shared/UI/Switch`,component:v,args:{label:`Режим обработки`,description:`Переключение состояния`,value:!1,onChange:()=>{},triState:!1,disabled:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок переключателя.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:"Текущее значение (`boolean` или `undefined` в tri-state).",control:!1},onChange:{description:`Вызывается при изменении состояния.`,control:!1},triState:{description:"Включает трехсостоянный режим (`undefined → true → false`).",control:`boolean`},checkedIcon:{description:"Кастомная иконка для состояния `true`.",control:!1},uncheckedIcon:{description:"Кастомная иконка для состояния `false`.",control:!1},disabled:{description:`Блокирует переключение.`,control:`boolean`}}},E={render:e=>{let[t,n]=(0,C.useState)(!1);return(0,w.jsx)(v,{...e,value:t,onChange:n,triState:!1})}},D={render:e=>{let[t,n]=(0,C.useState)(void 0);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:8},children:[(0,w.jsx)(v,{...e,value:t,onChange:n,triState:!0}),(0,w.jsxs)(`div`,{children:[`Текущее значение: `,String(t)]})]})},args:{triState:!0,value:void 0}},O={args:{disabled:!0,value:!0}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState(false);
+    return <Switch {...args} value={value} onChange={setValue} triState={false} />;
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<boolean | undefined>(undefined);
+    return <div style={{
+      display: "grid",
+      gap: 8
+    }}>
+                <Switch {...args} value={value} onChange={setValue} triState />
+                <div>Текущее значение: {String(value)}</div>
+            </div>;
+  },
+  args: {
+    triState: true,
+    value: undefined
+  }
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: true
+  }
+}`,...O.parameters?.docs?.source}}},k=[`BiState`,`TriState`,`Disabled`]}));A();export{E as BiState,O as Disabled,D as TriState,k as __namedExportsOrder,T as default,A as n,S as t};