@ryuzaki13/react-foundation-ui 1.4.3 → 1.4.5

package/storybook-static/assets/LayoutPicker.stories-DXcn-WXQ.js

@@ -0,0 +1,449 @@
+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 ee}from"./check-fB4gCKB_.js";import{n as i}from"./iframe-DaN-XFub.js";import{a,i as o}from"./utils-DUM89eIj.js";import{n as s,t as c}from"./ui.module-DoMIk8Oc.js";import{c as l,g as u,h as te,i as ne,l as re,n as ie,r as ae,s as oe,t as se,u as ce}from"./usePickerTriggerController-BHBjSLtn.js";import{n as le,t as ue}from"./PickerTriggerActions-BBZmXagt.js";function de(e,t){return{gridTemplateColumns:`repeat(${e.columns}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${e.rows}, minmax(${t??0}em, 1fr))`}}function fe(e){return{gridColumn:`${e.column} / span ${e.columnSpan??1}`,gridRow:`${e.row} / span ${e.rowSpan??1}`}}var d;function f(){return(f=e((()=>{d=[{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 p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{p=`_959ulH`,m=`Ch-SZL`,h=`SmdPit`,g=`giOtGs`,_=`_57Tr0T`,v=`Tkhulr`,y=`VQlniu`,b=`wb39Kf`,x=`HGvQdT`,S=`rZuYyb`,C=`vNV6Q2`,w=`_3ytPPa`,T=`koxYU-`,E=`k8xLa2`,D=`_5pd3Bb`,O=`VrHnjN`,k={valueOverlay:p,triggerInput:m,triggerText:h,popup:g,popupLayout:_,popupBody:v,options:y,option:b,optionActive:x,optionSelected:S,optionPreviewWrap:C,optionCheck:w,preview:T,previewPlaceholder:E,previewCompact:D,previewCell:O}})))()}function pe({preset:e,compact:t=!1}){return(0,N.jsx)(`span`,{className:a(k.preview,t&&k.previewCompact),style:de(e),"aria-hidden":`true`,"data-ui":`layout-picker-preview`,children:e.cells.map(t=>(0,N.jsx)(`span`,{className:k.previewCell,style:fe(t)},`${e.id}:${t.id}`))})}function j({id:e,label:t,description:n,value:r,onChange:i,presets:o=d,disabled:c,getPresetDisabled:l,placeholder:u=P,showPlaceholder:ae=!1,size:se,ariaLabel:ce,className:le,triggerClassName:de,popupClassName:fe,placement:f=`bottom-start`}){let p=(0,M.useRef)(null),[m,h]=(0,M.useState)(!1),g=o.findIndex(e=>e.id===r),_=g>=0?o[g]:void 0,v=_??o[0],y=_?.label??u,{activeIndex:b,context:x,floatingStyles:S,getFloatingProps:C,setReference:w,setFloating:T,setOptionRef:E,close:D,openList:O,toggleOpen:A,selectOption:j,selectActiveOption:F,handleReferenceKeyDown:I,handleFloatingKeyDown:L,getOptionId:R,getActiveOptionId:z}=ne({options:o,selectedIndex:g,open:m,onOpenChange:h,getOptionDisabled:l,onSelect:e=>i(e.id),disabled:c,placement:f,triggerMode:`display`}),B=ie({mode:`display`,open:m,currentQuery:``,hasDisplayValue:_!==void 0,inputRef:p,openList:O,close:D,toggleOpen:A}),V=e=>{p.current=e};return(0,N.jsx)(te,{id:e,label:t,description:n,disabled:c,size:se,className:le,children:({controlId:e,labelId:t,describedBy:n})=>{let r=`${e}-listbox`;return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(oe,{ref:V,rootRef:w,id:e,type:`button`,disabled:c,readOnly:!0,autoComplete:`off`,role:`combobox`,value:y,"aria-haspopup":`listbox`,"aria-expanded":m,"aria-controls":m?r:void 0,"aria-labelledby":t,"aria-describedby":n,"aria-autocomplete":`none`,"aria-activedescendant":m?z(r):void 0,"aria-label":t?void 0:ce??`Выбрать layout. Текущее значение: ${y}`,"data-ui":`layout-picker-trigger`,rootClassName:de,inputClassName:k.triggerInput,overlay:(0,N.jsxs)(`div`,{className:k.valueOverlay,children:[v?(0,N.jsx)(pe,{preset:v,compact:!0}):(0,N.jsx)(`span`,{className:k.previewPlaceholder}),ae?(0,N.jsx)(`span`,{className:a(k.triggerText,s.uiPlaceholder),"data-ui":`layout-picker-placeholder`,children:u}):null]}),endAdornment:(0,N.jsx)(ue,{open:m,disabled:c,onToggleMouseDown:B.handleToggleMouseDown,onToggleClick:B.handleToggleClick,openAriaLabel:`Открыть список layout`,closeAriaLabel:`Закрыть список layout`}),onClick:B.handleTriggerClick,onFocus:e=>{B.handleTriggerFocus(e.currentTarget)},onKeyDown:e=>{I(e),!e.defaultPrevented&&B.handleTriggerKeyDown({event:e,onActivateWhenOpen:F,enableSpaceActivation:!0})}}),(0,N.jsx)(re,{open:m,context:x,floatingStyles:S,listId:r,labelId:t,descriptionId:n,activeOptionId:z(r),setFloating:T,getFloatingProps:C,onKeyDown:L,className:a(s.uiPopupOptions,k.popup,fe),layoutClassName:k.popupLayout,bodyClassName:k.popupBody,children:(0,N.jsx)(`div`,{className:k.options,children:o.map((e,t)=>{let n=t===g,i=t===b,o=l?.(e)??!1,s=R(r,t);return(0,N.jsxs)(`button`,{id:s,ref:e=>E(t,e),type:`button`,role:`option`,tabIndex:-1,disabled:o,"aria-selected":n,"aria-disabled":o||void 0,"aria-label":e.description?`${e.label}. ${e.description}`:e.label,className:a(k.option,n&&k.optionSelected,i&&k.optionActive),"data-ui":`layout-picker-option`,"data-selected":n||void 0,onMouseDown:e=>e.preventDefault(),onClick:()=>j(e),children:[(0,N.jsx)(`span`,{className:k.optionPreviewWrap,children:(0,N.jsx)(pe,{preset:e})}),(0,N.jsxs)(`span`,{className:`fontSizeSm`,children:[(0,N.jsx)(`span`,{children:e.label}),e.description?(0,N.jsx)(`span`,{children:e.description}):null]}),(0,N.jsx)(`span`,{className:k.optionCheck,"aria-hidden":`true`,children:n?(0,N.jsx)(ee,{}):null})]},e.id)})})})]})}})}var M,N,P;function F(){return(F=e((()=>{M=n(),o(),r(),u(),ce(),le(),l(),ae(),se(),c(),f(),A(),N=i(),P=`Выберите раскладку`,j.__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}}}}})))()}var I,L,R,z,B,V,H,me,he,U;function ge(){return(ge=e((()=>{I=`buT8ds`,L=`vDpJVR`,R=`-GMI1h`,z=`Xgkzn9`,B=`X--lo-`,V=`W5rEjx`,H=`BgilL7`,me=`ALGrVl`,he=`IrqK1d`,U={canvas:I,toolbar:L,summary:R,summaryItem:z,summaryValue:B,muted:V,layoutPreview:H,layoutCell:me,layoutCellTitle:he}})))()}var _e=t({Controlled:()=>J,CustomPresets:()=>X,Disabled:()=>$,DisabledPresets:()=>Z,InToolbar:()=>Q,Placeholder:()=>Y,__namedExportsOrder:()=>we,default:()=>Ce});function ve(e,t){return t.find(t=>t.id===e)}function W({value:e,presets:t}){let n=ve(e,t);return(0,K.jsxs)(`div`,{className:U.summary,"aria-live":`polite`,children:[(0,K.jsxs)(`div`,{className:U.summaryItem,children:[(0,K.jsx)(`span`,{children:`ID`}),(0,K.jsx)(`span`,{className:U.summaryValue,children:e||`не выбрано`})]}),(0,K.jsxs)(`div`,{className:U.summaryItem,children:[(0,K.jsx)(`span`,{children:`Название`}),(0,K.jsx)(`span`,{className:U.summaryValue,children:n?.label??`Layout не выбран`})]}),(0,K.jsxs)(`div`,{className:U.summaryItem,children:[(0,K.jsx)(`span`,{children:`Сетка`}),(0,K.jsx)(`span`,{className:U.summaryValue,children:n?`${n.columns} x ${n.rows}`:`нет данных`})]}),(0,K.jsxs)(`div`,{className:U.summaryItem,children:[(0,K.jsx)(`span`,{children:`Ячеек`}),(0,K.jsx)(`span`,{className:U.summaryValue,children:n?.cells.length??0})]})]})}function ye({value:e,presets:t}){let n=ve(e,t);if(!n)return null;let r=n.columns,ee=n.rows,i=n.cells;return(0,K.jsx)(`div`,{className:U.layoutPreview,style:{gridTemplateColumns:`repeat(${r}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${ee}, minmax(0, 1fr))`},children:i.map((e,t)=>(0,K.jsxs)(`div`,{className:U.layoutCell,style:{gridColumn:`${e.column} / span ${e.columnSpan}`,gridRow:`${e.row} / span ${e.rowSpan}`},children:[(0,K.jsxs)(`span`,{className:U.layoutCellTitle,children:[`Область `,t+1]}),(0,K.jsxs)(`span`,{className:U.muted,children:[`Колонка `,e.column,`, строка `,e.row,`; span `,e.columnSpan,` x `,e.rowSpan]})]},e.id))})}function be(){let[e,t]=(0,G.useState)(`1x2`);return(0,K.jsxs)(`div`,{className:U.canvas,children:[(0,K.jsx)(`div`,{className:U.toolbar,children:(0,K.jsx)(j,{label:`Layout панели`,value:e,onChange:t,ariaLabel:`Выбрать layout панели`})}),(0,K.jsx)(W,{value:e,presets:d}),(0,K.jsx)(ye,{value:e,presets:d})]})}var G,K,xe,Se,q,Ce,J,Y,X,Z,Q,$,we;function Te(){return(Te=e((()=>{G=n(),f(),F(),ge(),K=i(),{useArgs:xe}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:Se}=__STORYBOOK_MODULE_TEST__,q=[{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}]}],Ce={title:`Shared/UI/LayoutPicker`,component:j,args:{label:`Layout панели`,description:`Выберите схему размещения областей.`,value:d[0].id,onChange:Se(),presets:d,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`]}}},J={args:{value:`2x1`},name:`Контролируемый выбор`,render:function(e){let[,t]=xe(),n=e.presets??d;return(0,K.jsxs)(`div`,{className:U.canvas,children:[(0,K.jsx)(j,{...e,presets:n,onChange:n=>{e.onChange(n),t({value:n})}}),(0,K.jsx)(W,{value:e.value??``,presets:n})]})}},Y={name:`Без выбранного значения`,render:e=>{let[t,n]=(0,G.useState)(``),r=e.presets??d;return(0,K.jsxs)(`div`,{className:U.canvas,children:[(0,K.jsx)(j,{...e,value:t,presets:r,placeholder:`Layout ещё не выбран`,showPlaceholder:!0,onChange:t=>{n(t),e.onChange(t)}}),(0,K.jsx)(W,{value:t,presets:r})]})},args:{value:``}},X={name:`Кастомные пресеты`,render:e=>{let[t,n]=(0,G.useState)(q[0].id);return(0,K.jsxs)(`div`,{className:U.canvas,children:[(0,K.jsx)(j,{...e,value:t,presets:q,ariaLabel:`Выбрать layout дашборда`,onChange:t=>{n(t),e.onChange(t)}}),(0,K.jsx)(W,{value:t,presets:q}),(0,K.jsx)(ye,{value:t,presets:q})]})},args:{value:q[0].id,presets:q}},Z={name:`Заблокированные пресеты`,render:e=>{let[t,n]=(0,G.useState)(`1x1`);return(0,K.jsxs)(`div`,{className:U.canvas,children:[(0,K.jsx)(j,{...e,value:t,getPresetDisabled:e=>e.id===`1x2`||e.id===`2x2-l`,onChange:t=>{n(t),e.onChange(t)}}),(0,K.jsx)(`div`,{className:U.muted,children:`Пресеты с двумя колонками в этом сценарии недоступны.`}),(0,K.jsx)(W,{value:t,presets:d})]})}},Q={name:`В панели настройки`,render:()=>(0,K.jsx)(be,{})},$={name:`Заблокированный контрол`,args:{disabled:!0,value:`1x2`}},J.parameters={...J.parameters,docs:{...J.parameters?.docs,source:{originalSource:`{
+  args: {
+    value: "2x1"
+  },
+  name: "Контролируемый выбор",
+  render: function Render(args) {
+    const [, updateArgs] = useArgs<LayoutPickerProps>();
+    const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
+    return <div className={styles.canvas}>
+                <LayoutPicker {...args} presets={presets} onChange={layoutId => {
+        args.onChange(layoutId);
+        updateArgs({
+          value: layoutId
+        });
+      }} />
+                <PresetSummary value={args.value ?? ""} presets={presets} />
+            </div>;
+  }
+}`,...J.parameters?.docs?.source}}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  name: "Без выбранного значения",
+  render: args => {
+    const [value, setValue] = useState("");
+    const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
+    return <div className={styles.canvas}>
+                <LayoutPicker {...args} value={value} presets={presets} placeholder="Layout ещё не выбран" showPlaceholder onChange={layoutId => {
+        setValue(layoutId);
+        args.onChange(layoutId);
+      }} />
+                <PresetSummary value={value} presets={presets} />
+            </div>;
+  },
+  args: {
+    value: ""
+  }
+}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  name: "Кастомные пресеты",
+  render: args => {
+    const [value, setValue] = useState<string>(dashboardPresets[0].id);
+    return <div className={styles.canvas}>
+                <LayoutPicker {...args} value={value} presets={dashboardPresets} ariaLabel="Выбрать layout дашборда" onChange={layoutId => {
+        setValue(layoutId);
+        args.onChange(layoutId);
+      }} />
+                <PresetSummary value={value} presets={dashboardPresets} />
+                <LayoutPreview value={value} presets={dashboardPresets} />
+            </div>;
+  },
+  args: {
+    value: dashboardPresets[0].id,
+    presets: dashboardPresets
+  }
+}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  name: "Заблокированные пресеты",
+  render: args => {
+    const [value, setValue] = useState("1x1");
+    return <div className={styles.canvas}>
+                <LayoutPicker {...args} value={value} getPresetDisabled={preset => preset.id === "1x2" || preset.id === "2x2-l"} onChange={layoutId => {
+        setValue(layoutId);
+        args.onChange(layoutId);
+      }} />
+                <div className={styles.muted}>Пресеты с двумя колонками в этом сценарии недоступны.</div>
+                <PresetSummary value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />
+            </div>;
+  }
+}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
+  name: "В панели настройки",
+  render: () => <ControlledExample />
+}`,...Q.parameters?.docs?.source}}},$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  name: "Заблокированный контрол",
+  args: {
+    disabled: true,
+    value: "1x2"
+  }
+}`,...$.parameters?.docs?.source}}},we=[`Controlled`,`Placeholder`,`CustomPresets`,`DisabledPresets`,`InToolbar`,`Disabled`]})))()}export{Q as a,Te as c,Z as i,X as n,_e as o,$ as r,Y as s,J as t};

package/storybook-static/assets/{Listbox-CxISK8c5.js → Listbox-DF8E6oMR.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CrnMVMTc.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-Dz3dJBcm.js";import{a as p,i as m,n as h,r as g,t as _}from"./Listbox.stories-BdQBmVFI.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:h,parameters:{docs:{toc:!0}}}),`
+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"./Listbox.stories-C98_9wX3.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:h,parameters:{docs:{toc:!0}}}),`
 `,(0,b.jsx)(u,{children:`Listbox`}),`
 `,(0,b.jsx)(o,{children:`Список выбора для single- и multi-select сценариев с кастомным рендером элементов`}),`
 `,(0,b.jsx)(t.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/{Listbox.stories-BdQBmVFI.js → Listbox.stories-C98_9wX3.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,t as i}from"./check-BMyoSD8F.js";import{n as a}from"./iframe-CrnMVMTc.js";import{a as o,i as s,n as c,r as l,s as u,t as d}from"./utils-DUM89eIj.js";import{n as f,t as p}from"./ui.module-DoMIk8Oc.js";function m(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 l(e,v)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return l(e,v)}function h(e){let{value:t,defaultValue:n,multiple:r,focusOnMount:a,renderItem:s,getKey:p,options:h,onChange:y,id:b,...x}=e,S=t!==void 0,C=(0,g.useId)(),w=b??`${C}-listbox`,[T,E]=(0,g.useState)(n),D=(0,g.useRef)(null),[O,k]=(0,g.useState)(()=>m(h,t??n,r)),A=(0,g.useMemo)(()=>(S?t:T)??(r?[]:null),[T,S,r,t]),j=O,M=t=>{if(t.disabled)return;let n;if(e.multiple){let r=Array.isArray(A)?A:[];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);S||E(n)};return(0,g.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,g.useLayoutEffect)(()=>{a&&D.current?.focus()},[a]),(0,_.jsx)(`ul`,{ref:D,id:w,role:`listbox`,"aria-multiselectable":r||void 0,"aria-activedescendant":j>=0?`${w}-option-${j}`:void 0,tabIndex:0,onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),k(e=>d(h,e,1,v));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>d(h,e,-1,v));else if(e.key===`Home`)e.preventDefault(),k(l(h,v));else if(e.key===`End`)e.preventDefault(),k(u(h,v));else if(c(e,()=>{let e=h[j];e&&M(e)}))return},...x,className:o(f.uiPanel,`scrollable`),children:h.map((e,t)=>{let n=r?Array.isArray(A)&&A.includes(e.value):A===e.value,a=t===j;return(0,_.jsxs)(`li`,{id:`${w}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,onMouseDown:n=>{n.preventDefault(),!e.disabled&&(k(t),M(e))},tabIndex:-1,className:o(f.uiPopupOption,e.disabled&&f.disabled,a&&f.uiPopupOptionActive,n&&f.selected),children:[n?(0,_.jsx)(i,{className:f.uiPopupOptionIcon}):(0,_.jsx)(`span`,{className:f.uiPopupOptionIcon}),(0,_.jsx)(`div`,{children:s?s(e,n,a):e.label??String(e.value)})]},p?p(e,t):t)})})}var g,_,v;function y(){return(y=e((()=>{g=n(),s(),r(),p(),_=a(),v=e=>e.disabled===!0,h.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})))()}var b=t({CustomRender:()=>D,MultiSelect:()=>E,SingleSelect:()=>T,__namedExportsOrder:()=>O,default:()=>w});function x(e){return e.multiple?(0,C.jsx)(h,{...e,multiple:!0}):(0,C.jsx)(h,{...e})}var S,C,w,T,E,D,O;function k(){return(k=e((()=>{S=n(),y(),C=a(),w={title:`Shared/UI/Listbox`,component:x,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},T={render:e=>{let[t,n]=(0,S.useState)(`medium`);return(0,C.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,C.jsx)(x,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,C.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},E={render:e=>{let[t,n]=(0,S.useState)([`low`,`high`]);return(0,C.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,C.jsx)(x,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,C.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},D={render:e=>{let[t,n]=(0,S.useState)(`low`);return(0,C.jsx)(x,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,C.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,C.jsx)(`span`,{children:e.label}),(0,C.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},T.parameters={...T.parameters,docs:{...T.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,t as i}from"./check-fB4gCKB_.js";import{n as a}from"./iframe-DaN-XFub.js";import{a as o,i as s,n as c,r as l,s as u,t as d}from"./utils-DUM89eIj.js";import{n as f,t as p}from"./ui.module-DoMIk8Oc.js";function m(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 l(e,v)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return l(e,v)}function h(e){let{value:t,defaultValue:n,multiple:r,focusOnMount:a,renderItem:s,getKey:p,options:h,onChange:y,id:b,...x}=e,S=t!==void 0,C=(0,g.useId)(),w=b??`${C}-listbox`,[T,E]=(0,g.useState)(n),D=(0,g.useRef)(null),[O,k]=(0,g.useState)(()=>m(h,t??n,r)),A=(0,g.useMemo)(()=>(S?t:T)??(r?[]:null),[T,S,r,t]),j=O,M=t=>{if(t.disabled)return;let n;if(e.multiple){let r=Array.isArray(A)?A:[];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);S||E(n)};return(0,g.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,g.useLayoutEffect)(()=>{a&&D.current?.focus()},[a]),(0,_.jsx)(`ul`,{ref:D,id:w,role:`listbox`,"aria-multiselectable":r||void 0,"aria-activedescendant":j>=0?`${w}-option-${j}`:void 0,tabIndex:0,onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),k(e=>d(h,e,1,v));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>d(h,e,-1,v));else if(e.key===`Home`)e.preventDefault(),k(l(h,v));else if(e.key===`End`)e.preventDefault(),k(u(h,v));else if(c(e,()=>{let e=h[j];e&&M(e)}))return},...x,className:o(f.uiPanel,`scrollable`),children:h.map((e,t)=>{let n=r?Array.isArray(A)&&A.includes(e.value):A===e.value,a=t===j;return(0,_.jsxs)(`li`,{id:`${w}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,onMouseDown:n=>{n.preventDefault(),!e.disabled&&(k(t),M(e))},tabIndex:-1,className:o(f.uiPopupOption,e.disabled&&f.disabled,a&&f.uiPopupOptionActive,n&&f.selected),children:[n?(0,_.jsx)(i,{className:f.uiPopupOptionIcon}):(0,_.jsx)(`span`,{className:f.uiPopupOptionIcon}),(0,_.jsx)(`div`,{children:s?s(e,n,a):e.label??String(e.value)})]},p?p(e,t):t)})})}var g,_,v;function y(){return(y=e((()=>{g=n(),s(),r(),p(),_=a(),v=e=>e.disabled===!0,h.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})))()}var b=t({CustomRender:()=>D,MultiSelect:()=>E,SingleSelect:()=>T,__namedExportsOrder:()=>O,default:()=>w});function x(e){return e.multiple?(0,C.jsx)(h,{...e,multiple:!0}):(0,C.jsx)(h,{...e})}var S,C,w,T,E,D,O;function k(){return(k=e((()=>{S=n(),y(),C=a(),w={title:`Shared/UI/Listbox`,component:x,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},T={render:e=>{let[t,n]=(0,S.useState)(`medium`);return(0,C.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,C.jsx)(x,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,C.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},E={render:e=>{let[t,n]=(0,S.useState)([`low`,`high`]);return(0,C.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,C.jsx)(x,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,C.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},D={render:e=>{let[t,n]=(0,S.useState)(`low`);return(0,C.jsx)(x,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,C.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,C.jsx)(`span`,{children:e.label}),(0,C.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [value, setValue] = useState<string>("medium");
     return <div style={{

package/storybook-static/assets/{Modal-BiaAWMdV.js → Modal-CXvDgktT.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CrnMVMTc.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-Dz3dJBcm.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-GV7fGqyd.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-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 _,s as v,t as y}from"./Modal.stories-DAC_QwN7.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-GV7fGqyd.js → Modal.stories-DAC_QwN7.js}

@@ -1,4 +1,4 @@
-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"./x-CyFk00QC.js";import{n as o}from"./iframe-CrnMVMTc.js";import{t as s}from"./react-dom-2o2phaJG.js";import{a as c,i as l}from"./utils-DUM89eIj.js";import{a as ee,n as te,r as ne,t as re}from"./dom-B3G_GtJw.js";import{n as u,t as d}from"./FlexContainer-LmZIdhq2.js";import{n as f,t as p}from"./Button-VdPdxcvG.js";import{a as ie,c as m,l as h,n as ae,o as oe,r as se,s as g,t as _}from"./react-CpOcCp9T.js";import{c as v,t as y}from"./Input-DtOsW7ur.js";import{n as b,t as ce}from"./GridContainer-qDguE1HS.js";import{n as x,t as le}from"./Scrollable-3Z6b5g0Z.js";function ue(){!g.current&&ie();let[e]=(0,de.useState)(h.current);return e}var de;function S(){return(S=e((()=>{m(),oe(),de=r()})))()}var C,w,fe,pe,me,he,ge,T,E,D,O,k;function A(){return(A=e((()=>{C=`vGPUKV`,w=`O7gb7P`,fe=`RVq8v3`,pe=`PCSUAL`,me=`XDCHzq`,he=`t1kl8L`,ge=`o3PEEB`,T=`WhUkxm`,E=`NDgdMi`,D=`JDlse5`,O=`FaDKSt`,k={modal:C,sm:w,md:fe,lg:pe,xl:me,xxl:he,inside:ge,header:T,body:E,headerText:D,headerButton:O}})))()}var j,M,N;function P(){return(P=e((()=>{j={hidden:{opacity:0,scale:.96,y:12},visible:{opacity:1,scale:1,y:0}},M={duration:.18,ease:[.22,1,.36,1]},N={duration:0}})))()}var F,I,L;function R(){return(R=e((()=>{F=r(),I=(0,F.createContext)({modals:[],openModal:()=>{},closeModal:()=>{},isTopModal:()=>!1}),L=()=>(0,F.useContext)(I)})))()}var z,_e,B,V,H,U,W;function ve(){return(ve=e((()=>{z=t(r(),1),ne(),l(),i(),_(),_e=s(),f(),u(),b(),x(),A(),P(),R(),B=o(),V=({children:e,className:t})=>(0,B.jsx)(`div`,{className:c(`surface2 paddingMd borderBottom`,t),children:e}),V.displayName=`Modal.Toolbar`,H=({children:e,className:t,scrollable:n})=>(0,B.jsx)(`div`,{className:c(`paddingMd h100 overflowHidden`,t),children:n?(0,B.jsx)(le,{className:`h100`,children:e}):e}),H.displayName=`Modal.Content`,U=({children:e,className:t})=>(0,B.jsx)(`div`,{className:c(`surface2 borderTop paddingMd`,t),children:(0,B.jsx)(d,{gap:`sm`,align:`center`,justify:`end`,children:e})}),U.displayName=`Modal.Footer`,W=({isOpen:e,title:t,size:n=`sm`,height:r,onClose:i,children:o})=>{let s=(0,z.useId)(),l=(0,z.useId)(),{modals:ne,openModal:u,closeModal:d,isTopModal:f}=L(),ie=ue(),m=(0,z.useRef)(null),h=(0,z.useRef)(0),oe=e&&(ne.length===0||f(s));(0,z.useEffect)(()=>{e&&(m.current=document.activeElement instanceof HTMLElement?document.activeElement:null)},[e]);let g=ee({active:e||!1,trapFocus:!0,restoreFocus:!1});te({active:oe||!1,onDismiss:i,containerRef:g}),(0,z.useEffect)(()=>{e&&u(s)},[e,s,u]),(0,z.useEffect)(()=>()=>{window.cancelAnimationFrame(h.current),d(s)},[d,s]);function _(){d(s);let e=m.current;h.current=window.requestAnimationFrame(()=>{e?.isConnected&&e.focus(),m.current=null})}let v=re(`modal-root`);if(!v)return null;let y=null,b=null,x=null,le=z.Children.toArray(o);for(let e of le)switch(e.type.displayName){case V.displayName:if(y)throw Error(`Modal: duplicate <Toolbar> found`);y=e;break;case U.displayName:if(x)throw Error(`Modal: duplicate <Footer> found`);x=e;break;case H.displayName:if(b)throw Error(`Modal: duplicate <Content> found`);b=e}return(0,_e.createPortal)((0,B.jsx)(se,{onExitComplete:_,children:e?(0,B.jsxs)(ae.div,{ref:g,className:c(k.modal,k[n]),style:{height:r},role:`dialog`,"aria-modal":`true`,"aria-labelledby":l,"aria-describedby":`${l}-content`,initial:`hidden`,animate:`visible`,exit:`hidden`,variants:j,transition:ie?N:M,children:[(0,B.jsxs)(`div`,{className:c(k.header,y?``:`borderBottom`),children:[(0,B.jsx)(`h3`,{className:k.headerText,id:l,children:t}),(0,B.jsx)(p,{icon:(0,B.jsx)(a,{}),className:k.headerButton,variant:`ghost`,"aria-label":`Закрыть модальное окно`,onClick:i})]}),(0,B.jsxs)(ce,{id:`${l}-content`,templateRows:`${y?`auto`:``} 1fr ${x?`auto`:``}`.trim(),className:k.body,children:[y,b,x]})]}):null}),v)},V.__docgenInfo={description:``,methods:[],displayName:`Modal.Toolbar`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}},H.__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:``}}},U.__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 ye({children:e,compensateScrollbar:t=!1}){let[n,r]=(0,G.useState)([]),i=(0,G.useRef)(0),a=(0,G.useRef)(0),o=(0,G.useRef)(``),s=(0,G.useRef)(!1),c=(0,G.useCallback)(e=>{r(t=>[...t,e])},[]),l=(0,G.useCallback)(e=>{r(t=>t.filter(t=>t!==e))},[]),ee=(0,G.useCallback)(e=>n[n.length-1]===e,[n]);return(0,G.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,be.jsx)(I.Provider,{value:{modals:n,openModal:c,closeModal:l,isTopModal:ee},children:e})}var G,be;function xe(){return(xe=e((()=>{G=t(r(),1),R(),be=o(),ye.__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}}}}})))()}var Se=n({Controlled:()=>Y,ScrollableContent:()=>Z,Sizes:()=>Q,StackedModals:()=>$,WithToolbarAndFooter:()=>X,__namedExportsOrder:()=>Te,default:()=>we});function Ce({children:e}){return(0,J.jsx)(`div`,{style:{minHeight:`60dvh`,padding:24,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e})}function K(){let[e,t]=(0,q.useState)(`Алексей`),[n,r]=(0,q.useState)(`Департамент автоматизации бизнеса`);return(0,J.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,J.jsx)(y,{label:`Имя`,value:e,onChange:t,placeholder:`Введите имя`}),(0,J.jsx)(y,{label:`Подразделение`,value:n,onChange:r,placeholder:`Введите подразделение`}),(0,J.jsxs)(`div`,{style:{padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[`Текущие значения: `,e||`не указано`,`, `,n||`не указано`]})]})}var q,J,we,Y,X,Z,Q,$,Te;function Ee(){return(Ee=e((()=>{q=r(),f(),v(),ve(),xe(),J=o(),we={title:`Shared/UI/Modal`,component:W,parameters:{atomicCanvas:!0,layout:`fullscreen`,docs:{description:{component:"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`."}}},decorators:[e=>(0,J.jsx)(ye,{children:(0,J.jsx)(Ce,{children:e()})})],args:{isOpen:!1,title:`Редактирование профиля`,size:`md`,height:void 0,onClose:()=>{},children:(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,children:`Отмена`}),(0,J.jsx)(p,{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}}},Y={name:`Управляемая модалка`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть модалку`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),children:[(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,J.jsx)(p,{onClick:()=>n(!1),children:`Сохранить`})]})]})]})}},X={name:`Полная композиция`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть сценарий редактирования`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),height:`min(34rem, 70dvh)`,children:[(0,J.jsx)(V,{children:(0,J.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,J.jsxs)(`div`,{children:[(0,J.jsx)(`div`,{style:{fontWeight:600},children:`Черновик обновлён автоматически`}),(0,J.jsx)(`div`,{style:{opacity:.72},children:`Последнее сохранение: 2 минуты назад`})]}),(0,J.jsx)(p,{variant:`transparent`,children:`Сбросить`})]})}),(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,J.jsx)(p,{variant:`success`,onClick:()=>n(!1),children:`Применить`})]})]})]})}},Z={name:`Длинный контент`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть длинный контент`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),size:`lg`,height:`min(38rem, 75dvh)`,title:`Журнал изменений`,children:[(0,J.jsx)(H,{children:(0,J.jsx)(`div`,{style:{display:`grid`,gap:12},children:Array.from({length:18},(e,t)=>(0,J.jsxs)(`div`,{style:{padding:12,borderRadius:8,border:`1px solid var(--border-1)`,background:`var(--surface-1)`},children:[(0,J.jsxs)(`div`,{style:{fontWeight:600},children:[`Событие #`,t+1]}),(0,J.jsx)(`div`,{style:{opacity:.72},children:`Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.`})]},t))})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>n(!1),children:`Закрыть`})})]})]})}},Q={name:`Размеры`,render:()=>{let[e,t]=(0,q.useState)(null);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:12,justifyContent:`center`},children:[`sm`,`md`,`lg`,`xl`,`inside`].map(e=>(0,J.jsx)(p,{variant:`transparent`,onClick:()=>t(e),children:e.toUpperCase()},e))}),e&&(0,J.jsxs)(W,{isOpen:!0,onClose:()=>t(null),size:e,title:`Размер ${e.toUpperCase()}`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,J.jsx)(`div`,{children:`Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.`}),(0,J.jsx)(`div`,{style:{opacity:.72},children:"Проверьте отступы, читабельность и поведение при `Escape`."})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>t(null),children:`Понятно`})})]})]})}},$={name:`Стек модалок`,render:e=>{let[t,n]=(0,q.useState)(!1),[r,i]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть первую модалку`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>{i(!1),n(!1)},size:`lg`,title:`Первая модалка`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,J.jsx)(`div`,{children:"Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой."}),(0,J.jsx)(p,{variant:`transparent`,onClick:()=>i(!0),children:`Открыть вторую модалку`})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Закрыть первую`})})]}),(0,J.jsxs)(W,{isOpen:r,onClose:()=>i(!1),size:`sm`,title:`Вторая модалка`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,J.jsx)(`div`,{children:`Эта модалка должна считаться верхней в стеке.`}),(0,J.jsx)(y,{label:`Короткое поле`,value:`Фокус внутри`,onChange:()=>{}})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>i(!1),children:`Закрыть вторую`})})]})]})}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+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"./x-Dh43gJN9.js";import{n as o}from"./iframe-DaN-XFub.js";import{t as s}from"./react-dom-2o2phaJG.js";import{a as c,i as l}from"./utils-DUM89eIj.js";import{a as ee,n as te,r as ne,t as re}from"./dom-B3G_GtJw.js";import{n as u,t as d}from"./FlexContainer-LmZIdhq2.js";import{n as f,t as p}from"./Button-mjF9HSg0.js";import{a as ie,c as m,l as h,n as ae,o as oe,r as se,s as g,t as _}from"./react-KzpmXJc9.js";import{c as v,t as y}from"./Input-Co--DMHY.js";import{n as b,t as ce}from"./GridContainer-qDguE1HS.js";import{n as x,t as le}from"./Scrollable-DrxMuH2M.js";function ue(){!g.current&&ie();let[e]=(0,de.useState)(h.current);return e}var de;function S(){return(S=e((()=>{m(),oe(),de=r()})))()}var C,w,fe,pe,me,he,ge,T,E,D,O,k;function A(){return(A=e((()=>{C=`vGPUKV`,w=`O7gb7P`,fe=`RVq8v3`,pe=`PCSUAL`,me=`XDCHzq`,he=`t1kl8L`,ge=`o3PEEB`,T=`WhUkxm`,E=`NDgdMi`,D=`JDlse5`,O=`FaDKSt`,k={modal:C,sm:w,md:fe,lg:pe,xl:me,xxl:he,inside:ge,header:T,body:E,headerText:D,headerButton:O}})))()}var j,M,N;function P(){return(P=e((()=>{j={hidden:{opacity:0,scale:.96,y:12},visible:{opacity:1,scale:1,y:0}},M={duration:.18,ease:[.22,1,.36,1]},N={duration:0}})))()}var F,I,L;function R(){return(R=e((()=>{F=r(),I=(0,F.createContext)({modals:[],openModal:()=>{},closeModal:()=>{},isTopModal:()=>!1}),L=()=>(0,F.useContext)(I)})))()}var z,_e,B,V,H,U,W;function ve(){return(ve=e((()=>{z=t(r(),1),ne(),l(),i(),_(),_e=s(),f(),u(),b(),x(),A(),P(),R(),B=o(),V=({children:e,className:t})=>(0,B.jsx)(`div`,{className:c(`surface2 paddingMd borderBottom`,t),children:e}),V.displayName=`Modal.Toolbar`,H=({children:e,className:t,scrollable:n})=>(0,B.jsx)(`div`,{className:c(`paddingMd h100 overflowHidden`,t),children:n?(0,B.jsx)(le,{className:`h100`,children:e}):e}),H.displayName=`Modal.Content`,U=({children:e,className:t})=>(0,B.jsx)(`div`,{className:c(`surface2 borderTop paddingMd`,t),children:(0,B.jsx)(d,{gap:`sm`,align:`center`,justify:`end`,children:e})}),U.displayName=`Modal.Footer`,W=({isOpen:e,title:t,size:n=`sm`,height:r,onClose:i,children:o})=>{let s=(0,z.useId)(),l=(0,z.useId)(),{modals:ne,openModal:u,closeModal:d,isTopModal:f}=L(),ie=ue(),m=(0,z.useRef)(null),h=(0,z.useRef)(0),oe=e&&(ne.length===0||f(s));(0,z.useEffect)(()=>{e&&(m.current=document.activeElement instanceof HTMLElement?document.activeElement:null)},[e]);let g=ee({active:e||!1,trapFocus:!0,restoreFocus:!1});te({active:oe||!1,onDismiss:i,containerRef:g}),(0,z.useEffect)(()=>{e&&u(s)},[e,s,u]),(0,z.useEffect)(()=>()=>{window.cancelAnimationFrame(h.current),d(s)},[d,s]);function _(){d(s);let e=m.current;h.current=window.requestAnimationFrame(()=>{e?.isConnected&&e.focus(),m.current=null})}let v=re(`modal-root`);if(!v)return null;let y=null,b=null,x=null,le=z.Children.toArray(o);for(let e of le)switch(e.type.displayName){case V.displayName:if(y)throw Error(`Modal: duplicate <Toolbar> found`);y=e;break;case U.displayName:if(x)throw Error(`Modal: duplicate <Footer> found`);x=e;break;case H.displayName:if(b)throw Error(`Modal: duplicate <Content> found`);b=e}return(0,_e.createPortal)((0,B.jsx)(se,{onExitComplete:_,children:e?(0,B.jsxs)(ae.div,{ref:g,className:c(k.modal,k[n]),style:{height:r},role:`dialog`,"aria-modal":`true`,"aria-labelledby":l,"aria-describedby":`${l}-content`,initial:`hidden`,animate:`visible`,exit:`hidden`,variants:j,transition:ie?N:M,children:[(0,B.jsxs)(`div`,{className:c(k.header,y?``:`borderBottom`),children:[(0,B.jsx)(`h3`,{className:k.headerText,id:l,children:t}),(0,B.jsx)(p,{icon:(0,B.jsx)(a,{}),className:k.headerButton,variant:`ghost`,"aria-label":`Закрыть модальное окно`,onClick:i})]}),(0,B.jsxs)(ce,{id:`${l}-content`,templateRows:`${y?`auto`:``} 1fr ${x?`auto`:``}`.trim(),className:k.body,children:[y,b,x]})]}):null}),v)},V.__docgenInfo={description:``,methods:[],displayName:`Modal.Toolbar`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}},H.__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:``}}},U.__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 ye({children:e,compensateScrollbar:t=!1}){let[n,r]=(0,G.useState)([]),i=(0,G.useRef)(0),a=(0,G.useRef)(0),o=(0,G.useRef)(``),s=(0,G.useRef)(!1),c=(0,G.useCallback)(e=>{r(t=>[...t,e])},[]),l=(0,G.useCallback)(e=>{r(t=>t.filter(t=>t!==e))},[]),ee=(0,G.useCallback)(e=>n[n.length-1]===e,[n]);return(0,G.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,be.jsx)(I.Provider,{value:{modals:n,openModal:c,closeModal:l,isTopModal:ee},children:e})}var G,be;function xe(){return(xe=e((()=>{G=t(r(),1),R(),be=o(),ye.__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}}}}})))()}var Se=n({Controlled:()=>Y,ScrollableContent:()=>Z,Sizes:()=>Q,StackedModals:()=>$,WithToolbarAndFooter:()=>X,__namedExportsOrder:()=>Te,default:()=>we});function Ce({children:e}){return(0,J.jsx)(`div`,{style:{minHeight:`60dvh`,padding:24,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e})}function K(){let[e,t]=(0,q.useState)(`Алексей`),[n,r]=(0,q.useState)(`Департамент автоматизации бизнеса`);return(0,J.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,J.jsx)(y,{label:`Имя`,value:e,onChange:t,placeholder:`Введите имя`}),(0,J.jsx)(y,{label:`Подразделение`,value:n,onChange:r,placeholder:`Введите подразделение`}),(0,J.jsxs)(`div`,{style:{padding:12,borderRadius:8,background:`var(--surface-1)`,border:`1px solid var(--border-1)`},children:[`Текущие значения: `,e||`не указано`,`, `,n||`не указано`]})]})}var q,J,we,Y,X,Z,Q,$,Te;function Ee(){return(Ee=e((()=>{q=r(),f(),v(),ve(),xe(),J=o(),we={title:`Shared/UI/Modal`,component:W,parameters:{atomicCanvas:!0,layout:`fullscreen`,docs:{description:{component:"Композиционная модалка с `Toolbar`, `Content` и `Footer`, поддержкой focus trap, возврата фокуса, закрытия по `Escape` и менеджером стека через `ModalManagerProvider`."}}},decorators:[e=>(0,J.jsx)(ye,{children:(0,J.jsx)(Ce,{children:e()})})],args:{isOpen:!1,title:`Редактирование профиля`,size:`md`,height:void 0,onClose:()=>{},children:(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,children:`Отмена`}),(0,J.jsx)(p,{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}}},Y={name:`Управляемая модалка`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть модалку`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),children:[(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,J.jsx)(p,{onClick:()=>n(!1),children:`Сохранить`})]})]})]})}},X={name:`Полная композиция`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть сценарий редактирования`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),height:`min(34rem, 70dvh)`,children:[(0,J.jsx)(V,{children:(0,J.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,J.jsxs)(`div`,{children:[(0,J.jsx)(`div`,{style:{fontWeight:600},children:`Черновик обновлён автоматически`}),(0,J.jsx)(`div`,{style:{opacity:.72},children:`Последнее сохранение: 2 минуты назад`})]}),(0,J.jsx)(p,{variant:`transparent`,children:`Сбросить`})]})}),(0,J.jsx)(H,{children:(0,J.jsx)(K,{})}),(0,J.jsxs)(U,{children:[(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Отмена`}),(0,J.jsx)(p,{variant:`success`,onClick:()=>n(!1),children:`Применить`})]})]})]})}},Z={name:`Длинный контент`,render:e=>{let[t,n]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть длинный контент`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>n(!1),size:`lg`,height:`min(38rem, 75dvh)`,title:`Журнал изменений`,children:[(0,J.jsx)(H,{children:(0,J.jsx)(`div`,{style:{display:`grid`,gap:12},children:Array.from({length:18},(e,t)=>(0,J.jsxs)(`div`,{style:{padding:12,borderRadius:8,border:`1px solid var(--border-1)`,background:`var(--surface-1)`},children:[(0,J.jsxs)(`div`,{style:{fontWeight:600},children:[`Событие #`,t+1]}),(0,J.jsx)(`div`,{style:{opacity:.72},children:`Пользователь обновил настройки карточки, изменил состав полей и подтвердил сохранение конфигурации.`})]},t))})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>n(!1),children:`Закрыть`})})]})]})}},Q={name:`Размеры`,render:()=>{let[e,t]=(0,q.useState)(null);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:12,justifyContent:`center`},children:[`sm`,`md`,`lg`,`xl`,`inside`].map(e=>(0,J.jsx)(p,{variant:`transparent`,onClick:()=>t(e),children:e.toUpperCase()},e))}),e&&(0,J.jsxs)(W,{isOpen:!0,onClose:()=>t(null),size:e,title:`Размер ${e.toUpperCase()}`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,J.jsx)(`div`,{children:`Этот сценарий помогает быстро сравнить ширину и поведение модалки для разных размеров.`}),(0,J.jsx)(`div`,{style:{opacity:.72},children:"Проверьте отступы, читабельность и поведение при `Escape`."})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>t(null),children:`Понятно`})})]})]})}},$={name:`Стек модалок`,render:e=>{let[t,n]=(0,q.useState)(!1),[r,i]=(0,q.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(p,{onClick:()=>n(!0),children:`Открыть первую модалку`}),(0,J.jsxs)(W,{...e,isOpen:t,onClose:()=>{i(!1),n(!1)},size:`lg`,title:`Первая модалка`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:16},children:[(0,J.jsx)(`div`,{children:"Откройте вторую модалку и проверьте, что `Escape` закрывает только верхний слой."}),(0,J.jsx)(p,{variant:`transparent`,onClick:()=>i(!0),children:`Открыть вторую модалку`})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{variant:`transparent`,onClick:()=>n(!1),children:`Закрыть первую`})})]}),(0,J.jsxs)(W,{isOpen:r,onClose:()=>i(!1),size:`sm`,title:`Вторая модалка`,children:[(0,J.jsx)(H,{children:(0,J.jsxs)(`div`,{style:{display:`grid`,gap:12},children:[(0,J.jsx)(`div`,{children:`Эта модалка должна считаться верхней в стеке.`}),(0,J.jsx)(y,{label:`Короткое поле`,value:`Фокус внутри`,onChange:()=>{}})]})}),(0,J.jsx)(U,{children:(0,J.jsx)(p,{onClick:()=>i(!1),children:`Закрыть вторую`})})]})]})}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
   name: "Управляемая модалка",
   render: args => {
     const [open, setOpen] = useState(false);