@ryuzaki13/react-foundation-ui 1.8.1 → 1.8.3

package/storybook-static/assets/LayoutPicker-8Q1MpMYR.js

@@ -0,0 +1,376 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n}from"./iframe-CIzkWNwp.js";import{a as r,i}from"./utils-DUM89eIj.js";import{c as a,i as o,l as s,m as c,n as l,p as u,r as d,s as f,t as p,u as m}from"./usePickerTriggerController-B1Mub3-v.js";import{n as h,t as g}from"./Option-DqmRqyOQ.js";import{n as _,t as v}from"./CustomOptionButton-BWYYtI_M.js";function y(e,t){return{gridTemplateColumns:`repeat(${e.columns}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${e.rows}, minmax(${t??0}em, 1fr))`}}function b(e){return{gridColumn:`${e.column} / span ${e.columnSpan??1}`,gridRow:`${e.row} / span ${e.rowSpan??1}`}}var x;function S(){return(S=e((()=>{x=[{id:`1x1`,label:`1x1`,columns:1,rows:1,cells:[{id:`c11`,row:1,column:1}]},{id:`1x2`,label:`1x2`,columns:2,rows:1,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2}]},{id:`1x3`,label:`1x3`,columns:3,rows:1,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3}]},{id:`2x1`,label:`2x1`,columns:1,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1}]},{id:`2x2`,label:`2x2`,columns:2,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2}]},{id:`2x3`,label:`2x3`,columns:3,rows:2,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3}]},{id:`3x1`,label:`3x1`,columns:1,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1},{id:`c31`,row:3,column:1}]},{id:`3x2`,label:`3x2`,columns:2,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x3`,label:`3x3`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`4x1`,label:`4x1`,columns:1,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c21`,row:2,column:1},{id:`c31`,row:3,column:1},{id:`c41`,row:4,column:1}]},{id:`4x2`,label:`4x2`,columns:2,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2}]},{id:`4x3`,label:`4x3`,columns:3,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2},{id:`c43`,row:4,column:3}]},{id:`2x2-l`,label:`Большая слева + две справа`,columns:2,rows:2,cells:[{id:`left`,row:1,column:1,rowSpan:2},{id:`rt`,row:1,column:2},{id:`rb`,row:2,column:2}]},{id:`2x2-r`,label:`Две слева + большая справа`,columns:2,rows:2,cells:[{id:`lt`,row:1,column:1},{id:`lb`,row:2,column:1},{id:`right`,row:1,column:2,rowSpan:2}]},{id:`2x2-t`,label:`Широкая сверху + две снизу`,columns:2,rows:2,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`bl`,row:2,column:1},{id:`br`,row:2,column:2}]},{id:`2x2-b`,label:`Две сверху + широкая снизу`,columns:2,rows:2,cells:[{id:`tl`,row:1,column:1},{id:`tr`,row:1,column:2},{id:`bottom`,row:2,column:1,columnSpan:2}]},{id:`3x2-t`,label:`Широкая сверху + 2x2`,columns:2,rows:3,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x2-b`,label:`2x2 + широкая снизу`,columns:2,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`bottom`,row:3,column:1,columnSpan:2}]},{id:`3x2-m`,label:`Широкая по центру`,columns:2,rows:3,cells:[{id:`tl`,row:1,column:1},{id:`tr`,row:1,column:2},{id:`middle`,row:2,column:1,columnSpan:2},{id:`bl`,row:3,column:1},{id:`br`,row:3,column:2}]},{id:`3x3-l`,label:`Большая слева + 2x3 справа`,columns:3,rows:3,cells:[{id:`left`,row:1,column:1,rowSpan:3},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`3x3-r`,label:`2x3 слева + большая справа`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`right`,row:1,column:3,rowSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2}]},{id:`3x3-t`,label:`Широкая сверху + 2x3`,columns:3,rows:3,cells:[{id:`top`,row:1,column:1,columnSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3}]},{id:`3x3-b`,label:`2x3 + широкая снизу`,columns:3,rows:3,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`bottom`,row:3,column:1,columnSpan:3}]},{id:`4x2-t`,label:`Широкая сверху + 3x2`,columns:2,rows:4,cells:[{id:`top`,row:1,column:1,columnSpan:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2}]},{id:`4x2-b`,label:`3x2 + широкая снизу`,columns:2,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`bottom`,row:4,column:1,columnSpan:2}]},{id:`4x3-t`,label:`Широкая сверху + 3x3`,columns:3,rows:4,cells:[{id:`top`,row:1,column:1,columnSpan:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`c41`,row:4,column:1},{id:`c42`,row:4,column:2},{id:`c43`,row:4,column:3}]},{id:`4x3-b`,label:`3x3 + широкая снизу`,columns:3,rows:4,cells:[{id:`c11`,row:1,column:1},{id:`c12`,row:1,column:2},{id:`c13`,row:1,column:3},{id:`c21`,row:2,column:1},{id:`c22`,row:2,column:2},{id:`c23`,row:2,column:3},{id:`c31`,row:3,column:1},{id:`c32`,row:3,column:2},{id:`c33`,row:3,column:3},{id:`bottom`,row:4,column:1,columnSpan:3}]}]})))()}var C,w,T,E,D,O,k,A,j,M,N,P;function F(){return(F=e((()=>{C=`SmdPit`,w=`giOtGs`,T=`_57Tr0T`,E=`Tkhulr`,D=`VQlniu`,O=`wb39Kf`,k=`VrHnjN`,A=`vNV6Q2`,j=`koxYU-`,M=`k8xLa2`,N=`_5pd3Bb`,P={triggerText:C,popup:w,popupLayout:T,popupBody:E,options:D,option:O,previewCell:k,optionPreviewWrap:A,preview:j,previewPlaceholder:M,previewCompact:N}})))()}function I({preset:e,compact:t=!1}){return(0,z.jsx)(`span`,{className:r(P.preview,t&&P.previewCompact),style:y(e),"aria-hidden":`true`,"data-ui":`layout-picker-preview`,children:e.cells.map(t=>(0,z.jsx)(`span`,{className:P.previewCell,style:b(t)},`${e.id}:${t.id}`))})}function L({id:e,label:t,description:n,value:i,onChange:a,presets:c=x,disabled:d,getPresetDisabled:p,placeholder:m=B,showPlaceholder:h=!1,size:_,ariaLabel:y,className:b,triggerClassName:S,popupClassName:C,placement:w=`bottom-start`}){let T=(0,R.useRef)(null),[E,D]=(0,R.useState)(!1),O=c.findIndex(e=>e.id===i),k=O>=0?c[O]:void 0,A=k?.label??m,{activeIndex:j,context:M,floatingStyles:N,getFloatingProps:F,setReference:L,setFloating:V,setOptionRef:H,close:U,openList:W,toggleOpen:G,selectOption:K,selectActiveOption:q,handleReferenceKeyDown:J,handleFloatingKeyDown:Y,getOptionId:X,getActiveOptionId:Z}=o({options:c,selectedIndex:O,open:E,onOpenChange:D,getOptionDisabled:p,onSelect:e=>a(e.id),disabled:d,placement:w,triggerMode:`display`}),Q=l({mode:`display`,open:E,currentQuery:``,hasDisplayValue:k!==void 0,inputRef:T,openList:W,close:U,toggleOpen:G}),$=e=>{T.current=e};return(0,z.jsx)(u,{id:e,label:t,description:n,disabled:d,size:_,className:b,children:({controlId:e,labelId:n,describedBy:i})=>{let a=`${e}-listbox`;return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(f,{ref:$,rootRef:L,id:e,type:`button`,disabled:d,open:E,optionCount:c.length,label:t,placeholder:m,readOnly:!0,autoComplete:`off`,role:`combobox`,value:A,selectedValue:k?(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(I,{preset:k,compact:!0}),h?(0,z.jsx)(`span`,{className:P.triggerText,"data-ui":`layout-picker-selected-label`,children:k.label}):null]}):void 0,hasSelection:k!==void 0,showSelectedValue:k!==void 0,onToggleMouseDown:Q.handleToggleMouseDown,onToggleClick:Q.handleToggleClick,openAriaLabel:`Открыть список layout`,closeAriaLabel:`Закрыть список layout`,"aria-haspopup":`listbox`,"aria-expanded":E,"aria-controls":E?a:void 0,"aria-labelledby":n,"aria-describedby":i,"aria-autocomplete":`none`,"aria-activedescendant":E?Z(a):void 0,"aria-label":n?void 0:y??`Выбрать layout. Текущее значение: ${A}`,"data-ui":`layout-picker-trigger`,rootClassName:S,onClick:Q.handleTriggerClick,onFocus:e=>{Q.handleTriggerFocus(e.currentTarget)},onKeyDown:e=>{J(e),!e.defaultPrevented&&Q.handleTriggerKeyDown({event:e,onActivateWhenOpen:q,enableSpaceActivation:!0})}}),(0,z.jsx)(s,{open:E,context:M,floatingStyles:N,listId:a,labelId:n,descriptionId:i,activeOptionId:Z(a),setFloating:V,getFloatingProps:F,onKeyDown:Y,className:r(P.popup,C),layoutClassName:P.popupLayout,bodyClassName:P.popupBody,children:(0,z.jsx)(`div`,{className:P.options,children:c.map((e,t)=>{let n=t===O,r=t===j,i=p?.(e)??!1,o=X(a,t);return(0,z.jsx)(g,{id:o,ref:e=>H(t,e),role:`option`,"aria-selected":n,"aria-disabled":i||void 0,"aria-label":e.description?`${e.label}. ${e.description}`:e.label,className:P.option,active:r,selected:n,disabled:i,"data-ui":`layout-picker-option`,"data-selected":n||void 0,children:(0,z.jsx)(v,{tabIndex:-1,disabled:i,onMouseDown:e=>e.preventDefault(),onClick:()=>K(e),children:(0,z.jsx)(`span`,{className:P.optionPreviewWrap,children:(0,z.jsx)(I,{preset:e})})})},e.id)})})})]})}})}var R,z,B;function V(){return(V=e((()=>{R=t(),i(),_(),h(),c(),m(),a(),d(),p(),S(),F(),z=n(),B=`Выберите раскладку`,L.__docgenInfo={description:`Контрол выбора layout-пресета. Не хранит бизнес-логику содержимого ячеек.`,methods:[],displayName:`LayoutPicker`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Выберите раскладку"`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},id:{required:!1,tsType:{name:`string`},description:``},presets:{required:!1,tsType:{name:`unknown`},description:``,defaultValue:{value:`[
+	{
+		id: "1x1",
+		label: "1x1",
+		columns: 1,
+		rows: 1,
+		cells: [{ id: "c11", row: 1, column: 1 }]
+	},
+	{
+		id: "1x2",
+		label: "1x2",
+		columns: 2,
+		rows: 1,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 }
+		]
+	},
+	{
+		id: "1x3",
+		label: "1x3",
+		columns: 3,
+		rows: 1,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 }
+		]
+	},
+	{
+		id: "2x1",
+		label: "2x1",
+		columns: 1,
+		rows: 2,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c21", row: 2, column: 1 }
+		]
+	},
+	{
+		id: "2x2",
+		label: "2x2",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 }
+		]
+	},
+	{
+		id: "2x3",
+		label: "2x3",
+		columns: 3,
+		rows: 2,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 }
+		]
+	},
+	{
+		id: "3x1",
+		label: "3x1",
+		columns: 1,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c31", row: 3, column: 1 }
+		]
+	},
+	{
+		id: "3x2",
+		label: "3x2",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 }
+		]
+	},
+	{
+		id: "3x3",
+		label: "3x3",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 }
+		]
+	},
+	{
+		id: "4x1",
+		label: "4x1",
+		columns: 1,
+		rows: 4,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c41", row: 4, column: 1 }
+		]
+	},
+	{
+		id: "4x2",
+		label: "4x2",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c41", row: 4, column: 1 },
+			{ id: "c42", row: 4, column: 2 }
+		]
+	},
+	{
+		id: "4x3",
+		label: "4x3",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 },
+			{ id: "c41", row: 4, column: 1 },
+			{ id: "c42", row: 4, column: 2 },
+			{ id: "c43", row: 4, column: 3 }
+		]
+	},
+
+	{
+		id: "2x2-l",
+		label: "Большая слева + две справа",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{ id: "left", row: 1, column: 1, rowSpan: 2 },
+			{ id: "rt", row: 1, column: 2 },
+			{ id: "rb", row: 2, column: 2 }
+		]
+	},
+	{
+		id: "2x2-r",
+		label: "Две слева + большая справа",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{ id: "lt", row: 1, column: 1 },
+			{ id: "lb", row: 2, column: 1 },
+			{ id: "right", row: 1, column: 2, rowSpan: 2 }
+		]
+	},
+	{
+		id: "2x2-t",
+		label: "Широкая сверху + две снизу",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{ id: "top", row: 1, column: 1, columnSpan: 2 },
+			{ id: "bl", row: 2, column: 1 },
+			{ id: "br", row: 2, column: 2 }
+		]
+	},
+	{
+		id: "2x2-b",
+		label: "Две сверху + широкая снизу",
+		columns: 2,
+		rows: 2,
+		cells: [
+			{ id: "tl", row: 1, column: 1 },
+			{ id: "tr", row: 1, column: 2 },
+			{ id: "bottom", row: 2, column: 1, columnSpan: 2 }
+		]
+	},
+
+	{
+		id: "3x2-t",
+		label: "Широкая сверху + 2x2",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{ id: "top", row: 1, column: 1, columnSpan: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 }
+		]
+	},
+	{
+		id: "3x2-b",
+		label: "2x2 + широкая снизу",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "bottom", row: 3, column: 1, columnSpan: 2 }
+		]
+	},
+	{
+		id: "3x2-m",
+		label: "Широкая по центру",
+		columns: 2,
+		rows: 3,
+		cells: [
+			{ id: "tl", row: 1, column: 1 },
+			{ id: "tr", row: 1, column: 2 },
+			{ id: "middle", row: 2, column: 1, columnSpan: 2 },
+			{ id: "bl", row: 3, column: 1 },
+			{ id: "br", row: 3, column: 2 }
+		]
+	},
+
+	{
+		id: "3x3-l",
+		label: "Большая слева + 2x3 справа",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{ id: "left", row: 1, column: 1, rowSpan: 3 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 }
+		]
+	},
+	{
+		id: "3x3-r",
+		label: "2x3 слева + большая справа",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "right", row: 1, column: 3, rowSpan: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 }
+		]
+	},
+	{
+		id: "3x3-t",
+		label: "Широкая сверху + 2x3",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{ id: "top", row: 1, column: 1, columnSpan: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 }
+		]
+	},
+	{
+		id: "3x3-b",
+		label: "2x3 + широкая снизу",
+		columns: 3,
+		rows: 3,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "bottom", row: 3, column: 1, columnSpan: 3 }
+		]
+	},
+
+	{
+		id: "4x2-t",
+		label: "Широкая сверху + 3x2",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{ id: "top", row: 1, column: 1, columnSpan: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c41", row: 4, column: 1 },
+			{ id: "c42", row: 4, column: 2 }
+		]
+	},
+	{
+		id: "4x2-b",
+		label: "3x2 + широкая снизу",
+		columns: 2,
+		rows: 4,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "bottom", row: 4, column: 1, columnSpan: 2 }
+		]
+	},
+	{
+		id: "4x3-t",
+		label: "Широкая сверху + 3x3",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{ id: "top", row: 1, column: 1, columnSpan: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 },
+			{ id: "c41", row: 4, column: 1 },
+			{ id: "c42", row: 4, column: 2 },
+			{ id: "c43", row: 4, column: 3 }
+		]
+	},
+	{
+		id: "4x3-b",
+		label: "3x3 + широкая снизу",
+		columns: 3,
+		rows: 4,
+		cells: [
+			{ id: "c11", row: 1, column: 1 },
+			{ id: "c12", row: 1, column: 2 },
+			{ id: "c13", row: 1, column: 3 },
+			{ id: "c21", row: 2, column: 1 },
+			{ id: "c22", row: 2, column: 2 },
+			{ id: "c23", row: 2, column: 3 },
+			{ id: "c31", row: 3, column: 1 },
+			{ id: "c32", row: 3, column: 2 },
+			{ id: "c33", row: 3, column: 3 },
+			{ id: "bottom", row: 4, column: 1, columnSpan: 3 }
+		]
+	}
+] as const satisfies readonly LayoutPickerPreset[]`,computed:!1}},getPresetDisabled:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(preset: LayoutPickerPreset) => boolean`,signature:{arguments:[{type:{name:`signature`,type:`object`,raw:`{
+	id: string;
+	label: string;
+	description?: string;
+	columns: number;
+	rows: number;
+	cells: readonly LayoutPickerPresetCell[];
+}`,signature:{properties:[{key:`id`,value:{name:`string`,required:!0}},{key:`label`,value:{name:`string`,required:!0}},{key:`description`,value:{name:`string`,required:!1}},{key:`columns`,value:{name:`number`,required:!0}},{key:`rows`,value:{name:`number`,required:!0}},{key:`cells`,value:{name:`unknown`,required:!0}}]}},name:`preset`}],return:{name:`boolean`}}},description:``},showPlaceholder:{required:!1,tsType:{name:`boolean`},description:"Показывает рядом с превью переданный текст `placeholder`.\nПо умолчанию текст скрыт, поэтому trigger отображает только иконку раскладки.",defaultValue:{value:`false`,computed:!1}},ariaLabel:{required:!1,tsType:{name:`string`},description:``},className:{required:!1,tsType:{name:`string`},description:``},triggerClassName:{required:!1,tsType:{name:`string`},description:``},popupClassName:{required:!1,tsType:{name:`string`},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"bottom-start"`,computed:!1}}}}})))()}export{S as i,V as n,x as r,L as t};

package/storybook-static/assets/LayoutPicker-BY4-fUQa.css

@@ -0,0 +1 @@
+.SmdPit{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.giOtGs{width:min(100vw - var(--space-lg) * 2, 44em);max-height:min(75vh,34em)}._57Tr0T{max-height:inherit}.Tkhulr{padding:var(--space-xs);overflow:auto}.VQlniu{gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(min(100%,5em),1fr));display:grid}.wb39Kf{padding:var(--space-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease;position:relative}.wb39Kf:focus-visible{background-color:var(--surface-2);border-color:var(--border-2)}@media (any-hover:hover){.wb39Kf:hover{background-color:var(--surface-2);border-color:var(--border-2)}}@media (any-hover:none){.wb39Kf:active{background-color:var(--surface-2);border-color:var(--border-2)}}.wb39Kf:disabled{cursor:default;opacity:var(--disabled-opacity)}.wb39Kf[data-selected]{border-color:var(--border-1);background-color:var(--surface-1)}.wb39Kf[data-selected] .VrHnjN{background-color:var(--surface-accent);border:var(--border-width) solid var(--border-accent)}.vNV6Q2{justify-content:center;align-items:center;display:flex}.koxYU-,.k8xLa2{--layout-picker-preview-size:3.5em;width:var(--layout-picker-preview-size);height:calc(var(--layout-picker-preview-size) * .72);flex:none}.koxYU-{gap:calc(var(--border-width) * 2);display:grid}._5pd3Bb,.k8xLa2{--layout-picker-preview-size:1.75rem}.VrHnjN{border-radius:var(--radius-xs);background-color:var(--surface-1);border:var(--border-width) solid var(--border-1);min-width:0;min-height:0}._5pd3Bb .VrHnjN{background-color:var(--status-brand-fill);border:none}

package/storybook-static/assets/{LayoutPicker-SjhPWivQ.js → LayoutPicker-vwoAIGrk.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CE1ro1AE.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-DGyM6J7r.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-CbEGkcsV.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)(s,{of:_,parameters:{docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CIzkWNwp.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-CdL0FBl-.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-BW8B8i8S.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)(s,{of:_,parameters:{docs:{toc:!0}}}),`
 `,(0,C.jsx)(u,{children:`LayoutPicker`}),`
 `,(0,C.jsx)(o,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
 `,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.

package/storybook-static/assets/{LayoutPicker.stories-CbEGkcsV.js → LayoutPicker.stories-BW8B8i8S.js}

@@ -1,4 +1,4 @@
-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-CE1ro1AE.js";import{i,n as a,r as o,t as s}from"./LayoutPicker-BGk1niU3.js";var c,l,u,d,f,p,m,h,g,_;function v(){return(v=e((()=>{c=`buT8ds`,l=`vDpJVR`,u=`-GMI1h`,d=`Xgkzn9`,f=`X--lo-`,p=`W5rEjx`,m=`BgilL7`,h=`ALGrVl`,g=`IrqK1d`,_={canvas:c,toolbar:l,summary:u,summaryItem:d,summaryValue:f,muted:p,layoutPreview:m,layoutCell:h,layoutCellTitle:g}})))()}var y=t({Controlled:()=>A,CustomPresets:()=>M,Disabled:()=>F,DisabledPresets:()=>N,InToolbar:()=>P,Placeholder:()=>j,__namedExportsOrder:()=>I,default:()=>k});function b(e,t){return t.find(t=>t.id===e)}function x({value:e,presets:t}){let n=b(e,t);return(0,T.jsxs)(`div`,{className:_.summary,"aria-live":`polite`,children:[(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`ID`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:e||`не выбрано`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Название`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.label??`Layout не выбран`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Сетка`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?`${n.columns} x ${n.rows}`:`нет данных`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Ячеек`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.cells.length??0})]})]})}function S({value:e,presets:t}){let n=b(e,t);if(!n)return null;let r=n.columns,i=n.rows,a=n.cells;return(0,T.jsx)(`div`,{className:_.layoutPreview,style:{gridTemplateColumns:`repeat(${r}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${i}, minmax(0, 1fr))`},children:a.map((e,t)=>(0,T.jsxs)(`div`,{className:_.layoutCell,style:{gridColumn:`${e.column} / span ${e.columnSpan}`,gridRow:`${e.row} / span ${e.rowSpan}`},children:[(0,T.jsxs)(`span`,{className:_.layoutCellTitle,children:[`Область `,t+1]}),(0,T.jsxs)(`span`,{className:_.muted,children:[`Колонка `,e.column,`, строка `,e.row,`; span `,e.columnSpan,` x `,e.rowSpan]})]},e.id))})}function C(){let[e,t]=(0,w.useState)(`1x2`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(`div`,{className:_.toolbar,children:(0,T.jsx)(s,{label:`Layout панели`,value:e,onChange:t,ariaLabel:`Выбрать layout панели`})}),(0,T.jsx)(x,{value:e,presets:o}),(0,T.jsx)(S,{value:e,presets:o})]})}var w,T,E,D,O,k,A,j,M,N,P,F,I;function L(){return(L=e((()=>{w=n(),i(),a(),v(),T=r(),{useArgs:E}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:D}=__STORYBOOK_MODULE_TEST__,O=[{id:`dashboard-summary`,label:`Сводка + детали`,description:`Один широкий блок сверху и две области детализации снизу.`,columns:2,rows:2,cells:[{id:`summary`,column:1,columnSpan:2,row:1,rowSpan:1},{id:`left-detail`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`right-detail`,column:2,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-main-aside`,label:`Основной блок + сайдбар`,description:`Большая рабочая область слева и вертикальная колонка справа.`,columns:3,rows:2,cells:[{id:`main`,column:1,columnSpan:2,row:1,rowSpan:2},{id:`aside-top`,column:3,columnSpan:1,row:1,rowSpan:1},{id:`aside-bottom`,column:3,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-quad`,label:`Четыре равных блока`,description:`Плотная сетка для сравнения нескольких независимых виджетов.`,columns:2,rows:2,cells:[{id:`top-left`,column:1,columnSpan:1,row:1,rowSpan:1},{id:`top-right`,column:2,columnSpan:1,row:1,rowSpan:1},{id:`bottom-left`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`bottom-right`,column:2,columnSpan:1,row:2,rowSpan:1}]}],k={title:`Shared/UI/LayoutPicker`,component:s,args:{label:`Layout панели`,description:`Выберите схему размещения областей.`,value:o[0].id,onChange:D(),presets:o,disabled:!1,placeholder:`Выберите layout`,showPlaceholder:!1,ariaLabel:`Выбрать layout`,placement:`bottom-start`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета.`}}},argTypes:{id:{description:"ID кнопки выбора. Если не передан, компонент создаёт стабильный `useId`.",control:`text`},label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:`ID текущего выбранного layout-пресета.`,control:`text`},onChange:{description:`Вызывается с ID выбранного layout-пресета.`,control:!1},presets:{description:"Список layout-пресетов. По умолчанию используется `DEFAULT_LAYOUT_PICKER_PRESETS`.",control:!1},disabled:{description:`Блокирует кнопку выбора и открытие popup.`,control:`boolean`},getPresetDisabled:{description:`Позволяет заблокировать отдельные пресеты внутри popup.`,control:!1},placeholder:{description:"Текст, который можно явно показать рядом с превью через `showPlaceholder`.",control:`text`},showPlaceholder:{description:"Показывает рядом с превью именно строку `placeholder`. По умолчанию trigger содержит только иконку.",control:`boolean`},ariaLabel:{description:`Доступное имя trigger-кнопки. Если не передано, строится из текущего значения.`,control:`text`},size:{description:"Размер поля из общего `UiBaseProps`.",control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},triggerClassName:{description:`Дополнительный CSS-класс trigger-кнопки.`,control:`text`},popupClassName:{description:`Дополнительный CSS-класс popup.`,control:`text`},placement:{description:`Позиционирование popup относительно trigger.`,control:`select`,options:[`bottom-start`,`bottom-end`,`top-start`,`top-end`,`right-start`,`left-start`]}}},A={args:{value:`2x1`},name:`Контролируемый выбор`,render:function(e){let[,t]=E(),n=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,presets:n,onChange:n=>{e.onChange(n),t({value:n})}}),(0,T.jsx)(x,{value:e.value??``,presets:n})]})}},j={name:`Без выбранного значения`,render:e=>{let[t,n]=(0,w.useState)(``),r=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:r,placeholder:`Layout ещё не выбран`,showPlaceholder:!0,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:r})]})},args:{value:``}},M={name:`Кастомные пресеты`,render:e=>{let[t,n]=(0,w.useState)(O[0].id);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:O,ariaLabel:`Выбрать layout дашборда`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:O}),(0,T.jsx)(S,{value:t,presets:O})]})},args:{value:O[0].id,presets:O}},N={name:`Заблокированные пресеты`,render:e=>{let[t,n]=(0,w.useState)(`1x1`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,getPresetDisabled:e=>e.id===`1x2`||e.id===`2x2-l`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(`div`,{className:_.muted,children:`Пресеты с двумя колонками в этом сценарии недоступны.`}),(0,T.jsx)(x,{value:t,presets:o})]})}},P={name:`В панели настройки`,render:()=>(0,T.jsx)(C,{})},F={name:`Заблокированный контрол`,args:{disabled:!0,value:`1x2`}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+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-CIzkWNwp.js";import{i,n as a,r as o,t as s}from"./LayoutPicker-8Q1MpMYR.js";var c,l,u,d,f,p,m,h,g,_;function v(){return(v=e((()=>{c=`buT8ds`,l=`vDpJVR`,u=`-GMI1h`,d=`Xgkzn9`,f=`X--lo-`,p=`W5rEjx`,m=`BgilL7`,h=`ALGrVl`,g=`IrqK1d`,_={canvas:c,toolbar:l,summary:u,summaryItem:d,summaryValue:f,muted:p,layoutPreview:m,layoutCell:h,layoutCellTitle:g}})))()}var y=t({Controlled:()=>A,CustomPresets:()=>M,Disabled:()=>F,DisabledPresets:()=>N,InToolbar:()=>P,Placeholder:()=>j,__namedExportsOrder:()=>I,default:()=>k});function b(e,t){return t.find(t=>t.id===e)}function x({value:e,presets:t}){let n=b(e,t);return(0,T.jsxs)(`div`,{className:_.summary,"aria-live":`polite`,children:[(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`ID`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:e||`не выбрано`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Название`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.label??`Layout не выбран`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Сетка`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?`${n.columns} x ${n.rows}`:`нет данных`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Ячеек`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.cells.length??0})]})]})}function S({value:e,presets:t}){let n=b(e,t);if(!n)return null;let r=n.columns,i=n.rows,a=n.cells;return(0,T.jsx)(`div`,{className:_.layoutPreview,style:{gridTemplateColumns:`repeat(${r}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${i}, minmax(0, 1fr))`},children:a.map((e,t)=>(0,T.jsxs)(`div`,{className:_.layoutCell,style:{gridColumn:`${e.column} / span ${e.columnSpan}`,gridRow:`${e.row} / span ${e.rowSpan}`},children:[(0,T.jsxs)(`span`,{className:_.layoutCellTitle,children:[`Область `,t+1]}),(0,T.jsxs)(`span`,{className:_.muted,children:[`Колонка `,e.column,`, строка `,e.row,`; span `,e.columnSpan,` x `,e.rowSpan]})]},e.id))})}function C(){let[e,t]=(0,w.useState)(`1x2`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(`div`,{className:_.toolbar,children:(0,T.jsx)(s,{label:`Layout панели`,value:e,onChange:t,ariaLabel:`Выбрать layout панели`})}),(0,T.jsx)(x,{value:e,presets:o}),(0,T.jsx)(S,{value:e,presets:o})]})}var w,T,E,D,O,k,A,j,M,N,P,F,I;function L(){return(L=e((()=>{w=n(),i(),a(),v(),T=r(),{useArgs:E}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:D}=__STORYBOOK_MODULE_TEST__,O=[{id:`dashboard-summary`,label:`Сводка + детали`,description:`Один широкий блок сверху и две области детализации снизу.`,columns:2,rows:2,cells:[{id:`summary`,column:1,columnSpan:2,row:1,rowSpan:1},{id:`left-detail`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`right-detail`,column:2,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-main-aside`,label:`Основной блок + сайдбар`,description:`Большая рабочая область слева и вертикальная колонка справа.`,columns:3,rows:2,cells:[{id:`main`,column:1,columnSpan:2,row:1,rowSpan:2},{id:`aside-top`,column:3,columnSpan:1,row:1,rowSpan:1},{id:`aside-bottom`,column:3,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-quad`,label:`Четыре равных блока`,description:`Плотная сетка для сравнения нескольких независимых виджетов.`,columns:2,rows:2,cells:[{id:`top-left`,column:1,columnSpan:1,row:1,rowSpan:1},{id:`top-right`,column:2,columnSpan:1,row:1,rowSpan:1},{id:`bottom-left`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`bottom-right`,column:2,columnSpan:1,row:2,rowSpan:1}]}],k={title:`Shared/UI/LayoutPicker`,component:s,args:{label:`Layout панели`,description:`Выберите схему размещения областей.`,value:o[0].id,onChange:D(),presets:o,disabled:!1,placeholder:`Выберите layout`,showPlaceholder:!1,ariaLabel:`Выбрать layout`,placement:`bottom-start`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета.`}}},argTypes:{id:{description:"ID кнопки выбора. Если не передан, компонент создаёт стабильный `useId`.",control:`text`},label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:`ID текущего выбранного layout-пресета.`,control:`text`},onChange:{description:`Вызывается с ID выбранного layout-пресета.`,control:!1},presets:{description:"Список layout-пресетов. По умолчанию используется `DEFAULT_LAYOUT_PICKER_PRESETS`.",control:!1},disabled:{description:`Блокирует кнопку выбора и открытие popup.`,control:`boolean`},getPresetDisabled:{description:`Позволяет заблокировать отдельные пресеты внутри popup.`,control:!1},placeholder:{description:"Текст, который можно явно показать рядом с превью через `showPlaceholder`.",control:`text`},showPlaceholder:{description:"Показывает рядом с превью именно строку `placeholder`. По умолчанию trigger содержит только иконку.",control:`boolean`},ariaLabel:{description:`Доступное имя trigger-кнопки. Если не передано, строится из текущего значения.`,control:`text`},size:{description:"Размер поля из общего `UiBaseProps`.",control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},triggerClassName:{description:`Дополнительный CSS-класс trigger-кнопки.`,control:`text`},popupClassName:{description:`Дополнительный CSS-класс popup.`,control:`text`},placement:{description:`Позиционирование popup относительно trigger.`,control:`select`,options:[`bottom-start`,`bottom-end`,`top-start`,`top-end`,`right-start`,`left-start`]}}},A={args:{value:`2x1`},name:`Контролируемый выбор`,render:function(e){let[,t]=E(),n=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,presets:n,onChange:n=>{e.onChange(n),t({value:n})}}),(0,T.jsx)(x,{value:e.value??``,presets:n})]})}},j={name:`Без выбранного значения`,render:e=>{let[t,n]=(0,w.useState)(``),r=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:r,placeholder:`Layout ещё не выбран`,showPlaceholder:!0,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:r})]})},args:{value:``}},M={name:`Кастомные пресеты`,render:e=>{let[t,n]=(0,w.useState)(O[0].id);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:O,ariaLabel:`Выбрать layout дашборда`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:O}),(0,T.jsx)(S,{value:t,presets:O})]})},args:{value:O[0].id,presets:O}},N={name:`Заблокированные пресеты`,render:e=>{let[t,n]=(0,w.useState)(`1x1`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,getPresetDisabled:e=>e.id===`1x2`||e.id===`2x2-l`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(`div`,{className:_.muted,children:`Пресеты с двумя колонками в этом сценарии недоступны.`}),(0,T.jsx)(x,{value:t,presets:o})]})}},P={name:`В панели настройки`,render:()=>(0,T.jsx)(C,{})},F={name:`Заблокированный контрол`,args:{disabled:!0,value:`1x2`}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
   args: {
     value: "2x1"
   },

package/storybook-static/assets/{Listbox-C3sJ_hRZ.js → Listbox-Cf_DMAva.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CE1ro1AE.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-DGyM6J7r.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Listbox.stories-CVdUd7oX.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CIzkWNwp.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-CdL0FBl-.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Listbox.stories-CxYyfkFU.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
 `,(0,x.jsx)(u,{children:`Listbox`}),`
 `,(0,x.jsx)(o,{children:`Список выбора для single- и multi-select сценариев, кастомного рендера элементов и блокированного состояния`}),`
 `,(0,x.jsx)(t.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/Listbox-D7r9R1Of.js

@@ -0,0 +1 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n,t as r}from"./check-Bff_8tRJ.js";import{n as i}from"./iframe-CIzkWNwp.js";import{i as a,n as o,r as s,s as c,t as l}from"./utils-DUM89eIj.js";import{n as u,t as d}from"./OptionButton-CQVIwI2y.js";import{i as f,n as p,r as m,t as h}from"./Option-DqmRqyOQ.js";import{n as g,t as _}from"./CustomOptionButton-BWYYtI_M.js";function v(e,t,n){if(n){if(Array.isArray(t)&&t.length>0){let n=e.findIndex(e=>t.includes(e.value)&&!e.disabled);if(n>=0)return n}return s(e,S)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return s(e,S)}function y(e){let{value:t,defaultValue:n,multiple:i,disabled:a,focusOnMount:u,renderItem:f,getKey:p,options:g,onChange:y,id:C,...w}=e,T=t!==void 0,E=(0,b.useId)(),D=C??`${E}-listbox`,[O,k]=(0,b.useState)(n),A=(0,b.useRef)(null),[j,M]=(0,b.useState)(()=>v(g,t??n,i)),N=(0,b.useRef)(!1),P=(0,b.useMemo)(()=>(T?t:O)??(i?[]:null),[O,T,i,t]),F=j,I=t=>{if(a||t.disabled)return;let n;if(e.multiple){let r=Array.isArray(P)?P:[];n=r.includes(t.value)?r.filter(e=>e!==t.value):[...r,t.value],e.onChange?.(n,t)}else n=t.value,e.onChange?.(n,t);T||k(n)};return(0,b.useEffect)(()=>{if(!N.current)return;N.current=!1;let e=A.current?.querySelectorAll(`[role="option"]`)[F];e&&e.scrollIntoView({block:`nearest`})},[F]),(0,b.useLayoutEffect)(()=>{u&&A.current?.focus()},[u]),(0,x.jsx)(m,{rootRef:A,id:D,role:`listbox`,"aria-multiselectable":i||void 0,"aria-activedescendant":F>=0?`${D}-option-${F}`:void 0,onKeyDown:e=>{if(!a){if(e.key===`ArrowDown`)e.preventDefault(),N.current=!0,M(e=>l(g,e,1,S));else if(e.key===`ArrowUp`)e.preventDefault(),N.current=!0,M(e=>l(g,e,-1,S));else if(e.key===`Home`)e.preventDefault(),N.current=!0,M(s(g,S));else if(e.key===`End`)e.preventDefault(),N.current=!0,M(c(g,S));else if(o(e,()=>{let e=g[F];e&&I(e)}))return}},...w,"aria-disabled":a||void 0,tabIndex:a?-1:0,className:w.className,children:g.map((e,t)=>{let n=i?Array.isArray(P)&&P.includes(e.value):P===e.value,o=t===F,s=a||e.disabled||void 0,c=n=>{n.preventDefault(),!s&&(M(t),I(e))};return(0,x.jsx)(h,{id:`${D}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":s,disabled:s,active:o,selected:n,children:f?(0,x.jsx)(_,{tabIndex:-1,disabled:s,onMouseDown:c,children:f(e,n,o)}):(0,x.jsx)(d,{tabIndex:-1,disabled:s,onMouseDown:c,icon:n?(0,x.jsx)(r,{}):(0,x.jsx)(`span`,{}),text:e.label??String(e.value)})},p?p(e,t):t)})})}var b,x,S;function C(){return(C=e((()=>{b=t(),a(),n(),g(),p(),u(),f(),x=i(),S=e=>e.disabled===!0,y.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})))()}export{C as n,y as t};

package/storybook-static/assets/{Listbox.stories-CVdUd7oX.js → Listbox.stories-CxYyfkFU.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{n}from"./iframe-CE1ro1AE.js";import{n as r,t as i}from"./Listbox-D8KrJkpi.js";var a=t({CustomRender:()=>p,Disabled:()=>m,MultiSelect:()=>f,SingleSelect:()=>d,__namedExportsOrder:()=>h,default:()=>u});function o(e){return e.multiple?(0,s.jsx)(i,{...e,multiple:!0}):(0,s.jsx)(i,{...e})}var s,c,l,u,d,f,p,m,h;function g(){return(g=e((()=>{r(),s=n(),{useArgs:c}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:l}=__STORYBOOK_MODULE_TEST__,u={title:`Shared/UI/Listbox`,component:o,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:l()},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},disabled:{description:`Блокирует фокусировку, навигацию и изменение выбора.`,control:`boolean`},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1}}},d={render:function(e){let[,t]=c(),n=typeof e.value==`string`?e.value:`medium`;return(0,s.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,s.jsx)(o,{...e,multiple:!1,value:n,onChange:(n,r)=>{typeof n==`string`&&(e.onChange?.(n,r),t({value:n}))}}),(0,s.jsxs)(`div`,{children:[`Выбрано: `,n]})]})}},f={render:function(e){let[,t]=c(),n=Array.isArray(e.value)?e.value:[`low`,`high`];return(0,s.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,s.jsx)(o,{...e,multiple:!0,value:n,onChange:(n,r)=>{Array.isArray(n)&&(e.onChange?.(n,r),t({value:n}))}}),(0,s.jsxs)(`div`,{children:[`Выбрано: `,n.join(`, `)||`пусто`]})]})},args:{multiple:!0}},p={render:function(e){let[,t]=c(),n=typeof e.value==`string`?e.value:`low`;return(0,s.jsx)(o,{...e,value:n,onChange:(n,r)=>{typeof n==`string`&&(e.onChange?.(n,r),t({value:n}))},renderItem:(e,t,n)=>(0,s.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,s.jsx)(`span`,{children:e.label}),(0,s.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},m={args:{disabled:!0,value:`medium`},render:e=>(0,s.jsx)(o,{...e})},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{n}from"./iframe-CIzkWNwp.js";import{n as r,t as i}from"./Listbox-D7r9R1Of.js";var a=t({CustomRender:()=>p,Disabled:()=>m,MultiSelect:()=>f,SingleSelect:()=>d,__namedExportsOrder:()=>h,default:()=>u});function o(e){return e.multiple?(0,s.jsx)(i,{...e,multiple:!0}):(0,s.jsx)(i,{...e})}var s,c,l,u,d,f,p,m,h;function g(){return(g=e((()=>{r(),s=n(),{useArgs:c}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:l}=__STORYBOOK_MODULE_TEST__,u={title:`Shared/UI/Listbox`,component:o,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:l()},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},disabled:{description:`Блокирует фокусировку, навигацию и изменение выбора.`,control:`boolean`},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1}}},d={render:function(e){let[,t]=c(),n=typeof e.value==`string`?e.value:`medium`;return(0,s.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,s.jsx)(o,{...e,multiple:!1,value:n,onChange:(n,r)=>{typeof n==`string`&&(e.onChange?.(n,r),t({value:n}))}}),(0,s.jsxs)(`div`,{children:[`Выбрано: `,n]})]})}},f={render:function(e){let[,t]=c(),n=Array.isArray(e.value)?e.value:[`low`,`high`];return(0,s.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,s.jsx)(o,{...e,multiple:!0,value:n,onChange:(n,r)=>{Array.isArray(n)&&(e.onChange?.(n,r),t({value:n}))}}),(0,s.jsxs)(`div`,{children:[`Выбрано: `,n.join(`, `)||`пусто`]})]})},args:{multiple:!0}},p={render:function(e){let[,t]=c(),n=typeof e.value==`string`?e.value:`low`;return(0,s.jsx)(o,{...e,value:n,onChange:(n,r)=>{typeof n==`string`&&(e.onChange?.(n,r),t({value:n}))},renderItem:(e,t,n)=>(0,s.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,s.jsx)(`span`,{children:e.label}),(0,s.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},m={args:{disabled:!0,value:`medium`},render:e=>(0,s.jsx)(o,{...e})},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   render: function Render(args) {
     const [, updateArgs] = useArgs<ComponentProps<typeof StringListbox>>();
     const value = typeof args.value === "string" ? args.value : "medium";

package/storybook-static/assets/{Modal-0PfZiQTc.js → Modal-BaprwyBJ.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CE1ro1AE.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-DGyM6J7r.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Modal.stories-CVsQnsPB.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CIzkWNwp.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-CdL0FBl-.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Modal.stories-Rn_bgNdm.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{docs:{toc:!0}}}),`
 `,(0,S.jsx)(u,{children:`Modal`}),`
 `,(0,S.jsx)(o,{children:`Составная модалка с контентом, toolbar и footer для пользовательских диалоговых сценариев`}),`
 `,(0,S.jsx)(t.p,{children:`Modal уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/{Modal.stories-CVsQnsPB.js → Modal.stories-Rn_bgNdm.js}

@@ -1,4 +1,4 @@
-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-CE1ro1AE.js";import{n as i,t as a}from"./Button-Ez6zTRLH.js";import{a as o,i as s,n as c,o as l,r as u,s as d,t as f}from"./ModalManagerProvider-CtrgehPS.js";import{l as p,t as m}from"./Input-BZvdvztj.js";var h=t({Controlled:()=>w,ScrollableContent:()=>E,Sizes:()=>D,StackedModals:()=>O,WithToolbarAndFooter:()=>T,__namedExportsOrder:()=>k,default:()=>C});function g({children:e}){return(0,b.jsx)(`div`,{style:{minHeight:`60dvh`,padding:24,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e})}function _(){let[e,t]=(0,y.useState)(`Алексей`),[n,r]=(0,y.useState)(`Департамент автоматизации бизнеса`);return(0,b.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,b.jsx)(m,{label:`Имя`,value:e,onChange:t,placeholder:`Введите имя`}),(0,b.jsx)(m,{label:`Подразделение`,value:n,onChange:r,placeholder:`Введите подразделение`}),(0,b.jsxs)(`div`,{style:{padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[`Текущие значения: `,e||`не указано`,`, `,n||`не указано`]})]})}function v(){let[e,t]=x();return{args:e,updateArgs:t,close:()=>{e.onClose(),t({isOpen:!1})}}}var y,b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{y=n(),i(),p(),d(),c(),b=r(),{useArgs:x}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:S}=__STORYBOOK_MODULE_TEST__,C={title:`Shared/UI/Modal`,component:u,parameters:{atomicCanvas:!0,layout:`fullscreen`,docs:{description:{component:"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`."}}},decorators:[e=>(0,b.jsx)(f,{children:(0,b.jsx)(g,{children:e()})})],args:{isOpen:!1,title:`Редактирование профиля`,size:`md`,height:void 0,onClose:S(),children:(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,children:`Отмена`}),(0,b.jsx)(a,{children:`Сохранить`})]})]})},argTypes:{isOpen:{description:`Управляет видимостью модального окна.`,control:`boolean`},title:{description:`Заголовок модального окна.`,control:`text`},size:{description:`Предустановленный размер модального окна.`,control:`inline-radio`,options:[`sm`,`md`,`lg`,`xl`,`inside`]},height:{description:`Явная высота body-области модалки.`,control:`text`},onClose:{description:"Вызывается при закрытии по кнопке, `Escape` или пользовательскому действию.",control:!1},children:{description:"Композиция из `ModalToolbar`, `ModalContent`, `ModalFooter`.",control:!1}}},w={name:`Управляемая модалка`,render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть модалку`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,onClick:t,children:`Отмена`}),(0,b.jsx)(a,{onClick:t,children:`Сохранить`})]})]})]})}},T={name:`Полная композиция`,args:{title:`Редактирование профиля`,height:`min(34rem, 70dvh)`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть сценарий редактирования`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(l,{children:(0,b.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:12,padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[(0,b.jsxs)(`div`,{children:[(0,b.jsx)(`div`,{style:{fontWeight:600},children:`Черновик обновлён автоматически`}),(0,b.jsx)(`div`,{style:{opacity:.72},children:`Последнее сохранение: 2 минуты назад`})]}),(0,b.jsx)(a,{variant:`transparent`,children:`Сбросить`})]})}),(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,onClick:t,children:`Отмена`}),(0,b.jsx)(a,{variant:`success`,onClick:t,children:`Применить`})]})]})]})}},E={name:`Длинный контент`,args:{size:`lg`,height:`min(38rem, 75dvh)`,title:`Журнал изменений`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть длинный контент`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsx)(`div`,{style:{display:`grid`,gap:12},children:Array.from({length:18},(e,t)=>(0,b.jsxs)(`div`,{style:{padding:12,borderRadius:8,border:`1px solid var(--border-1)`,background:`var(--surface-1)`},children:[(0,b.jsxs)(`div`,{style:{fontWeight:600},children:[`Событие #`,t+1]}),(0,b.jsx)(`div`,{style:{opacity:.72},children:`Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.`})]},t))})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:t,children:`Закрыть`})})]})]})}},D={name:`Размеры`,args:{size:`sm`,title:`Размер SM`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:12,justifyContent:`center`},children:[`sm`,`md`,`lg`,`xl`,`inside`].map(e=>(0,b.jsx)(a,{variant:`transparent`,onClick:()=>n({isOpen:!0,size:e,title:`Размер ${e.toUpperCase()}`}),children:e.toUpperCase()},e))}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,b.jsx)(`div`,{children:`Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.`}),(0,b.jsx)(`div`,{style:{opacity:.72},children:"Проверьте отступы, читабельность и поведение при `Escape`."})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:t,children:`Понятно`})})]})]})}},O={name:`Стек модалок`,args:{size:`lg`,title:`Первая модалка`},render:function(){let{args:e,updateArgs:t}=v(),[n,r]=(0,y.useState)(!1),i=()=>{r(!1),e.onClose(),t({isOpen:!1})};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>t({isOpen:!0}),children:`Открыть первую модалку`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:i,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,b.jsx)(`div`,{children:"Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой."}),(0,b.jsx)(a,{variant:`transparent`,onClick:()=>r(!0),children:`Открыть вторую модалку`})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{variant:`transparent`,onClick:i,children:`Закрыть первую`})})]}),(0,b.jsxs)(u,{isOpen:n,onClose:()=>r(!1),size:`sm`,title:`Вторая модалка`,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,b.jsx)(`div`,{children:`Эта модалка должна считаться верхней в стеке.`}),(0,b.jsx)(m,{label:`Короткое поле`,value:`Фокус внутри`,onChange:()=>{}})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:()=>r(!1),children:`Закрыть вторую`})})]})]})}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+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-CIzkWNwp.js";import{n as i,t as a}from"./Button-CEzU6vMY.js";import{a as o,i as s,n as c,o as l,r as u,s as d,t as f}from"./ModalManagerProvider-BoJChAx2.js";import{l as p,t as m}from"./Input-X5FLaExp.js";var h=t({Controlled:()=>w,ScrollableContent:()=>E,Sizes:()=>D,StackedModals:()=>O,WithToolbarAndFooter:()=>T,__namedExportsOrder:()=>k,default:()=>C});function g({children:e}){return(0,b.jsx)(`div`,{style:{minHeight:`60dvh`,padding:24,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e})}function _(){let[e,t]=(0,y.useState)(`Алексей`),[n,r]=(0,y.useState)(`Департамент автоматизации бизнеса`);return(0,b.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,b.jsx)(m,{label:`Имя`,value:e,onChange:t,placeholder:`Введите имя`}),(0,b.jsx)(m,{label:`Подразделение`,value:n,onChange:r,placeholder:`Введите подразделение`}),(0,b.jsxs)(`div`,{style:{padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[`Текущие значения: `,e||`не указано`,`, `,n||`не указано`]})]})}function v(){let[e,t]=x();return{args:e,updateArgs:t,close:()=>{e.onClose(),t({isOpen:!1})}}}var y,b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{y=n(),i(),p(),d(),c(),b=r(),{useArgs:x}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:S}=__STORYBOOK_MODULE_TEST__,C={title:`Shared/UI/Modal`,component:u,parameters:{atomicCanvas:!0,layout:`fullscreen`,docs:{description:{component:"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`."}}},decorators:[e=>(0,b.jsx)(f,{children:(0,b.jsx)(g,{children:e()})})],args:{isOpen:!1,title:`Редактирование профиля`,size:`md`,height:void 0,onClose:S(),children:(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,children:`Отмена`}),(0,b.jsx)(a,{children:`Сохранить`})]})]})},argTypes:{isOpen:{description:`Управляет видимостью модального окна.`,control:`boolean`},title:{description:`Заголовок модального окна.`,control:`text`},size:{description:`Предустановленный размер модального окна.`,control:`inline-radio`,options:[`sm`,`md`,`lg`,`xl`,`inside`]},height:{description:`Явная высота body-области модалки.`,control:`text`},onClose:{description:"Вызывается при закрытии по кнопке, `Escape` или пользовательскому действию.",control:!1},children:{description:"Композиция из `ModalToolbar`, `ModalContent`, `ModalFooter`.",control:!1}}},w={name:`Управляемая модалка`,render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть модалку`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,onClick:t,children:`Отмена`}),(0,b.jsx)(a,{onClick:t,children:`Сохранить`})]})]})]})}},T={name:`Полная композиция`,args:{title:`Редактирование профиля`,height:`min(34rem, 70dvh)`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть сценарий редактирования`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(l,{children:(0,b.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:12,padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[(0,b.jsxs)(`div`,{children:[(0,b.jsx)(`div`,{style:{fontWeight:600},children:`Черновик обновлён автоматически`}),(0,b.jsx)(`div`,{style:{opacity:.72},children:`Последнее сохранение: 2 минуты назад`})]}),(0,b.jsx)(a,{variant:`transparent`,children:`Сбросить`})]})}),(0,b.jsx)(s,{children:(0,b.jsx)(_,{})}),(0,b.jsxs)(o,{children:[(0,b.jsx)(a,{variant:`transparent`,onClick:t,children:`Отмена`}),(0,b.jsx)(a,{variant:`success`,onClick:t,children:`Применить`})]})]})]})}},E={name:`Длинный контент`,args:{size:`lg`,height:`min(38rem, 75dvh)`,title:`Журнал изменений`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>n({isOpen:!0}),children:`Открыть длинный контент`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsx)(`div`,{style:{display:`grid`,gap:12},children:Array.from({length:18},(e,t)=>(0,b.jsxs)(`div`,{style:{padding:12,borderRadius:8,border:`1px solid var(--border-1)`,background:`var(--surface-1)`},children:[(0,b.jsxs)(`div`,{style:{fontWeight:600},children:[`Событие #`,t+1]}),(0,b.jsx)(`div`,{style:{opacity:.72},children:`Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.`})]},t))})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:t,children:`Закрыть`})})]})]})}},D={name:`Размеры`,args:{size:`sm`,title:`Размер SM`},render:function(){let{args:e,close:t,updateArgs:n}=v();return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:12,justifyContent:`center`},children:[`sm`,`md`,`lg`,`xl`,`inside`].map(e=>(0,b.jsx)(a,{variant:`transparent`,onClick:()=>n({isOpen:!0,size:e,title:`Размер ${e.toUpperCase()}`}),children:e.toUpperCase()},e))}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:t,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,b.jsx)(`div`,{children:`Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.`}),(0,b.jsx)(`div`,{style:{opacity:.72},children:"Проверьте отступы, читабельность и поведение при `Escape`."})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:t,children:`Понятно`})})]})]})}},O={name:`Стек модалок`,args:{size:`lg`,title:`Первая модалка`},render:function(){let{args:e,updateArgs:t}=v(),[n,r]=(0,y.useState)(!1),i=()=>{r(!1),e.onClose(),t({isOpen:!1})};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{onClick:()=>t({isOpen:!0}),children:`Открыть первую модалку`}),(0,b.jsxs)(u,{...e,isOpen:e.isOpen,onClose:i,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,b.jsx)(`div`,{children:"Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой."}),(0,b.jsx)(a,{variant:`transparent`,onClick:()=>r(!0),children:`Открыть вторую модалку`})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{variant:`transparent`,onClick:i,children:`Закрыть первую`})})]}),(0,b.jsxs)(u,{isOpen:n,onClose:()=>r(!1),size:`sm`,title:`Вторая модалка`,children:[(0,b.jsx)(s,{children:(0,b.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,b.jsx)(`div`,{children:`Эта модалка должна считаться верхней в стеке.`}),(0,b.jsx)(m,{label:`Короткое поле`,value:`Фокус внутри`,onChange:()=>{}})]})}),(0,b.jsx)(o,{children:(0,b.jsx)(a,{onClick:()=>r(!1),children:`Закрыть вторую`})})]})]})}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   name: "Управляемая модалка",
   render: function Render() {
     const {

package/storybook-static/assets/{ModalManagerProvider-CtrgehPS.js → ModalManagerProvider-BoJChAx2.js}

@@ -1 +1 @@
-import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./x-DRm1wyYI.js";import{n as a}from"./iframe-CE1ro1AE.js";import{t as o}from"./react-dom-2o2phaJG.js";import{a as s,i as c}from"./utils-DUM89eIj.js";import{a as l,n as u,r as d,t as ee}from"./dom-B3G_GtJw.js";import{n as f,t as p}from"./FlexContainer-LmZIdhq2.js";import{n as m,t as te}from"./Button-Ez6zTRLH.js";import{a as ne,c as h,l as g,n as re,o as _,r as ie,s as v,t as y}from"./react-B2hhruMd.js";import{n as b,t as ae}from"./GridContainer-qDguE1HS.js";import{n as x,t as S}from"./Scrollable-DUOHq_cZ.js";function oe(){!v.current&&ne();let[e]=(0,C.useState)(g.current);return e}var C;function w(){return(w=e((()=>{h(),_(),C=n()})))()}var T,E,D,O,k,A,j,M,N,P,F,I;function L(){return(L=e((()=>{T=`vGPUKV`,E=`O7gb7P`,D=`RVq8v3`,O=`PCSUAL`,k=`XDCHzq`,A=`t1kl8L`,j=`o3PEEB`,M=`WhUkxm`,N=`NDgdMi`,P=`JDlse5`,F=`FaDKSt`,I={modal:T,sm:E,md:D,lg:O,xl:k,xxl:A,inside:j,header:M,body:N,headerText:P,headerButton:F}})))()}var R,z,se;function B(){return(B=e((()=>{R={hidden:{opacity:0,scale:.96,y:12},visible:{opacity:1,scale:1,y:0}},z={duration:.18,ease:[.22,1,.36,1]},se={duration:0}})))()}var V,H,U;function W(){return(W=e((()=>{V=n(),H=(0,V.createContext)({modals:[],openModal:()=>{},closeModal:()=>{},isTopModal:()=>!1}),U=()=>(0,V.useContext)(H)})))()}var G,K,q,J,Y,X,ce;function le(){return(le=e((()=>{G=t(n(),1),d(),c(),r(),y(),K=o(),m(),f(),b(),x(),L(),B(),W(),q=a(),J=({children:e,className:t})=>(0,q.jsx)(`div`,{className:s(`surface2 paddingMd borderBottom`,t),children:e}),J.displayName=`Modal.Toolbar`,Y=({children:e,className:t,scrollable:n})=>(0,q.jsx)(`div`,{className:s(`paddingMd h100 overflowHidden`,t),children:n?(0,q.jsx)(S,{className:`h100`,children:e}):e}),Y.displayName=`Modal.Content`,X=({children:e,className:t})=>(0,q.jsx)(`div`,{className:s(`surface2 borderTop paddingMd`,t),children:(0,q.jsx)(p,{gap:`sm`,align:`center`,justify:`end`,children:e})}),X.displayName=`Modal.Footer`,ce=({isOpen:e,title:t,size:n=`sm`,height:r,onClose:a,children:o})=>{let c=(0,G.useId)(),d=(0,G.useId)(),{modals:f,openModal:p,closeModal:m,isTopModal:ne}=U(),h=oe(),g=(0,G.useRef)(null),_=(0,G.useRef)(0),v=e&&(f.length===0||ne(c));(0,G.useEffect)(()=>{e&&(g.current=document.activeElement instanceof HTMLElement?document.activeElement:null)},[e]);let y=l({active:e||!1,trapFocus:!0,restoreFocus:!1});u({active:v||!1,onDismiss:a,containerRef:y}),(0,G.useEffect)(()=>{e&&p(c)},[e,c,p]),(0,G.useEffect)(()=>()=>{window.cancelAnimationFrame(_.current),m(c)},[m,c]);function b(){m(c);let e=g.current;_.current=window.requestAnimationFrame(()=>{e?.isConnected&&e.focus(),g.current=null})}let x=ee(`modal-root`);if(!x)return null;let S=null,C=null,w=null,T=G.Children.toArray(o);for(let e of T)switch(e.type.displayName){case J.displayName:if(S)throw Error(`Modal: duplicate <Toolbar> found`);S=e;break;case X.displayName:if(w)throw Error(`Modal: duplicate <Footer> found`);w=e;break;case Y.displayName:if(C)throw Error(`Modal: duplicate <Content> found`);C=e}return(0,K.createPortal)((0,q.jsx)(ie,{onExitComplete:b,children:e?(0,q.jsxs)(re.div,{ref:y,className:s(I.modal,I[n]),style:{height:r},role:`dialog`,"aria-modal":`true`,"aria-labelledby":d,"aria-describedby":`${d}-content`,initial:`hidden`,animate:`visible`,exit:`hidden`,variants:R,transition:h?se:z,children:[(0,q.jsxs)(`div`,{className:s(I.header,S?``:`borderBottom`),children:[(0,q.jsx)(`h3`,{className:I.headerText,id:d,children:t}),(0,q.jsx)(te,{icon:(0,q.jsx)(i,{}),className:I.headerButton,variant:`ghost`,"aria-label":`Закрыть модальное окно`,onClick:a})]}),(0,q.jsxs)(ae,{id:`${d}-content`,templateRows:`${S?`auto`:``} 1fr ${w?`auto`:``}`.trim(),className:I.body,children:[S,C,w]})]}):null}),x)},J.__docgenInfo={description:``,methods:[],displayName:`Modal.Toolbar`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}},Y.__docgenInfo={description:``,methods:[],displayName:`Modal.Content`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``},scrollable:{required:!1,tsType:{name:`boolean`},description:``}}},X.__docgenInfo={description:``,methods:[],displayName:`Modal.Footer`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}}})))()}function ue({children:e,compensateScrollbar:t=!1}){let[n,r]=(0,Z.useState)([]),i=(0,Z.useRef)(0),a=(0,Z.useRef)(0),o=(0,Z.useRef)(``),s=(0,Z.useRef)(!1),c=(0,Z.useCallback)(e=>{r(t=>[...t,e])},[]),l=(0,Z.useCallback)(e=>{r(t=>t.filter(t=>t!==e))},[]),u=(0,Z.useCallback)(e=>n[n.length-1]===e,[n]);return(0,Z.useEffect)(()=>{let e=i.current===0;if(e&&n.length>0){let e=window.scrollY,r=document.querySelector(`#app-root`);a.current=Math.max(0,window.innerWidth-document.documentElement.clientWidth),o.current=document.body.style.paddingRight,document.body.style.position=`fixed`,document.body.style.top=`-${e}px`,document.body.style.width=`100%`,t&&(document.body.style.paddingRight=`${a.current}px`,s.current=!0),r?.setAttribute(`inert`,`true`),i.current=n.length;return}if(!e&&n.length>0&&t!==s.current&&(document.body.style.paddingRight=t?`${a.current}px`:o.current,s.current=t),!e&&n.length===0){let e=document.querySelector(`#app-root`),t=parseInt(document.body.style.top||`0`)*-1;document.body.style.position=``,document.body.style.top=``,document.body.style.width=``,s.current&&=(document.body.style.paddingRight=o.current,!1),e?.removeAttribute(`inert`),window.scrollTo({top:t,left:0,behavior:`instant`})}i.current=n.length},[t,n.length]),(0,Q.jsx)(H.Provider,{value:{modals:n,openModal:c,closeModal:l,isTopModal:u},children:e})}var Z,Q;function $(){return($=e((()=>{Z=t(n(),1),W(),Q=a(),ue.__docgenInfo={description:`Провайдер для централизованного управления стеком модальных окон. Дает вложенным компонентам доступ к открытию и закрытию модалок через контекст.`,methods:[],displayName:`ModalManagerProvider`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},compensateScrollbar:{required:!1,tsType:{name:`boolean`},description:`Компенсирует исчезновение скроллбара правым padding у body.`,defaultValue:{value:`false`,computed:!1}}}}})))()}export{X as a,w as c,Y as i,$ as n,J as o,ce as r,le as s,ue as t};
+import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./x-DpV1OV1-.js";import{n as a}from"./iframe-CIzkWNwp.js";import{t as o}from"./react-dom-2o2phaJG.js";import{a as s,i as c}from"./utils-DUM89eIj.js";import{a as l,n as u,r as d,t as ee}from"./dom-B3G_GtJw.js";import{n as f,t as p}from"./FlexContainer-LmZIdhq2.js";import{n as m,t as te}from"./Button-CEzU6vMY.js";import{a as ne,c as h,l as g,n as re,o as _,r as ie,s as v,t as y}from"./react-BBjpR4Fr.js";import{n as b,t as ae}from"./GridContainer-qDguE1HS.js";import{n as x,t as S}from"./Scrollable-DZp3ByoS.js";function oe(){!v.current&&ne();let[e]=(0,C.useState)(g.current);return e}var C;function w(){return(w=e((()=>{h(),_(),C=n()})))()}var T,E,D,O,k,A,j,M,N,P,F,I;function L(){return(L=e((()=>{T=`vGPUKV`,E=`O7gb7P`,D=`RVq8v3`,O=`PCSUAL`,k=`XDCHzq`,A=`t1kl8L`,j=`o3PEEB`,M=`WhUkxm`,N=`NDgdMi`,P=`JDlse5`,F=`FaDKSt`,I={modal:T,sm:E,md:D,lg:O,xl:k,xxl:A,inside:j,header:M,body:N,headerText:P,headerButton:F}})))()}var R,z,se;function B(){return(B=e((()=>{R={hidden:{opacity:0,scale:.96,y:12},visible:{opacity:1,scale:1,y:0}},z={duration:.18,ease:[.22,1,.36,1]},se={duration:0}})))()}var V,H,U;function W(){return(W=e((()=>{V=n(),H=(0,V.createContext)({modals:[],openModal:()=>{},closeModal:()=>{},isTopModal:()=>!1}),U=()=>(0,V.useContext)(H)})))()}var G,K,q,J,Y,X,ce;function le(){return(le=e((()=>{G=t(n(),1),d(),c(),r(),y(),K=o(),m(),f(),b(),x(),L(),B(),W(),q=a(),J=({children:e,className:t})=>(0,q.jsx)(`div`,{className:s(`surface2 paddingMd borderBottom`,t),children:e}),J.displayName=`Modal.Toolbar`,Y=({children:e,className:t,scrollable:n})=>(0,q.jsx)(`div`,{className:s(`paddingMd h100 overflowHidden`,t),children:n?(0,q.jsx)(S,{className:`h100`,children:e}):e}),Y.displayName=`Modal.Content`,X=({children:e,className:t})=>(0,q.jsx)(`div`,{className:s(`surface2 borderTop paddingMd`,t),children:(0,q.jsx)(p,{gap:`sm`,align:`center`,justify:`end`,children:e})}),X.displayName=`Modal.Footer`,ce=({isOpen:e,title:t,size:n=`sm`,height:r,onClose:a,children:o})=>{let c=(0,G.useId)(),d=(0,G.useId)(),{modals:f,openModal:p,closeModal:m,isTopModal:ne}=U(),h=oe(),g=(0,G.useRef)(null),_=(0,G.useRef)(0),v=e&&(f.length===0||ne(c));(0,G.useEffect)(()=>{e&&(g.current=document.activeElement instanceof HTMLElement?document.activeElement:null)},[e]);let y=l({active:e||!1,trapFocus:!0,restoreFocus:!1});u({active:v||!1,onDismiss:a,containerRef:y}),(0,G.useEffect)(()=>{e&&p(c)},[e,c,p]),(0,G.useEffect)(()=>()=>{window.cancelAnimationFrame(_.current),m(c)},[m,c]);function b(){m(c);let e=g.current;_.current=window.requestAnimationFrame(()=>{e?.isConnected&&e.focus(),g.current=null})}let x=ee(`modal-root`);if(!x)return null;let S=null,C=null,w=null,T=G.Children.toArray(o);for(let e of T)switch(e.type.displayName){case J.displayName:if(S)throw Error(`Modal: duplicate <Toolbar> found`);S=e;break;case X.displayName:if(w)throw Error(`Modal: duplicate <Footer> found`);w=e;break;case Y.displayName:if(C)throw Error(`Modal: duplicate <Content> found`);C=e}return(0,K.createPortal)((0,q.jsx)(ie,{onExitComplete:b,children:e?(0,q.jsxs)(re.div,{ref:y,className:s(I.modal,I[n]),style:{height:r},role:`dialog`,"aria-modal":`true`,"aria-labelledby":d,"aria-describedby":`${d}-content`,initial:`hidden`,animate:`visible`,exit:`hidden`,variants:R,transition:h?se:z,children:[(0,q.jsxs)(`div`,{className:s(I.header,S?``:`borderBottom`),children:[(0,q.jsx)(`h3`,{className:I.headerText,id:d,children:t}),(0,q.jsx)(te,{icon:(0,q.jsx)(i,{}),className:I.headerButton,variant:`ghost`,"aria-label":`Закрыть модальное окно`,onClick:a})]}),(0,q.jsxs)(ae,{id:`${d}-content`,templateRows:`${S?`auto`:``} 1fr ${w?`auto`:``}`.trim(),className:I.body,children:[S,C,w]})]}):null}),x)},J.__docgenInfo={description:``,methods:[],displayName:`Modal.Toolbar`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}},Y.__docgenInfo={description:``,methods:[],displayName:`Modal.Content`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``},scrollable:{required:!1,tsType:{name:`boolean`},description:``}}},X.__docgenInfo={description:``,methods:[],displayName:`Modal.Footer`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}}})))()}function ue({children:e,compensateScrollbar:t=!1}){let[n,r]=(0,Z.useState)([]),i=(0,Z.useRef)(0),a=(0,Z.useRef)(0),o=(0,Z.useRef)(``),s=(0,Z.useRef)(!1),c=(0,Z.useCallback)(e=>{r(t=>[...t,e])},[]),l=(0,Z.useCallback)(e=>{r(t=>t.filter(t=>t!==e))},[]),u=(0,Z.useCallback)(e=>n[n.length-1]===e,[n]);return(0,Z.useEffect)(()=>{let e=i.current===0;if(e&&n.length>0){let e=window.scrollY,r=document.querySelector(`#app-root`);a.current=Math.max(0,window.innerWidth-document.documentElement.clientWidth),o.current=document.body.style.paddingRight,document.body.style.position=`fixed`,document.body.style.top=`-${e}px`,document.body.style.width=`100%`,t&&(document.body.style.paddingRight=`${a.current}px`,s.current=!0),r?.setAttribute(`inert`,`true`),i.current=n.length;return}if(!e&&n.length>0&&t!==s.current&&(document.body.style.paddingRight=t?`${a.current}px`:o.current,s.current=t),!e&&n.length===0){let e=document.querySelector(`#app-root`),t=parseInt(document.body.style.top||`0`)*-1;document.body.style.position=``,document.body.style.top=``,document.body.style.width=``,s.current&&=(document.body.style.paddingRight=o.current,!1),e?.removeAttribute(`inert`),window.scrollTo({top:t,left:0,behavior:`instant`})}i.current=n.length},[t,n.length]),(0,Q.jsx)(H.Provider,{value:{modals:n,openModal:c,closeModal:l,isTopModal:u},children:e})}var Z,Q;function $(){return($=e((()=>{Z=t(n(),1),W(),Q=a(),ue.__docgenInfo={description:`Провайдер для централизованного управления стеком модальных окон. Дает вложенным компонентам доступ к открытию и закрытию модалок через контекст.`,methods:[],displayName:`ModalManagerProvider`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},compensateScrollbar:{required:!1,tsType:{name:`boolean`},description:`Компенсирует исчезновение скроллбара правым padding у body.`,defaultValue:{value:`false`,computed:!1}}}}})))()}export{X as a,w as c,Y as i,$ as n,J as o,ce as r,le as s,ue as t};

package/storybook-static/assets/MultiSelect-CILXhKyj.js

@@ -0,0 +1,2 @@
+import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./CheckBox-UlZDcbgz.js";import{n as a}from"./iframe-CIzkWNwp.js";import{n as o,t as ee}from"./OptionButton-CQVIwI2y.js";import{n as s,t as c}from"./Text-5-YdhIB8.js";import{n as l,t as u}from"./ui.module-D4CuGr8r.js";import{c as d,i as te,l as f,m as p,n as m,p as h,r as g,s as _,t as v,u as y}from"./usePickerTriggerController-B1Mub3-v.js";import{l as ne,n as b,t as x,u as S}from"./Option-DqmRqyOQ.js";import{i as C,n as re,r as w,t as T}from"./usePickerQuery-BfayEntP.js";import{n as ie,t as ae}from"./usePickerDefaultFilter-Be420WNF.js";import{a as oe,i as E,n as se,o as D,s as ce,t as le}from"./defaultRenderers-V5HI39JH.js";var O,k,A;function j(){return(j=e((()=>{O=`_9oSdQi`,k=`d9SDKQ`,A={multiSelect:O,optionCheckBox:k}})))()}function M({text:e,isError:t}){return(0,N.jsxs)(`div`,{className:l.uiPopupOption,children:[(0,N.jsx)(`span`,{className:l.uiPopupOptionIcon}),(0,N.jsx)(c,{color:t?`error`:`primary`,children:e})]})}var N;function P(){return(P=e((()=>{s(),u(),N=a(),M.__docgenInfo={description:"Скелетон строки опции для `MultiSelect`. Используется во время загрузки или при отображении ошибок получения списка.",methods:[],displayName:`MultiSelectOptionSkeleton`,props:{text:{required:!0,tsType:{name:`string`},description:``},isError:{required:!1,tsType:{name:`boolean`},description:``}}}})))()}function ue({isNoData:e,error:t,children:n}){return e?(0,L.jsx)(w,{emptyState:(0,L.jsx)(M,{text:`Нет данных`})}):t?(0,L.jsx)(w,{errorState:(0,L.jsx)(M,{isError:!0,text:`Ошибка загрузки`})}):(0,L.jsx)(L.Fragment,{children:n})}function F(e,t){return e[t]}function de(e,t,n){return Array.from(new Set([e[n],e[t],...Object.values(e)]))}function fe(e,t,n){if(e.length!==t.length)return!1;let r=new Set(t.map(e=>F(e,n)));return e.every(e=>r.has(F(e,n)))}function pe({entries:e,listId:t,activeIndex:n,selectedKeys:r,codeKey:a,query:o,highlightQuery:s,getOptionDisabled:c,getOptionId:l,setOptionRef:u,toggleOption:d,selectOnlyOption:te,renderItem:f}){return e.map(({item:e,index:p})=>{let m=p===n,h=F(e,a),g=r.has(h),_=c?.(e)??!1,v=f(e,{selected:g,active:m,disabled:_,query:o,highlightQuery:s});return(0,L.jsxs)(x,{id:l(t,p),ref:e=>u(p,e),role:`option`,"aria-selected":g,"aria-disabled":_||void 0,selected:g,active:m,disabled:_,children:[(0,L.jsx)(`div`,{className:A.optionCheckBox,onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),children:(0,L.jsx)(i,{value:g,disabled:_,"aria-label":`Выбрать ${s??h}`,onChange:()=>d(e)})}),(0,L.jsx)(ee,{tabIndex:-1,disabled:_,text:v.text,code:v.code,searchText:s,onMouseDown:e=>e.preventDefault(),onClick:()=>te(e)})]},`${h}-${p}`)})}var I,L,R,z;function B(){return(B=e((()=>{I=t(n(),1),r(),b(),o(),p(),y(),C(),d(),ae(),g(),T(),D(),v(),S(),E(),j(),P(),L=a(),R=[],z=(0,I.forwardRef)(({codeKey:e,textKey:t,hideCode:n,items:r,value:i,onChange:a,label:o,description:ee,placeholder:s,size:c,query:l,defaultQuery:u,highlightQuery:d,onQuery:p,defaultFilter:g=!0,onOpen:v,onClose:y,getOptionDisabled:b,disabled:x,error:S,isLoading:C,renderToken:w,renderToolbar:T,renderItem:ae},E)=>{let D=(0,I.useRef)(null),[O,k]=(0,I.useState)(!1),j=`search-multi`,M=i??R,N=(0,I.useMemo)(()=>new Set(M.map(t=>F(t,e))),[e,M]),P=(0,I.useMemo)(()=>r.filter(t=>!N.has(F(t,e))),[e,N,r]),z=(0,I.useMemo)(()=>oe([...M,...r],e,t),[e,M,r,t]),{query:B,setQuery:V,resetQueryOnClose:me}=re({query:l,defaultQuery:u,onQuery:p,triggerMode:j}),he=e=>{O&&!e&&me&&V(``),k(e)},H=ie({options:M,query:B,enabled:g,getSearchText:t=>de(t,e,z)}),U=ie({options:P,query:B,enabled:g,getSearchText:t=>de(t,e,z)}),W=(0,I.useMemo)(()=>[...H,...U],[U,H]),ge=H.length>0?0:-1,{draftValue:G,setDraftValue:K,prepareOpen:_e}=ce({value:M,open:O,onCommit:a,onOpen:v,onClose:y,isEqual:(t,n)=>fe(t,n,e)}),q=(0,I.useMemo)(()=>new Set(G.map(t=>F(t,e))),[e,G]),ve=(0,I.useMemo)(()=>({selectedItems:G,committedSelectedItems:M,selectedKeys:q,open:O}),[M,G,O,q]),J=(0,I.useCallback)(e=>b?.(e,ve)??!1,[b,ve]),{activeIndex:Y,context:ye,floatingStyles:be,getFloatingProps:xe,setReference:Se,setFloating:Ce,setOptionRef:we,close:Te,openList:Ee,toggleOpen:De,selectActiveOption:Oe,handleReferenceKeyDown:ke,handleFloatingKeyDown:Ae,getOptionId:je,getActiveOptionId:Me}=te({options:W,selectedIndex:ge,open:O,onOpenChange:he,onSelect:void 0,disabled:x,getOptionDisabled:J,closeOnSelect:!1,allowOpenWithoutOptions:!0,triggerMode:j}),Ne=d??B,X=t=>{let n=F(t,e);K(r=>r.some(t=>F(t,e)===n)?r.filter(t=>F(t,e)!==n):J(t)?r:[...r,t])},Pe=e=>{if(D.current=e,typeof E==`function`){E(e);return}E&&(E.current=e)},Fe=()=>{K([]),O||a([])},Ie=()=>{K(t=>{let n=[...t],r=new Set(t.map(t=>F(t,e)));for(let t of W){let i=F(t,e);!r.has(i)&&!J(t)&&(r.add(i),n.push(t))}return n})},Le=()=>{K([])},Re=e=>{J(e)||(K([e]),Te())},ze=O?G:M,Z=ze.length>0,Be={selectedItems:ze,committedSelectedItems:M,availableItems:U,query:B,open:O,clearSelection:Fe,selectAll:Ie,deselectAll:Le},Ve=w===void 0?se({codeKey:e,textKey:z}):w,He=ae??le({codeKey:e,textKey:z,hideCode:n}),Ue=typeof Ve==`function`?Ve(Be):null,We=typeof T==`function`?T(Be):T,Q=H.map((e,t)=>({item:e,index:t})),Ge=U.map((e,t)=>({item:e,index:t+Q.length})),Ke=!C&&!S&&W.length===0,$=m({mode:j,open:O,currentQuery:B,hasDisplayValue:!1,inputRef:D,setQuery:V,openList:Ee,close:Te,toggleOpen:De,onBeforeOpen:()=>{O||_e()}});return(0,L.jsx)(h,{label:o,description:ee,disabled:x,size:c,className:A.multiSelect,children:({controlId:t,labelId:n,describedBy:i})=>{let a=`${t}-listbox`;return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(_,{ref:Pe,rootRef:Se,id:t,type:`text`,role:`combobox`,autoComplete:`off`,isLoading:C,disabled:x,open:O,optionCount:r.length,label:o,placeholder:s,placeholderFallback:`Выберите значения`,value:B,selectedValue:Ue,hasSelection:Z,showSelectedValue:Z&&B.length===0,clearable:!0,onClear:Fe,clearAriaLabel:`Очистить все`,onToggleMouseDown:$.handleToggleMouseDown,onToggleClick:$.handleToggleClick,"aria-labelledby":n,"aria-describedby":i,"aria-haspopup":`listbox`,"aria-expanded":O,"aria-controls":O?a:void 0,"aria-autocomplete":`list`,"aria-activedescendant":O?Me(a):void 0,rootClassName:`flex alignItemsCenter`,onChange:e=>{$.handleTriggerInputChange(e.target.value)},onClick:$.handleTriggerClick,onFocus:e=>{$.handleTriggerFocus(e.currentTarget)},onKeyDown:e=>{ke(e),!e.defaultPrevented&&$.handleTriggerKeyDown({event:e,onActivateWhenOpen:()=>{if(Y>=0){let e=W[Y];if(e){X(e);return}}Oe()},enableClosedArrowDownOpen:!0,suppressClosedArrowUp:!0})}}),(0,L.jsx)(f,{open:O,context:ye,floatingStyles:be,listId:a,labelId:n,descriptionId:i,activeOptionId:O?Me(a):void 0,setFloating:Ce,getFloatingProps:xe,onKeyDown:Ae,initialFocus:-1,returnFocus:!1,tabIndex:-1,toolbar:We,selectionActions:T===void 0?{onSelectAll:Ie,onDeselectAll:Le}:void 0,children:(0,L.jsx)(ue,{isNoData:Ke,error:S,children:(0,L.jsxs)(`div`,{className:`scrollable h100`,children:[(0,L.jsx)(pe,{entries:Q,listId:a,activeIndex:Y,selectedKeys:q,codeKey:e,query:B,highlightQuery:Ne,getOptionDisabled:J,getOptionId:je,setOptionRef:we,toggleOption:X,selectOnlyOption:Re,renderItem:He}),Q.length>0&&P.length>0&&(0,L.jsx)(ne,{className:`marginBlockSm`}),(0,L.jsx)(pe,{entries:Ge,listId:a,activeIndex:Y,selectedKeys:q,codeKey:e,query:B,highlightQuery:Ne,getOptionDisabled:J,getOptionId:je,setOptionRef:we,toggleOption:X,selectOnlyOption:Re,renderItem:He})]})})})]})}})}),z.displayName=`MultiSelect`,z.__docgenInfo={description:`Поле множественного выбора с внутренним черновиком значений и подтверждением выбора при закрытии списка.
+Подходит как для самостоятельного использования, так и как базовый слой для OData-оберток.`,methods:[],displayName:`MultiSelect`,props:{renderToken:{required:!1,tsType:{name:`union`,raw:`((context: TContext) => React.ReactNode) | null | false`,elements:[{name:`unknown`},{name:`null`},{name:`literal`,value:`false`}]},description:``},renderToolbar:{required:!1,tsType:{name:`union`,raw:`((context: TContext) => React.ReactNode) | null | false`,elements:[{name:`unknown`},{name:`null`},{name:`literal`,value:`false`}]},description:``},renderItem:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(item: CollectionItem, state: MultiSelectItemState) => MultiSelectOptionContent`,signature:{arguments:[{type:{name:`CollectionItem`},name:`item`},{type:{name:`MultiSelectItemState`},name:`state`}],return:{name:`MultiSelectOptionContent`}}},description:``},label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},codeKey:{required:!0,tsType:{name:`string`},description:``},textKey:{required:!1,tsType:{name:`string`},description:``},hideCode:{required:!1,tsType:{name:`boolean`},description:``},query:{required:!1,tsType:{name:`string`},description:``},defaultQuery:{required:!1,tsType:{name:`string`},description:``},highlightQuery:{required:!1,tsType:{name:`string`},description:``},onQuery:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},defaultFilter:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},items:{required:!0,tsType:{name:`Array`,elements:[{name:`TOption`}],raw:`TOption[]`},description:``},getOptionDisabled:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(item: TOption, context: MultiSelectOptionDisableContext) => boolean`,signature:{arguments:[{type:{name:`TOption`},name:`item`},{type:{name:`MultiSelectOptionDisableContext`},name:`context`}],return:{name:`boolean`}}},description:``},onOpen:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},onClose:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: TOption[]) => void`,signature:{arguments:[{type:{name:`Array`,elements:[{name:`TOption`}],raw:`TOption[]`},name:`value`}],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},isLoading:{required:!1,tsType:{name:`boolean`},description:``}}}})))()}export{B as n,z as t};

package/storybook-static/assets/{MultiSelect-C4uTzWsY.js → MultiSelect-CU7avopN.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CE1ro1AE.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-DGyM6J7r.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./MultiSelect.stories-BbRKK0p6.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:p,parameters:{docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CIzkWNwp.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-CdL0FBl-.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./MultiSelect.stories-DFtFExi3.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:p,parameters:{docs:{toc:!0}}}),`
 `,(0,x.jsx)(u,{children:`MultiSelect`}),`
 `,(0,x.jsx)(o,{children:`Мультиселект для локальных коллекций с токенами, поиском и состояниями загрузки`}),`
 `,(0,x.jsx)(t.p,{children:`MultiSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/MultiSelect-DI_UD1B-.css

@@ -0,0 +1 @@
+._9oSdQi{padding:0}.d9SDKQ{--check-box-control-size:auto;padding-left:var(--space-sm);flex-shrink:0;display:inline-flex}