@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.4

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-xwfNjBpV.js → Listbox-DF8E6oMR.js}

@@ -1,11 +1,11 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{CustomRender as p,MultiSelect as m,SingleSelect as h,n as g,t as _}from"./Listbox.stories-B0HctqVp.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{of:_,parameters:{docs:{toc:!0}}}),`
-`,(0,b.jsx)(l,{children:`Listbox`}),`
-`,(0,b.jsx)(a,{children:`Список выбора для single- и multi-select сценариев с кастомным рендером элементов`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-BiaKjftm.js";import{a as p,i as m,n as h,r as g,t as _}from"./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.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
 `,(0,b.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,b.jsx)(d,{}),`
-`,(0,b.jsx)(r,{of:h}),`
+`,(0,b.jsx)(f,{}),`
+`,(0,b.jsx)(i,{of:m}),`
 `,(0,b.jsx)(t.pre,{children:(0,b.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { Listbox } from "@/shared/ui";
@@ -25,14 +25,14 @@ export function Example() {
 `,(0,b.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
 `,(0,b.jsx)(t.h3,{id:`выбор-одного-значения`,children:`Выбор одного значения`}),`
 `,(0,b.jsx)(t.p,{children:`Выбор одного значения.`}),`
-`,(0,b.jsx)(u,{of:h}),`
+`,(0,b.jsx)(d,{of:m}),`
 `,(0,b.jsx)(t.h3,{id:`выбор-нескольких-значений`,children:`Выбор нескольких значений`}),`
 `,(0,b.jsx)(t.p,{children:`Выбор нескольких значений.`}),`
-`,(0,b.jsx)(u,{of:m}),`
+`,(0,b.jsx)(d,{of:g}),`
 `,(0,b.jsx)(t.h3,{id:`кастомный-рендер-элементов-списка`,children:`Кастомный рендер элементов списка`}),`
 `,(0,b.jsx)(t.p,{children:`Кастомный рендер элементов списка.`}),`
-`,(0,b.jsx)(u,{of:p}),`
+`,(0,b.jsx)(d,{of:_}),`
 `,(0,b.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,b.jsx)(c,{of:_}),`
+`,(0,b.jsx)(l,{of:h}),`
 `,(0,b.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,b.jsx)(i,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=t(),f(),s(),g()}))();export{y as default};
+`,(0,b.jsx)(a,{includePrimary:!1})]})}function y(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;function x(){return(x=e((()=>{b=t(),r(),c(),p()})))()}x();export{y as default};

package/storybook-static/assets/Listbox.stories-C98_9wX3.js

@@ -0,0 +1,47 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./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={{
+      display: "grid",
+      gap: 12,
+      maxWidth: 280
+    }}>
+                <StringListbox {...args} multiple={false} value={value} onChange={next => {
+        if (typeof next === "string") setValue(next);
+      }} />
+                <div>Выбрано: {value}</div>
+            </div>;
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<string[]>(["low", "high"]);
+    return <div style={{
+      display: "grid",
+      gap: 12,
+      maxWidth: 320
+    }}>
+                <StringListbox {...args} multiple value={value} onChange={next => {
+        if (Array.isArray(next)) setValue(next);
+      }} />
+                <div>Выбрано: {value.join(", ") || "пусто"}</div>
+            </div>;
+  },
+  args: {
+    multiple: true
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState<string>("low");
+    return <StringListbox {...args} value={value} onChange={next => {
+      if (typeof next === "string") setValue(next);
+    }} renderItem={(option, selected, active) => <div style={{
+      display: "flex",
+      justifyContent: "space-between",
+      width: "100%",
+      opacity: option.disabled ? 0.5 : 1
+    }}>
+                        <span>{option.label}</span>
+                        <span>{selected ? "Выбрано" : active ? "Фокус" : ""}</span>
+                    </div>} />;
+  }
+}`,...D.parameters?.docs?.source}}},O=[`SingleSelect`,`MultiSelect`,`CustomRender`]})))()}export{k as a,T as i,b as n,E as r,D as t};

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

@@ -1,11 +1,11 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Controlled as p,ScrollableContent as m,Sizes as h,StackedModals as g,WithToolbarAndFooter as _,n as v,t as y}from"./Modal.stories-BE-VpK-a.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)(o,{of:y,parameters:{docs:{toc:!0}}}),`
-`,(0,S.jsx)(l,{children:`Modal`}),`
-`,(0,S.jsx)(a,{children:`Составная модалка с контентом, toolbar и footer для пользовательских диалоговых сценариев`}),`
+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.
 Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, размерные варианты.`}),`
 `,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,S.jsx)(d,{}),`
-`,(0,S.jsx)(r,{of:p}),`
+`,(0,S.jsx)(f,{}),`
+`,(0,S.jsx)(i,{of:y}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { Button } from "@/shared/ui";
@@ -35,20 +35,20 @@ export function Example() {
 `,(0,S.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
 `,(0,S.jsx)(t.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
 `,(0,S.jsx)(t.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
-`,(0,S.jsx)(u,{of:p}),`
+`,(0,S.jsx)(d,{of:y}),`
 `,(0,S.jsx)(t.h3,{id:`композиция-с-toolbar-и-footer`,children:`Композиция с toolbar и footer`}),`
 `,(0,S.jsx)(t.p,{children:`Композиция с toolbar и footer.`}),`
-`,(0,S.jsx)(u,{of:_}),`
+`,(0,S.jsx)(d,{of:g}),`
 `,(0,S.jsx)(t.h3,{id:`прокручиваемое-содержимое-внутри-контейнера`,children:`Прокручиваемое содержимое внутри контейнера`}),`
 `,(0,S.jsx)(t.p,{children:`Прокручиваемое содержимое внутри контейнера.`}),`
-`,(0,S.jsx)(u,{of:m}),`
+`,(0,S.jsx)(d,{of:_}),`
 `,(0,S.jsx)(t.h3,{id:`сравнение-размеров-компонента`,children:`Сравнение размеров компонента`}),`
 `,(0,S.jsx)(t.p,{children:`Сравнение размеров компонента.`}),`
-`,(0,S.jsx)(u,{of:h}),`
+`,(0,S.jsx)(d,{of:m}),`
 `,(0,S.jsx)(t.h3,{id:`несколько-модалок-одновременно`,children:`Несколько модалок одновременно`}),`
 `,(0,S.jsx)(t.p,{children:`Несколько модалок одновременно.`}),`
-`,(0,S.jsx)(u,{of:g}),`
+`,(0,S.jsx)(d,{of:p}),`
 `,(0,S.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,S.jsx)(c,{of:y}),`
+`,(0,S.jsx)(l,{of:h}),`
 `,(0,S.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,S.jsx)(i,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=t(),f(),s(),v()}))();export{x as default};
+`,(0,S.jsx)(a,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;function C(){return(C=e((()=>{S=t(),r(),c(),v()})))()}C();export{x as default};