@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.4

package/storybook-static/assets/Sortable.stories-yz3c5EhY.js

@@ -0,0 +1,141 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{i as r,n as i,r as a,t as o}from"./sortable-dNWaObUX.js";import{n as s}from"./iframe-DaN-XFub.js";var c=t({Basic:()=>y,DisabledItems:()=>S,GridCards:()=>x,HandleOnly:()=>C,HorizontalList:()=>b,NestedContainers:()=>w,SortablePreview:()=>d,__namedExportsOrder:()=>T,default:()=>v});function l(e,t,n){let r=[...e],[i]=r.splice(t,1);return r.splice(n,0,i),r}function u(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 d(e){let[t,n]=(0,f.useState)(e.initialItems),r=new Set(e.disabledIds??[]);return(0,p.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,p.jsx)(o.Root,{onDragEnd:r=>{let i=a({event:r,items:{[e.containerId]:t}});i&&n(e=>l(e,i.fromIndex,i.toIndex))},children:(0,p.jsx)(o.Container,{containerId:e.containerId,items:t,layout:e.layout,children:(0,p.jsx)(`div`,{style:u(e.layout),children:t.map(t=>(0,p.jsxs)(o.Item,{id:t,disabled:r.has(t),style:{...m,minWidth:e.itemWidth},children:[(0,p.jsx)(o.DragHandle,{title:`Перетащить ${t}`}),(0,p.jsx)(`div`,{children:t})]},t))})})}),(0,p.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:`Порядок элементов изменяется локально в рамках story.`})]})}var f,p,m,h,g,_,v,y,b,x,S,C,w,T;function E(){return(E=e((()=>{f=n(),i(),r(),p=s(),m={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)`},h=[`Alpha`,`Bravo`,`Charlie`,`Delta`],g=[`Фильтры`,`Графики`,`Сводка`,`История`],_=[`Карточка 1`,`Карточка 2`,`Карточка 3`,`Карточка 4`,`Карточка 5`,`Карточка 6`],v={title:`Shared/UI/Sortable`,component:d,args:{containerId:`sortable-demo`,layout:`vertical`,initialItems:h,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}}},y={},b={args:{containerId:`sortable-horizontal`,layout:`horizontal`,initialItems:g,itemWidth:`12rem`}},x={args:{containerId:`sortable-grid`,layout:`grid`,initialItems:_}},S={args:{containerId:`sortable-disabled`,layout:`vertical`,initialItems:h,disabledIds:[`Bravo`,`Delta`]}},C={args:{containerId:`sortable-handle-only`,layout:`vertical`,initialItems:[`Пункт 1`,`Пункт 2`,`Пункт 3`,`Пункт 4`]}},w={args:{containerId:`top`,layout:`vertical`,initialItems:[`Группа A`,`Группа B`]},render:()=>{let[e,t]=(0,f.useState)([`Группа A`,`Группа B`]),[n,r]=(0,f.useState)({"Группа A":[`A.1`,`A.2`,`A.3`],"Группа B":[`B.1`,`B.2`]});return(0,p.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,p.jsx)(o.Root,{onDragEnd:i=>{let o=a({event:i,items:{top:e,...Object.fromEntries(e.map(e=>[`parent:${e}`,n[e]??[]]))}});if(!o)return;if(o.containerId===`top`){t(e=>l(e,o.fromIndex,o.toIndex));return}let s=String(o.containerId).slice(7);r(e=>({...e,[s]:l(e[s]??[],o.fromIndex,o.toIndex)}))},children:(0,p.jsx)(o.Container,{containerId:`top`,items:e,children:(0,p.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-md)`},children:e.map(e=>(0,p.jsxs)(o.Item,{id:e,style:{...m,gridTemplateColumns:`var(--control-height) 1fr`,alignItems:`start`},children:[(0,p.jsx)(o.DragHandle,{title:`Перетащить ${e}`}),(0,p.jsxs)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:[(0,p.jsx)(`strong`,{children:e}),(0,p.jsx)(o.Container,{containerId:`parent:${e}`,items:n[e]??[],children:(0,p.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-xs)`},children:(n[e]??[]).map(e=>(0,p.jsxs)(o.Item,{id:e,style:{...m,background:`var(--surface-1)`},children:[(0,p.jsx)(o.DragHandle,{title:`Перетащить ${e}`}),(0,p.jsx)(`div`,{children:e})]},e))})})]})]},e))})})}),(0,p.jsx)(`div`,{style:{fontSize:14,opacity:.8},children:"Вложенные контейнеры сортируются независимо и используют общий `Sortable.Root`."})]})}},d.__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:``}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`function SortablePreview(props: SortablePreviewProps) {
+  const [items, setItems] = useState(props.initialItems);
+  const disabledIdSet = new Set(props.disabledIds ?? []);
+  return <div style={{
+    display: "grid",
+    gap: 12
+  }}>
+            <Sortable.Root onDragEnd={event => {
+      const reorder = getSortableReorderResult({
+        event,
+        items: {
+          [props.containerId]: items
+        }
+      });
+      if (!reorder) return;
+      setItems(prev => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);
+    }}>
+                <Sortable.Container containerId={props.containerId} items={items} layout={props.layout}>
+                    <div style={getContainerStyle(props.layout)}>
+                        {items.map(item => <Sortable.Item key={item} id={item} disabled={disabledIdSet.has(item)} style={{
+            ...itemStyle,
+            minWidth: props.itemWidth
+          }}>
+                                <Sortable.DragHandle title={\`Перетащить \${item}\`} />
+                                <div>{item}</div>
+                            </Sortable.Item>)}
+                    </div>
+                </Sortable.Container>
+            </Sortable.Root>
+
+            <div style={{
+      fontSize: 14,
+      opacity: 0.8
+    }}>Порядок элементов изменяется локально в рамках story.</div>
+        </div>;
+}`,...d.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-horizontal",
+    layout: "horizontal",
+    initialItems: horizontalItems,
+    itemWidth: "12rem"
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-grid",
+    layout: "grid",
+    initialItems: gridItems
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-disabled",
+    layout: "vertical",
+    initialItems: verticalItems,
+    disabledIds: ["Bravo", "Delta"]
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "sortable-handle-only",
+    layout: "vertical",
+    initialItems: ["Пункт 1", "Пункт 2", "Пункт 3", "Пункт 4"]
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    containerId: "top",
+    layout: "vertical",
+    initialItems: ["Группа A", "Группа B"]
+  },
+  render: () => {
+    const [topItems, setTopItems] = useState(["Группа A", "Группа B"]);
+    const [childItemsByGroup, setChildItemsByGroup] = useState<Record<string, string[]>>({
+      "Группа A": ["A.1", "A.2", "A.3"],
+      "Группа B": ["B.1", "B.2"]
+    });
+    return <div style={{
+      display: "grid",
+      gap: 12
+    }}>
+                <Sortable.Root onDragEnd={event => {
+        const reorder = getSortableReorderResult({
+          event,
+          items: {
+            top: topItems,
+            ...Object.fromEntries(topItems.map(item => [\`parent:\${item}\`, childItemsByGroup[item] ?? []]))
+          }
+        });
+        if (!reorder) return;
+        if (reorder.containerId === "top") {
+          setTopItems(prev => reorderItems(prev, reorder.fromIndex, reorder.toIndex) as string[]);
+          return;
+        }
+        const parentId = String(reorder.containerId).slice("parent:".length);
+        setChildItemsByGroup(prev => ({
+          ...prev,
+          [parentId]: reorderItems(prev[parentId] ?? [], reorder.fromIndex, reorder.toIndex) as string[]
+        }));
+      }}>
+                    <Sortable.Container containerId="top" items={topItems}>
+                        <div style={{
+            display: "grid",
+            gap: "var(--space-md)"
+          }}>
+                            {topItems.map(groupId => <Sortable.Item key={groupId} id={groupId} style={{
+              ...itemStyle,
+              gridTemplateColumns: "var(--control-height) 1fr",
+              alignItems: "start"
+            }}>
+                                    <Sortable.DragHandle title={\`Перетащить \${groupId}\`} />
+                                    <div style={{
+                display: "grid",
+                gap: "var(--space-sm)"
+              }}>
+                                        <strong>{groupId}</strong>
+                                        <Sortable.Container containerId={\`parent:\${groupId}\`} items={childItemsByGroup[groupId] ?? []}>
+                                            <div style={{
+                    display: "grid",
+                    gap: "var(--space-xs)"
+                  }}>
+                                                {(childItemsByGroup[groupId] ?? []).map(item => <Sortable.Item key={item} id={item} style={{
+                      ...itemStyle,
+                      background: "var(--surface-1)"
+                    }}>
+                                                        <Sortable.DragHandle title={\`Перетащить \${item}\`} />
+                                                        <div>{item}</div>
+                                                    </Sortable.Item>)}
+                                            </div>
+                                        </Sortable.Container>
+                                    </div>
+                                </Sortable.Item>)}
+                        </div>
+                    </Sortable.Container>
+                </Sortable.Root>
+
+                <div style={{
+        fontSize: 14,
+        opacity: 0.8
+      }}>
+                    Вложенные контейнеры сортируются независимо и используют общий \`Sortable.Root\`.
+                </div>
+            </div>;
+  }
+}`,...w.parameters?.docs?.source}}},T=[`SortablePreview`,`Basic`,`HorizontalList`,`GridCards`,`DisabledItems`,`HandleOnly`,`NestedContainers`]})))()}export{b as a,E as c,C as i,S as n,w as o,x as r,c as s,y as t};

package/storybook-static/assets/{Splitter-CfUVnAs7.js → Splitter-DVq6XBul.js}

@@ -1,10 +1,10 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.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-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Basic as p,Constrained as m,Horizontal as h,NestedFourPanels as g,n as _,t as v}from"./Splitter.stories-DJpFzZVJ.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:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Splitter.stories-CopPw1_p.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)(s,{of:p,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(u,{children:`Splitter`}),`
+`,(0,x.jsx)(o,{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)(f,{}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function Example() {
@@ -18,7 +18,7 @@ export function Example() {
 	);
 }
 `})}),`
-`,(0,x.jsx)(r,{of:p}),`
+`,(0,x.jsx)(i,{of:v}),`
 `,(0,x.jsx)(t.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
 `,(0,x.jsxs)(t.ul,{children:[`
 `,(0,x.jsx)(t.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
@@ -28,10 +28,10 @@ export function Example() {
 `]}),`
 `,(0,x.jsx)(t.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
 `,(0,x.jsx)(t.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
-`,(0,x.jsx)(u,{of:p}),`
+`,(0,x.jsx)(d,{of:v}),`
 `,(0,x.jsx)(t.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
 `,(0,x.jsx)(t.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
-`,(0,x.jsx)(u,{of:h}),`
+`,(0,x.jsx)(d,{of:_}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function HorizontalLayout() {
@@ -47,7 +47,7 @@ export function HorizontalLayout() {
 `})}),`
 `,(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)(d,{of:m}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@/shared/ui";
 
 export function FourPaneLayout() {
@@ -69,7 +69,7 @@ export function FourPaneLayout() {
 `})}),`
 `,(0,x.jsx)(t.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
 `,(0,x.jsx)(t.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
-`,(0,x.jsx)(u,{of:m}),`
+`,(0,x.jsx)(d,{of:h}),`
 `,(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`}),` не сможет корректно распределить пространство по вертикали.`]}),`
@@ -78,6 +78,6 @@ export function FourPaneLayout() {
 `,(0,x.jsx)(t.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
 `]}),`
 `,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,x.jsx)(c,{of:v}),`
+`,(0,x.jsx)(l,{of:p}),`
 `,(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};
+`,(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};

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

@@ -0,0 +1,22 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-DaN-XFub.js";import{a as i,i as a}from"./utils-DUM89eIj.js";var o,s,c,l,u,d,f;function p(){return(p=e((()=>{o=`wAovST`,s=`QVVMwe`,c=`H43AJ8`,l=`pgo8sW`,u=`_8fCvqA`,d=`t6RFcI`,f={splitter:o,vertical:s,separator:c,horizontal:l,topLeft:u,bottomRight:d}})))()}function m(e,t,n){return Math.min(n,Math.max(t,e))}function h(e,t){return Number.isFinite(e)?m(e,0,1):t}function g(e,t){let n=h(e,E),r=h(t,D);return n<=r?[n,r]:[r,n]}function _(e,t){return e===`vertical`?t.clientX:t.clientY}function v(e,t){return e===`vertical`?t.width:t.height}function y(e,t){if(e===`vertical`){if(t===`ArrowLeft`)return-.02;if(t===`ArrowRight`)return k}if(e===`horizontal`){if(t===`ArrowUp`)return-.02;if(t===`ArrowDown`)return k}return null}function b(e,t){return t===`start`?0:t===`end`?1:e}function x({direction:e,initial:t,min:n,max:r,collapsedPane:i}){let[a,o]=g(n,r),s=(0,w.useRef)(null),c=(0,w.useRef)(null),l=(0,w.useRef)(null),u=(0,w.useRef)(null),d=(0,w.useRef)(null),f=(0,w.useRef)(null),p=(0,w.useRef)(0),x=(0,w.useRef)(m(h(t,O),a,o)),S=(0,w.useRef)(t),[C,T]=(0,w.useState)(()=>m(h(t,O),a,o)),E=(0,w.useRef)(C),D=(0,w.useCallback)(e=>{E.current=e,c.current?.style.setProperty(`flex-basis`,`${b(e,i)*100}%`),l.current?.setAttribute(`aria-valuenow`,`${Math.round(e*100)}`)},[i]),k=()=>{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=>{k(),T(m(e,a,o))};return(0,w.useLayoutEffect)(()=>{D(C)},[D,C]),(0,w.useEffect)(()=>{T(e=>{let n=S.current!==t;return S.current=t,m(n?h(t,O):e,a,o)})},[t,a,o]),(0,w.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=_(e,t),x.current=E.current;let r=t=>{let r=v(e,n.getBoundingClientRect());if(r<=0)return;let i=_(e,t)-p.current,s=m(x.current+i/r,a,o);A(s)},i=()=>{j(),T(k())};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=y(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 S({className:e,direction:t,left:n,right:r,collapsedPane:a,logic:o}){let{containerRef:s,topLeftRef:c,separatorRef:l,ratio:u,minRatio:d,maxRatio:p,handleSeparatorPointerDown:m,handleSeparatorKeyDown:h}=o,g=b(u,a),_=a===`start`,v=a===`end`,y=a===null;return(0,T.jsxs)(`div`,{ref:s,className:i(f.splitter,f[t],e),children:[(0,T.jsx)(`div`,{ref:c,className:f.topLeft,style:{flexBasis:`${g*100}%`},hidden:_,children:n}),(0,T.jsx)(`div`,{ref:l,hidden:!y,role:`separator`,"aria-orientation":t===`vertical`?`vertical`:`horizontal`,"aria-valuemin":Math.round(d*100),"aria-valuemax":Math.round(p*100),"aria-valuenow":Math.round(u*100),tabIndex:y?0:-1,onPointerDown:m,onKeyDown:h,className:f.separator}),(0,T.jsx)(`div`,{className:f.bottomRight,hidden:v,children:r})]})}function C({direction:e=`vertical`,initial:t=O,min:n=E,max:r=D,className:i,collapsedPane:a=null,children:o}){let[s,c]=w.Children.toArray(o),l=x({direction:e,initial:t,min:n,max:r,collapsedPane:a});return c?(0,T.jsx)(S,{className:i,direction:e,left:s,right:c,collapsedPane:a,logic:l}):s}var w,T,E,D,O,k;function A(){return(A=e((()=>{w=n(),a(),p(),T=r(),E=.1,D=.9,O=.7,k=.02,C.__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}}}})))()}var j=t({Basic:()=>z,Constrained:()=>H,Horizontal:()=>B,NestedFourPanels:()=>V,__namedExportsOrder:()=>U,default:()=>R});function M({children:e}){return(0,L.jsx)(`div`,{style:{height:490},children:e})}function N({title:e,description:t,items:n=[]}){return(0,L.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,L.jsxs)(`div`,{children:[(0,L.jsx)(`h2`,{children:e}),(0,L.jsx)(`p`,{children:t})]}),n.length>0&&(0,L.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:n.map(e=>(0,L.jsx)(`div`,{style:{padding:`var(--space-sm) var(--space-md)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-1)`},children:e},e))})]})}function P(e){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{...e,children:[(0,L.jsx)(N,{title:`Навигация`,description:`Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.`,items:[`Раздел 1`,`Раздел 2`,`Раздел 3`,`Раздел 4`]}),(0,L.jsx)(N,{title:`Рабочая область`,description:`Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.`,items:[`Текущий документ`,`История изменений`,`Комментарии`,`Связанные объекты`,`Параметры отображения`]})]})})}function F(){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{initial:.48,min:.25,max:.75,children:[(0,L.jsxs)(C,{direction:`horizontal`,initial:.58,min:.25,max:.75,children:[(0,L.jsx)(N,{title:`Список`,description:`Верхняя левая панель может держать навигацию или результат поиска.`,items:[`Поиск`,`Фильтр по статусу`,`Группы`,`Быстрые действия`]}),(0,L.jsx)(N,{title:`Подробности`,description:`Нижняя левая панель подходит для связанного контента по выбранному элементу.`,items:[`Свойства`,`Ответственный`,`Теги`,`Контекст`]})]}),(0,L.jsxs)(C,{direction:`horizontal`,initial:.36,min:.2,max:.8,children:[(0,L.jsx)(N,{title:`Превью`,description:`Верхняя правая панель может содержать документ, схему, карту или live-просмотр.`,items:[`Предпросмотр файла`,`Масштаб 100%`,`Слой подсветки`]}),(0,L.jsx)(N,{title:`Журнал`,description:`Нижняя правая панель часто используется для событий, логов или вспомогательных данных.`,items:[`10:31 Импорт завершён`,`10:34 Индексация`,`10:36 Синхронизация`,`10:38 Проверка целостности`]})]})]})})}function I(e){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{...e,children:[(0,L.jsx)(N,{title:`Фиксированные ограничения`,description:"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",items:[`Нажмите на разделитель`,`Используйте стрелки`,`Home = минимум`,`End = максимум`]}),(0,L.jsx)(N,{title:`Проверка доступности`,description:`Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.`,items:[`ArrowLeft / ArrowRight`,`ArrowUp / ArrowDown`,`Перетаскивание мышью`,`Перетаскивание на тач-устройстве`]})]})})}var L,R,z,B,V,H,U;function W(){return(W=e((()=>{A(),L=r(),R={title:`Shared/UI/Splitter`,component:C,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}}},z={name:`Две панели`,render:e=>(0,L.jsx)(P,{...e})},B={name:`Горизонтальное разделение`,render:e=>(0,L.jsx)(P,{...e}),args:{direction:`horizontal`,initial:.55}},V={name:`Четыре панели через вложенность`,render:()=>(0,L.jsx)(F,{})},H={name:`Ограничения и клавиатура`,render:e=>(0,L.jsx)(I,{...e}),args:{initial:.35,min:.25,max:.55}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+  name: "Две панели",
+  render: args => <TwoPaneLayout {...args} />
+}`,...z.parameters?.docs?.source}}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  name: "Горизонтальное разделение",
+  render: args => <TwoPaneLayout {...args} />,
+  args: {
+    direction: "horizontal",
+    initial: 0.55
+  }
+}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  name: "Четыре панели через вложенность",
+  render: () => <NestedFourPaneLayout />
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  name: "Ограничения и клавиатура",
+  render: args => <ConstrainedLayout {...args} />,
+  args: {
+    initial: 0.35,
+    min: 0.25,
+    max: 0.55
+  }
+}`,...H.parameters?.docs?.source}}},U=[`Basic`,`Horizontal`,`NestedFourPanels`,`Constrained`]})))()}export{j as a,V as i,H as n,W as o,B as r,z as t};

package/storybook-static/assets/{StateSelect-h0i4M4vO.js → StateSelect-ojwXeKmx.js}

@@ -1,11 +1,11 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.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-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Controlled as p,PaletteOnly as m,WithMeta as h,n as g,t as _}from"./StateSelect.stories-Ch2Gzzmd.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 для выбора визуального статуса или семантического состояния`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.js";import{a as p,i as m,n as h,r as g,t as _}from"./StateSelect.stories-D46m5HNn.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)(s,{of:g,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(u,{children:`StateSelect`}),`
+`,(0,b.jsx)(o,{children:`Специализированный select для выбора визуального статуса или семантического состояния`}),`
 `,(0,b.jsx)(t.p,{children:`StateSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии.`}),`
 `,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(d,{}),`
-`,(0,b.jsx)(r,{of:p}),`
+`,(0,b.jsx)(f,{}),`
+`,(0,b.jsx)(i,{of:_}),`
 `,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { StateSelect } from "@/shared/ui";
@@ -23,14 +23,14 @@ export function Example() {
 `,(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)(d,{of:_}),`
 `,(0,b.jsx)(t.h3,{id:`кастомизация-подписей-и-иконок-состояний`,children:`Кастомизация подписей и иконок состояний`}),`
 `,(0,b.jsx)(t.p,{children:`Кастомизация подписей и иконок состояний.`}),`
-`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(d,{of:m}),`
 `,(0,b.jsx)(t.h3,{id:`ограниченный-набор-доступных-состояний`,children:`Ограниченный набор доступных состояний`}),`
 `,(0,b.jsx)(t.p,{children:`Ограниченный набор доступных состояний.`}),`
-`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(d,{of:h}),`
 `,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(l,{of:g}),`
 `,(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};
+`,(0,b.jsx)(a,{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;function x(){return(x=e((()=>{b=t(),r(),c(),p()})))()}x();export{y as default};

package/storybook-static/assets/StateSelect.stories-D46m5HNn.js

@@ -0,0 +1,47 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./circle-check-VtVMsaJJ.js";import{i as a,n as o,r as s,t as c}from"./info-Cirk1RKZ.js";import{n as l,t as u}from"./triangle-alert-B1Q28Bq9.js";import{i as d,n as f,r as p}from"./iframe-DaN-XFub.js";import{a as m,i as h}from"./utils-DUM89eIj.js";import{c as g,h as _,t as v}from"./formatters--mhLir82-v41eaI4a.js";import{n as y,t as b}from"./Select-X_O4M8Hi.js";var x,S;function C(){return(C=e((()=>{d(),x=[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M8 12h8`,key:`1wcyev`}]],S=p(`circle-minus`,x)})))()}var w,T,E,D,O,k,A,j,M,N,P,F;function I(){return(I=e((()=>{w=`p4nQdZ`,T=`_94tg5v`,E=`HyK7Zs`,D=`Mm4hrB`,O=`clxxBQ`,k=`_5pJ7o-`,A=`VV6hKN`,j=`cuQNP0`,M=`w7nIOT`,N=`ed-Afj`,P=`Lbxloe`,F={button:w,valueContainer:T,swatch:E,optionsPalette:D,optionsDetailed:O,option:k,optionPalette:A,optionDetailed:j,optionMeta:M,optionMetaIcon:N,optionMetaLabel:P}})))()}function L({state:e,className:t}){return(0,W.jsx)(`span`,{className:m(F.swatch,t),"data-empty":e===`none`?``:void 0,style:{"--state-color":g[e]}})}function R(e){return!!(e?.icon||e?.label)}function z(e,t){return typeof t?.label==`string`&&t.label.trim()?t.label:e||`empty`}function B(e){return R(e)?(0,W.jsxs)(`span`,{className:F.optionMeta,children:[e?.icon?(0,W.jsx)(`span`,{className:F.optionMetaIcon,children:e.icon}):null,e?.label?(0,W.jsx)(`span`,{className:F.optionMetaLabel,children:e.label}):null]}):null}function V(e,t){return(0,W.jsxs)(`div`,{className:F.valueContainer,children:[(0,W.jsx)(L,{state:e}),B(t)]})}function H({label:e,description:t,disabled:n,placeholder:r,size:i,value:a,onChange:o,options:s=v,stateMeta:c,className:l,clearable:u}){let d=(0,U.useMemo)(()=>Array.from(new Set(s)),[s]),f=d.some(e=>R(c?.[e])),p={getOptionKey:e=>e||`__empty_state__`,getOptionLabel:e=>c?.[e]?.label??e,getOptionAriaLabel:e=>z(e,c?.[e]),renderValue:e=>V(e,c?.[e]),renderOption:e=>(0,W.jsxs)(W.Fragment,{children:[(0,W.jsx)(L,{state:e}),f?B(c?.[e]):null]}),buttonClassName:F.button,optionsContentClassName:m(f?F.optionsDetailed:F.optionsPalette),getOptionClassName:()=>m(F.option,f?F.optionDetailed:F.optionPalette)};return(0,W.jsx)(b,{label:e,description:t,disabled:n,placeholder:r,size:i,value:a,onChange:o,options:d,className:l,clearable:u,...p})}var U,W;function G(){return(G=e((()=>{U=n(),_(),h(),y(),I(),W=f(),H.__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`]}})))()}var ee=t({Controlled:()=>Y,PaletteOnly:()=>Z,WithMeta:()=>X,__namedExportsOrder:()=>Q,default:()=>J}),K,q,J,Y,X,Z,Q;function $(){return($=e((()=>{K=n(),l(),r(),o(),C(),a(),G(),q=f(),J={title:`Shared/UI/StateSelect`,component:H,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`}}},Y={render:e=>{let[t,n]=(0,K.useState)(`information`);return(0,q.jsx)(H,{...e,value:t,onChange:n})}},X={render:e=>{let[t,n]=(0,K.useState)(`warning`);return(0,q.jsx)(H,{...e,value:t,onChange:n,stateMeta:{none:{label:`Без статуса`,icon:(0,q.jsx)(S,{})},information:{label:`Инфо`,icon:(0,q.jsx)(c,{})},success:{label:`Успех`,icon:(0,q.jsx)(i,{})},warning:{label:`Предупреждение`,icon:(0,q.jsx)(u,{})},error:{label:`Ошибка`,icon:(0,q.jsx)(s,{})}}})},args:{value:`warning`}},Z={render:e=>{let[t,n]=(0,K.useState)(`none`);return(0,q.jsx)(H,{...e,value:t,onChange:n,options:[`none`,`success`,`error`]})},args:{options:[`none`,`success`,`error`],value:`none`}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<State | undefined>("information");
+    return <StateSelect {...args} value={value} onChange={setValue} />;
+  }
+}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<State | undefined>("warning");
+    return <StateSelect {...args} value={value} onChange={setValue} stateMeta={{
+      none: {
+        label: "Без статуса",
+        icon: <MinusCircleIcon />
+      },
+      information: {
+        label: "Инфо",
+        icon: <InfoIcon />
+      },
+      success: {
+        label: "Успех",
+        icon: <CheckCircle2Icon />
+      },
+      warning: {
+        label: "Предупреждение",
+        icon: <AlertTriangleIcon />
+      },
+      error: {
+        label: "Ошибка",
+        icon: <XCircleIcon />
+      }
+    }} />;
+  },
+  args: {
+    value: "warning"
+  }
+}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<State | undefined>("none");
+    return <StateSelect {...args} value={value} onChange={setValue} options={["none", "success", "error"]} />;
+  },
+  args: {
+    options: ["none", "success", "error"],
+    value: "none"
+  }
+}`,...Z.parameters?.docs?.source}}},Q=[`Controlled`,`WithMeta`,`PaletteOnly`]})))()}export{$ as a,X as i,Z as n,ee as r,Y as t};

package/storybook-static/assets/StringToggle.stories-ByYMmlXl.js

@@ -0,0 +1,6 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n}from"./iframe-DaN-XFub.js";import{n as r,t as i}from"./Toggle-OlKw8qaK.js";function a(e,t){return typeof e==`string`?e:t}var o,s;function c(){return(c=e((()=>{o=`true`,s=`false`})))()}function l({value:e,onChange:t,checkedValue:n,uncheckedValue:r,defaultChecked:c,...l}){let d=a(n,o),f=a(r,s),p=e===d;return(0,u.jsx)(i,{...l,value:p,onChange:e=>t(e?d:f)})}var u;function d(){return(d=e((()=>{c(),r(),u=n(),l.__docgenInfo={description:`Адаптирует boolean-состояние Toggle к паре настраиваемых строковых значений.`,methods:[],displayName:`StringToggle`,props:{checkedValue:{required:!1,tsType:{name:`string`},description:``},uncheckedValue:{required:!1,tsType:{name:`string`},description:``},value:{required:!0,tsType:{name:`string`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``}}}})))()}var f,p,m,h,g;function _(){return(_=e((()=>{f=t(),d(),p=n(),m={title:`Shared/UI/Toggle/StringToggle`,component:l,args:{value:`ZBP_MANAGER`,onChange:()=>void 0,checkedText:`за клиента`,uncheckedText:`за сделку`,checkedValue:`ZM_MANAGER`,uncheckedValue:`ZBP_MANAGER`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{value:{description:`Текущее строковое значение.`,control:!1},onChange:{description:`Возвращает строку выбранного состояния.`,control:!1},checkedValue:{description:`Значение включённого состояния.`,control:`text`},uncheckedValue:{description:`Значение выключенного состояния.`,control:`text`},checkedText:{description:`Текст включённого состояния.`,control:`text`},uncheckedText:{description:`Текст выключенного состояния.`,control:`text`}}},h={render:e=>{let[t,n]=(0,f.useState)(e.value);return(0,p.jsx)(l,{...e,value:t,onChange:n})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<string>(args.value);
+    return <StringToggle {...args} value={value} onChange={setValue} />;
+  }
+}`,...h.parameters?.docs?.source}}},g=[`ManagerScope`]})))()}_();export{h as ManagerScope,g as __namedExportsOrder,m as default};

package/storybook-static/assets/{Switch-CPKaENqL.js → Switch-Dy4Pahkn.js}

@@ -1,11 +1,11 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.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-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{BiState as p,Disabled as m,TriState as h,n as g,t as _}from"./Switch.stories-BysIhUHa.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 сценариев`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.js";import{a as p,i as m,n as h,r as g,t as _}from"./Switch.stories-EiAb5Z-D.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)(s,{of:g,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(u,{children:`Switch`}),`
+`,(0,b.jsx)(o,{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)(f,{}),`
+`,(0,b.jsx)(i,{of:_}),`
 `,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { Switch } from "@/shared/ui";
@@ -23,14 +23,14 @@ export function Example() {
 `,(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)(d,{of:_}),`
 `,(0,b.jsx)(t.h3,{id:`трехсостояние-с-промежуточным-значением`,children:`Трехсостояние с промежуточным значением`}),`
 `,(0,b.jsx)(t.p,{children:`Трехсостояние с промежуточным значением.`}),`
-`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(d,{of:m}),`
 `,(0,b.jsx)(t.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
 `,(0,b.jsx)(t.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
-`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(d,{of:h}),`
 `,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(l,{of:g}),`
 `,(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};
+`,(0,b.jsx)(a,{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;function x(){return(x=e((()=>{b=t(),r(),c(),p()})))()}x();export{y as default};

package/storybook-static/assets/Switch.stories-EiAb5Z-D.js

@@ -0,0 +1,26 @@
+import{n as e,o as t,r as n}from"./rolldown-runtime-C0FnF6B9.js";import{t as r}from"./react-C21x__mS.js";import{n as i,t as a}from"./circle-check-VtVMsaJJ.js";import{i as o,n as s,r as c}from"./iframe-DaN-XFub.js";import{a as l,i as u}from"./utils-DUM89eIj.js";import{n as d,t as f}from"./ui.module-DoMIk8Oc.js";var p,m;function h(){return(h=e((()=>{o(),p=[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M4.929 4.929 19.07 19.071`,key:`196cmz`}]],m=c(`ban`,p)})))()}var g,_,v,y,b;function x(){return(x=e((()=>{g=`Or5LYA`,_=`w0AMfA`,v=`P1x4lq`,y=`-ZVOZo`,b={switchWrapper:g,switch:`qge3io`,iconWrapper:_,auto:v,checked:y}})))()}function S(e){let{label:t,description:n,disabled:r,checkedIcon:i=(0,w.jsx)(a,{}),uncheckedIcon:o=(0,w.jsx)(m,{}),className:s,type:c,id:u,size:f,placeholder:p,onChange:h,value:g,triState:_,...v}=e,y=(0,C.useId)(),x=u??y,S=n?`${x}-description`:void 0,T=t?`${x}-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,O=e.triState&&typeof e.value!=`boolean`,k=v[`aria-label`]??(t?void 0:`Переключатель`);return(0,w.jsxs)(`div`,{className:l(d.uiElement,r&&d.disabled),"aria-disabled":r||void 0,children:[t&&(0,w.jsxs)(`div`,{id:T,className:d.uiLabel,children:[t,`:`]}),n&&(0,w.jsx)(`p`,{id:S,className:d.uiDescription,children:n}),(0,w.jsx)(`button`,{...v,id:x,type:c??`button`,role:`switch`,disabled:r,"aria-checked":D,"aria-describedby":S,"aria-labelledby":T,"aria-label":k,"aria-disabled":r,"data-ui":`switch`,"data-action":`toggle-switch`,onClick:E,className:l(d.uiInputControl,b.switchWrapper,s),children:(0,w.jsx)(`div`,{className:b.switch,"data-disabled":r||void 0,children:O?(0,w.jsx)(`div`,{className:l(b.iconWrapper,b.auto,b.checked),children:`Auto`}):(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(`div`,{className:l(b.iconWrapper,!e.value&&b.checked),children:o}),(0,w.jsx)(`div`,{className:l(b.iconWrapper,e.value&&b.checked),children:i})]})})})]})}var C,w;function T(){return(T=e((()=>{C=t(r(),1),u(),h(),i(),f(),x(),w=s(),S.__docgenInfo={description:`Переключатель boolean-состояния в виде слайдера. Подходит для быстрых настроек и включения/отключения опций.`,methods:[],displayName:`Switch`}})))()}var E=n({BiState:()=>A,Disabled:()=>M,TriState:()=>j,__namedExportsOrder:()=>N,default:()=>k}),D,O,k,A,j,M,N;function P(){return(P=e((()=>{D=r(),T(),O=s(),k={title:`Shared/UI/Switch`,component:S,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`}}},A={render:e=>{let[t,n]=(0,D.useState)(!1);return(0,O.jsx)(S,{...e,value:t,onChange:n,triState:!1})}},j={render:e=>{let[t,n]=(0,D.useState)(void 0);return(0,O.jsxs)(`div`,{style:{display:`grid`,gap:8},children:[(0,O.jsx)(S,{...e,value:t,onChange:n,triState:!0}),(0,O.jsxs)(`div`,{children:[`Текущее значение: `,String(t)]})]})},args:{triState:!0,value:void 0}},M={args:{disabled:!0,value:!0}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState(false);
+    return <Switch {...args} value={value} onChange={setValue} triState={false} />;
+  }
+}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.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
+  }
+}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: true
+  }
+}`,...M.parameters?.docs?.source}}},N=[`BiState`,`TriState`,`Disabled`]})))()}export{P as a,j as i,M as n,E as r,A as t};

package/storybook-static/assets/{Table-xV66crR1.js → Table-BO6Oa4JV.js}

@@ -1,12 +1,12 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.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-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Basic as p,Empty as m,Fetching as h,Loading as g,MultiSelect as _,ReachEnd as v,WithColumnPinning as y,WithDisabledRows as b,WithFormattingPipeline as x,WithFormulaColumn as S,WithHiddenZero as C,WithMergedDuplicates as w,WithODataMetadataAdapter as T,WithUseODataTableColumnsBuildHook as E,WithUseODataTableColumnsEnrichHook as D,n as O,t as k}from"./Table.stories-CBpgmq7b.js";function A(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(o,{of:k,parameters:{docs:{toc:!0}}}),`
-`,(0,M.jsx)(l,{children:`Table`}),`
-`,(0,M.jsxs)(a,{children:[`Плоская таблица как React-альтернатива `,(0,M.jsx)(t.code,{children:`sap.m.Table`})]}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.js";import{_ as p,a as m,c as h,d as g,f as _,g as v,h as y,i as b,l as x,m as S,n as C,o as w,p as T,r as E,s as D,t as O,u as k}from"./Table.stories--TpBKwmP.js";function A(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(s,{of:D,parameters:{docs:{toc:!0}}}),`
+`,(0,M.jsx)(u,{children:`Table`}),`
+`,(0,M.jsxs)(o,{children:[`Плоская таблица как React-альтернатива `,(0,M.jsx)(t.code,{children:`sap.m.Table`})]}),`
 `,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`Table`}),` предназначен для плоских данных и по поведению осознанно сближен с `,(0,M.jsx)(t.code,{children:`TreeTable`}),`.
 Оба компонента используют общий табличный каркас, поэтому здесь совпадают states загрузки, визуальная структура, обработка выбора строк и клавиатурная активация.
 `,(0,M.jsx)(t.code,{children:`Table`}),` также поддерживает декларативное форматирование через `,(0,M.jsx)(t.code,{children:`meta.formatting`}),`, formulas, безопасное pipeline-formatting и optional OData adapter.`]}),`
 `,(0,M.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,M.jsx)(d,{}),`
-`,(0,M.jsx)(r,{of:p}),`
+`,(0,M.jsx)(f,{}),`
+`,(0,M.jsx)(i,{of:O}),`
 `,(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { Table, type TableColumnDef } from "@/shared/ui";
 
 interface DealRow {
@@ -162,36 +162,36 @@ function DealsTable({ rows }: { rows: DealRow[] }) {
 `]}),`
 `,(0,M.jsx)(t.h2,{id:`сценарии`,children:`Сценарии`}),`
 `,(0,M.jsx)(t.h3,{id:`базовый-режим`,children:`Базовый режим`}),`
-`,(0,M.jsx)(u,{of:p}),`
+`,(0,M.jsx)(d,{of:O}),`
 `,(0,M.jsx)(t.h3,{id:`left-pinning-столбцов`,children:`Left-pinning столбцов`}),`
-`,(0,M.jsx)(u,{of:y}),`
+`,(0,M.jsx)(d,{of:h}),`
 `,(0,M.jsx)(t.h3,{id:`множественный-выбор`,children:`Множественный выбор`}),`
-`,(0,M.jsx)(u,{of:_}),`
+`,(0,M.jsx)(d,{of:m}),`
 `,(0,M.jsx)(t.h3,{id:`строки-с-ограничением-выбора`,children:`Строки с ограничением выбора`}),`
-`,(0,M.jsx)(u,{of:b}),`
+`,(0,M.jsx)(d,{of:x}),`
 `,(0,M.jsx)(t.h3,{id:`фоновое-обновление-данных`,children:`Фоновое обновление данных`}),`
-`,(0,M.jsx)(u,{of:h}),`
+`,(0,M.jsx)(d,{of:E}),`
 `,(0,M.jsx)(t.h3,{id:`пустая-таблица`,children:`Пустая таблица`}),`
-`,(0,M.jsx)(u,{of:m}),`
+`,(0,M.jsx)(d,{of:C}),`
 `,(0,M.jsx)(t.h3,{id:`достижение-конца-списка`,children:`Достижение конца списка`}),`
-`,(0,M.jsx)(u,{of:v}),`
+`,(0,M.jsx)(d,{of:w}),`
 `,(0,M.jsx)(t.h3,{id:`первичная-загрузка`,children:`Первичная загрузка`}),`
-`,(0,M.jsx)(u,{of:g}),`
+`,(0,M.jsx)(d,{of:b}),`
 `,(0,M.jsx)(t.h3,{id:`formula-based-колонка`,children:`Formula-based колонка`}),`
-`,(0,M.jsx)(u,{of:S}),`
+`,(0,M.jsx)(d,{of:g}),`
 `,(0,M.jsx)(t.h3,{id:`pipeline-display-formatting`,children:`Pipeline display-formatting`}),`
-`,(0,M.jsx)(u,{of:x}),`
+`,(0,M.jsx)(d,{of:k}),`
 `,(0,M.jsx)(t.h3,{id:`скрытие-нулевых-значений`,children:`Скрытие нулевых значений`}),`
-`,(0,M.jsx)(u,{of:C}),`
+`,(0,M.jsx)(d,{of:_}),`
 `,(0,M.jsx)(t.h3,{id:`слияние-дубликатов-1`,children:`Слияние дубликатов`}),`
-`,(0,M.jsx)(u,{of:w}),`
+`,(0,M.jsx)(d,{of:T}),`
 `,(0,M.jsx)(t.h3,{id:`odata-metadata-adapter`,children:`OData metadata adapter`}),`
-`,(0,M.jsx)(u,{of:T}),`
+`,(0,M.jsx)(d,{of:S}),`
 `,(0,M.jsx)(t.h3,{id:`useodatatablecolumns-build`,children:`useODataTableColumns: build`}),`
-`,(0,M.jsx)(u,{of:E}),`
+`,(0,M.jsx)(d,{of:y}),`
 `,(0,M.jsx)(t.h3,{id:`useodatatablecolumns-enrich`,children:`useODataTableColumns: enrich`}),`
-`,(0,M.jsx)(u,{of:D}),`
+`,(0,M.jsx)(d,{of:v}),`
 `,(0,M.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,M.jsx)(c,{of:k}),`
+`,(0,M.jsx)(l,{of:D}),`
 `,(0,M.jsx)(t.h2,{id:`все-stories`,children:`Все stories`}),`
-`,(0,M.jsx)(i,{includePrimary:!1})]})}function j(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)(A,{...e})}):A(e)}var M;e((()=>{M=t(),f(),s(),O()}))();export{j as default};
+`,(0,M.jsx)(a,{includePrimary:!1})]})}function j(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)(A,{...e})}):A(e)}var M;function N(){return(N=e((()=>{M=t(),r(),c(),p()})))()}N();export{j as default};