@ryuzaki13/react-foundation-ui 1.1.8 → 1.1.9

package/storybook-static/assets/LayoutPicker.stories-Du0HfXjJ.js

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

package/storybook-static/assets/{Listbox-YWvaCK77.js → Listbox-Cup327ne.js}

@@ -1,4 +1,4 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-D2VXMZGt.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-BXKB7xbF.js";import{CustomRender as p,MultiSelect as m,SingleSelect as h,n as g,t as _}from"./Listbox.stories-BSJmd-mH.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CdNjp0UR.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-BEzdmfRR.js";import{CustomRender as p,MultiSelect as m,SingleSelect as h,n as g,t as _}from"./Listbox.stories-BlrBt5zM.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
 `,(0,b.jsx)(c,{children:`Listbox`}),`
 `,(0,b.jsx)(i,{children:`Список выбора для single- и multi-select сценариев с кастомным рендером элементов`}),`
 `,(0,b.jsx)(o.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/{Listbox.stories-BSJmd-mH.js → Listbox.stories-BlrBt5zM.js}

@@ -1,4 +1,4 @@
-import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-BlBhvHwk.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o,n as s,r as c,s as l,t as u}from"./utils-De5IM4sM.js";import{t as d,wt as f}from"./lucide-react-DMR456up.js";import{n as p,t as m}from"./ui.module-wFHXkJzp.js";function h(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 c(e,y)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return c(e,y)}function g(e){let{value:t,defaultValue:n,multiple:r,focusOnMount:i,renderItem:o,getKey:d,options:m,onChange:g,id:b,...x}=e,S=t!==void 0,C=(0,_.useId)(),w=b??`${C}-listbox`,[T,E]=(0,_.useState)(n),D=(0,_.useRef)(null),[O,k]=(0,_.useState)(()=>h(m,t??n,r)),A=(0,_.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,_.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,_.useLayoutEffect)(()=>{i&&D.current?.focus()},[i]),(0,v.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=>u(m,e,1,y));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>u(m,e,-1,y));else if(e.key===`Home`)e.preventDefault(),k(c(m,y));else if(e.key===`End`)e.preventDefault(),k(l(m,y));else if(s(e,()=>{let e=m[j];e&&M(e)}))return},...x,className:a(p.uiPanel,`scrollable`),children:m.map((e,t)=>{let n=r?Array.isArray(A)&&A.includes(e.value):A===e.value,i=t===j;return(0,v.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:a(p.uiPopupOption,e.disabled&&p.disabled,i&&p.uiPopupOptionActive,n&&p.selected),children:[n?(0,v.jsx)(f,{className:p.uiPopupOptionIcon}):(0,v.jsx)(`span`,{className:p.uiPopupOptionIcon}),(0,v.jsx)(`div`,{children:o?o(e,n,i):e.label??String(e.value)})]},d?d(e,t):t)})})}var _,v,y,b=n((()=>{_=t(r(),1),o(),d(),m(),v=i(),y=e=>e.disabled===!0,g.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})),x=e({CustomRender:()=>O,MultiSelect:()=>D,SingleSelect:()=>E,__namedExportsOrder:()=>k,default:()=>T});function S(e){return e.multiple?(0,w.jsx)(g,{...e,multiple:!0}):(0,w.jsx)(g,{...e})}var C,w,T,E,D,O,k,A=n((()=>{C=t(r(),1),b(),w=i(),T={title:`Shared/UI/Listbox`,component:S,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`}}},E={render:e=>{let[t,n]=(0,C.useState)(`medium`);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,w.jsx)(S,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},D={render:e=>{let[t,n]=(0,C.useState)([`low`,`high`]);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,w.jsx)(S,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},O={render:e=>{let[t,n]=(0,C.useState)(`low`);return(0,w.jsx)(S,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,w.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,w.jsx)(`span`,{children:e.label}),(0,w.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-BxBCFrOJ.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o,n as s,r as c,s as l,t as u}from"./utils-CMnxoKbT.js";import{t as d,wt as f}from"./lucide-react-BmnaUuit.js";import{n as p,t as m}from"./ui.module-wFHXkJzp.js";function h(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 c(e,y)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return c(e,y)}function g(e){let{value:t,defaultValue:n,multiple:r,focusOnMount:i,renderItem:o,getKey:d,options:m,onChange:g,id:b,...x}=e,S=t!==void 0,C=(0,_.useId)(),w=b??`${C}-listbox`,[T,E]=(0,_.useState)(n),D=(0,_.useRef)(null),[O,k]=(0,_.useState)(()=>h(m,t??n,r)),A=(0,_.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,_.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,_.useLayoutEffect)(()=>{i&&D.current?.focus()},[i]),(0,v.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=>u(m,e,1,y));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>u(m,e,-1,y));else if(e.key===`Home`)e.preventDefault(),k(c(m,y));else if(e.key===`End`)e.preventDefault(),k(l(m,y));else if(s(e,()=>{let e=m[j];e&&M(e)}))return},...x,className:a(p.uiPanel,`scrollable`),children:m.map((e,t)=>{let n=r?Array.isArray(A)&&A.includes(e.value):A===e.value,i=t===j;return(0,v.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:a(p.uiPopupOption,e.disabled&&p.disabled,i&&p.uiPopupOptionActive,n&&p.selected),children:[n?(0,v.jsx)(f,{className:p.uiPopupOptionIcon}):(0,v.jsx)(`span`,{className:p.uiPopupOptionIcon}),(0,v.jsx)(`div`,{children:o?o(e,n,i):e.label??String(e.value)})]},d?d(e,t):t)})})}var _,v,y,b=n((()=>{_=t(r(),1),o(),d(),m(),v=i(),y=e=>e.disabled===!0,g.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})),x=e({CustomRender:()=>O,MultiSelect:()=>D,SingleSelect:()=>E,__namedExportsOrder:()=>k,default:()=>T});function S(e){return e.multiple?(0,w.jsx)(g,{...e,multiple:!0}):(0,w.jsx)(g,{...e})}var C,w,T,E,D,O,k,A=n((()=>{C=t(r(),1),b(),w=i(),T={title:`Shared/UI/Listbox`,component:S,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`}}},E={render:e=>{let[t,n]=(0,C.useState)(`medium`);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,w.jsx)(S,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},D={render:e=>{let[t,n]=(0,C.useState)([`low`,`high`]);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,w.jsx)(S,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},O={render:e=>{let[t,n]=(0,C.useState)(`low`);return(0,w.jsx)(S,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,w.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,w.jsx)(`span`,{children:e.label}),(0,w.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [value, setValue] = useState<string>("medium");
     return <div style={{

package/storybook-static/assets/{Modal-CQW1mNSz.js → Modal-d1loZR-M.js}

@@ -1,4 +1,4 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-D2VXMZGt.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-BXKB7xbF.js";import{Controlled as p,ScrollableContent as m,Sizes as h,StackedModals as g,WithToolbarAndFooter as _,n as v,t as y}from"./Modal.stories-BEpdLX9t.js";function b(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(a,{of:y,parameters:{docs:{toc:!0}}}),`
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CdNjp0UR.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-BEzdmfRR.js";import{Controlled as p,ScrollableContent as m,Sizes as h,StackedModals as g,WithToolbarAndFooter as _,n as v,t as y}from"./Modal.stories-ClQnn-f_.js";function b(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(a,{of:y,parameters:{docs:{toc:!0}}}),`
 `,(0,S.jsx)(c,{children:`Modal`}),`
 `,(0,S.jsx)(i,{children:`Составная модалка с контентом, toolbar и footer для пользовательских диалоговых сценариев`}),`
 `,(0,S.jsx)(o.p,{children:`Modal уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.

package/storybook-static/assets/{Modal.stories-BEpdLX9t.js → Modal.stories-ClQnn-f_.js}

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