@ryuzaki13/react-foundation-ui 1.4.5 → 1.5.0

package/storybook-static/assets/LayoutPicker-DzAN3gGO.js

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

package/storybook-static/assets/LayoutPicker-yb6IMmd2.css

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

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

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

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

@@ -0,0 +1,41 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-BHhbrImE.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-D8l_hmHU.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Listbox.stories-CvXZeESb.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(u,{children:`Listbox`}),`
+`,(0,x.jsx)(o,{children:`Список выбора для single- и multi-select сценариев, кастомного рендера элементов и блокированного состояния`}),`
+`,(0,x.jsx)(t.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,x.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(f,{}),`
+`,(0,x.jsx)(i,{of:p}),`
+`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Listbox } from "@/shared/ui";
+
+const items = ["Черновик", "В работе", "Завершен"];
+
+export function Example() {
+	const [value, setValue] = useState(undefined);
+
+	return <Listbox items={items} value={value} onChange={setValue} />;
+}
+`})}),`
+`,(0,x.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,x.jsxs)(t.ul,{children:[`
+`,(0,x.jsx)(t.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,x.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,x.jsx)(t.h3,{id:`выбор-одного-значения`,children:`Выбор одного значения`}),`
+`,(0,x.jsx)(t.p,{children:`Выбор одного значения.`}),`
+`,(0,x.jsx)(d,{of:p}),`
+`,(0,x.jsx)(t.h3,{id:`выбор-нескольких-значений`,children:`Выбор нескольких значений`}),`
+`,(0,x.jsx)(t.p,{children:`Выбор нескольких значений.`}),`
+`,(0,x.jsx)(d,{of:m}),`
+`,(0,x.jsx)(t.h3,{id:`кастомный-рендер-элементов-списка`,children:`Кастомный рендер элементов списка`}),`
+`,(0,x.jsx)(t.p,{children:`Кастомный рендер элементов списка.`}),`
+`,(0,x.jsx)(d,{of:v}),`
+`,(0,x.jsx)(t.h3,{id:`заблокированный-список`,children:`Заблокированный список`}),`
+`,(0,x.jsx)(t.p,{children:`Заблокированный список не получает фокус и не изменяет выбор с клавиатуры или указателем.`}),`
+`,(0,x.jsx)(d,{of:h}),`
+`,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(l,{of:_}),`
+`,(0,x.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(a,{includePrimary:!1})]})}function b(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,x.jsx)(t,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;function S(){return(S=e((()=>{x=t(),r(),c(),g()})))()}S();export{b as default};

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

@@ -0,0 +1 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n,t as r}from"./check-DpX8PMs_.js";import{n as i}from"./iframe-BHhbrImE.js";import{a,i as o,n as s,r as c,s as l,t as u}from"./utils-DUM89eIj.js";import{n as d,t as f}from"./ui.module-kfCm3RIG.js";function p(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,_)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return c(e,_)}function m(e){let{value:t,defaultValue:n,multiple:i,disabled:o,focusOnMount:f,renderItem:m,getKey:v,options:y,onChange:b,id:x,...S}=e,C=t!==void 0,w=(0,h.useId)(),T=x??`${w}-listbox`,[E,D]=(0,h.useState)(n),O=(0,h.useRef)(null),[k,A]=(0,h.useState)(()=>p(y,t??n,i)),j=(0,h.useRef)(!1),M=(0,h.useMemo)(()=>(C?t:E)??(i?[]:null),[E,C,i,t]),N=k,P=t=>{if(o||t.disabled)return;let n;if(e.multiple){let r=Array.isArray(M)?M:[];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);C||D(n)};return(0,h.useEffect)(()=>{if(!j.current)return;j.current=!1;let e=O.current?.querySelectorAll(`[role="option"]`)[N];e&&e.scrollIntoView({block:`nearest`})},[N]),(0,h.useLayoutEffect)(()=>{f&&O.current?.focus()},[f]),(0,g.jsx)(`ul`,{ref:O,id:T,role:`listbox`,"aria-multiselectable":i||void 0,"aria-activedescendant":N>=0?`${T}-option-${N}`:void 0,onKeyDown:e=>{if(!o){if(e.key===`ArrowDown`)e.preventDefault(),j.current=!0,A(e=>u(y,e,1,_));else if(e.key===`ArrowUp`)e.preventDefault(),j.current=!0,A(e=>u(y,e,-1,_));else if(e.key===`Home`)e.preventDefault(),j.current=!0,A(c(y,_));else if(e.key===`End`)e.preventDefault(),j.current=!0,A(l(y,_));else if(s(e,()=>{let e=y[N];e&&P(e)}))return}},...S,"aria-disabled":o||void 0,tabIndex:o?-1:0,className:a(d.uiPanel,`scrollable surface1`,o&&d.disabled),children:y.map((e,t)=>{let n=i?Array.isArray(M)&&M.includes(e.value):M===e.value,s=t===N;return(0,g.jsxs)(`li`,{id:`${T}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":o||e.disabled||void 0,onMouseDown:n=>{n.preventDefault(),!(o||e.disabled)&&(A(t),P(e))},tabIndex:-1,className:a(d.uiPopupOption,(o||e.disabled)&&d.disabled,s&&d.uiPopupOptionActive,n&&d.selected),children:[n?(0,g.jsx)(r,{className:d.uiPopupOptionIcon}):(0,g.jsx)(`span`,{className:d.uiPopupOptionIcon}),(0,g.jsx)(`div`,{children:m?m(e,n,s):e.label??String(e.value)})]},v?v(e,t):t)})})}var h,g,_;function v(){return(v=e((()=>{h=t(),o(),n(),f(),g=i(),_=e=>e.disabled===!0,m.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})))()}export{v as n,m as t};

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

@@ -0,0 +1,53 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-BHhbrImE.js";import{n as i,t as a}from"./Listbox-CHsNGsDc.js";var o=t({CustomRender:()=>p,Disabled:()=>m,MultiSelect:()=>f,SingleSelect:()=>d,__namedExportsOrder:()=>h,default:()=>u});function s(e){return e.multiple?(0,l.jsx)(a,{...e,multiple:!0}):(0,l.jsx)(a,{...e})}var c,l,u,d,f,p,m,h;function g(){return(g=e((()=>{c=n(),i(),l=r(),u={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},disabled:{description:`Блокирует фокусировку, навигацию и изменение выбора.`,control:`boolean`},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},d={render:e=>{let[t,n]=(0,c.useState)(`medium`);return(0,l.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,l.jsx)(s,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,l.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},f={render:e=>{let[t,n]=(0,c.useState)([`low`,`high`]);return(0,l.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,l.jsx)(s,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,l.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},p={render:e=>{let[t,n]=(0,c.useState)(`low`);return(0,l.jsx)(s,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,l.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,l.jsx)(`span`,{children:e.label}),(0,l.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},m={args:{disabled:!0,value:`medium`},render:e=>(0,l.jsx)(s,{...e})},d.parameters={...d.parameters,docs:{...d.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>;
+  }
+}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.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
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.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>} />;
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    value: "medium"
+  },
+  render: args => <StringListbox {...args} />
+}`,...m.parameters?.docs?.source}}},h=[`SingleSelect`,`MultiSelect`,`CustomRender`,`Disabled`]})))()}export{d as a,f as i,m as n,g as o,o as r,p as t};

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

@@ -1,4 +1,4 @@
-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}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-BHhbrImE.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-D8l_hmHU.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-DYMy-kLP.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.