@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.12

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

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

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

@@ -0,0 +1,38 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{CustomRender as p,MultiSelect as m,SingleSelect as h,n as g,t as _}from"./Listbox.stories-Cf_ApbmT.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
+`,(0,b.jsx)(c,{children:`Listbox`}),`
+`,(0,b.jsx)(i,{children:`Список выбора для single- и multi-select сценариев с кастомным рендером элементов`}),`
+`,(0,b.jsx)(o.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,b.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,b.jsx)(u,{}),`
+`,(0,b.jsx)(n,{of:h}),`
+`,(0,b.jsx)(o.pre,{children:(0,b.jsx)(o.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,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,b.jsxs)(o.ul,{children:[`
+`,(0,b.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,b.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,b.jsx)(o.h3,{id:`выбор-одного-значения`,children:`Выбор одного значения`}),`
+`,(0,b.jsx)(o.p,{children:`Выбор одного значения.`}),`
+`,(0,b.jsx)(l,{of:h}),`
+`,(0,b.jsx)(o.h3,{id:`выбор-нескольких-значений`,children:`Выбор нескольких значений`}),`
+`,(0,b.jsx)(o.p,{children:`Выбор нескольких значений.`}),`
+`,(0,b.jsx)(l,{of:m}),`
+`,(0,b.jsx)(o.h3,{id:`кастомный-рендер-элементов-списка`,children:`Кастомный рендер элементов списка`}),`
+`,(0,b.jsx)(o.p,{children:`Кастомный рендер элементов списка.`}),`
+`,(0,b.jsx)(l,{of:p}),`
+`,(0,b.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,b.jsx)(s,{of:_}),`
+`,(0,b.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,b.jsx)(r,{includePrimary:!1})]})}function y(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,b.jsx)(n,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=d(),f(),o(),g()}))();export{y as default};

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

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

package/storybook-static/assets/Modal-BL_cTIW7.css

@@ -0,0 +1 @@
+.vGPUKV{z-index:var(--z-modal);width:90%;height:-moz-fit-content;height:fit-content;max-height:calc(100dvh - var(--space-lg));border:var(--border);border-radius:var(--radius-md);background-color:var(--surface-1);box-shadow:var(--shadow-lg);grid-auto-rows:auto 1fr;margin:auto;display:grid;position:fixed;inset:0}.vGPUKV:not(:last-child){pointer-events:none;filter:grayscale(.5)opacity(.75)}.vGPUKV.O7gb7P{max-width:min(30em,93dvw)}.vGPUKV.RVq8v3{max-width:min(50em,93dvw)}.vGPUKV.PCSUAL{max-width:min(70em,93dvw)}.vGPUKV.XDCHzq{max-width:min(80em,93dvw)}.vGPUKV.t1kl8L{width:93dvw;max-width:none;height:90dvh;max-height:none}.vGPUKV.o3PEEB{width:100%;max-width:none;height:100%;max-height:none}.vGPUKV.o3PEEB .WhUkxm,.vGPUKV.o3PEEB .NDgdMi{border-radius:0}.WhUkxm{background-color:var(--surface-2);border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md);justify-content:space-between;align-items:center;display:flex}.JDlse5{padding-inline:var(--space-md);font-size:var(--font-size-md);font-variation-settings:"wght" 600;margin:0}.FaDKSt{margin-block:var(--space-xs);margin-inline:var(--space-sm);flex:0}.NDgdMi{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);overflow:hidden}

package/storybook-static/assets/Modal-BzienAaa.js

@@ -0,0 +1,54 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.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-cPIHRa9a.js";function b(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(a,{of:y,parameters:{docs:{toc:!0}}}),`
+`,(0,S.jsx)(c,{children:`Modal`}),`
+`,(0,S.jsx)(i,{children:`Составная модалка с контентом, toolbar и footer для пользовательских диалоговых сценариев`}),`
+`,(0,S.jsx)(o.p,{children:`Modal уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, размерные варианты.`}),`
+`,(0,S.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(u,{}),`
+`,(0,S.jsx)(n,{of:p}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Button } from "@/shared/ui";
+import { Modal, ModalContent, ModalFooter } from "@/shared/ui";
+
+export function Example() {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button onClick={() => setOpen(true)}>Открыть</Button>
+			<Modal isOpen={open} title="Редактирование" onClose={() => setOpen(false)}>
+				<ModalContent>Содержимое модального окна</ModalContent>
+				<ModalFooter>
+					<Button onClick={() => setOpen(false)}>Закрыть</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,S.jsx)(o.li,{children:`Проверьте размер компонента в реальном контексте интерфейса: в таблицах, тулбарах и формах требования обычно отличаются.`}),`
+`]}),`
+`,(0,S.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,S.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,S.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,S.jsx)(l,{of:p}),`
+`,(0,S.jsx)(o.h3,{id:`композиция-с-toolbar-и-footer`,children:`Композиция с toolbar и footer`}),`
+`,(0,S.jsx)(o.p,{children:`Композиция с toolbar и footer.`}),`
+`,(0,S.jsx)(l,{of:_}),`
+`,(0,S.jsx)(o.h3,{id:`прокручиваемое-содержимое-внутри-контейнера`,children:`Прокручиваемое содержимое внутри контейнера`}),`
+`,(0,S.jsx)(o.p,{children:`Прокручиваемое содержимое внутри контейнера.`}),`
+`,(0,S.jsx)(l,{of:m}),`
+`,(0,S.jsx)(o.h3,{id:`сравнение-размеров-компонента`,children:`Сравнение размеров компонента`}),`
+`,(0,S.jsx)(o.p,{children:`Сравнение размеров компонента.`}),`
+`,(0,S.jsx)(l,{of:h}),`
+`,(0,S.jsx)(o.h3,{id:`несколько-модалок-одновременно`,children:`Несколько модалок одновременно`}),`
+`,(0,S.jsx)(o.p,{children:`Несколько модалок одновременно.`}),`
+`,(0,S.jsx)(l,{of:g}),`
+`,(0,S.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,S.jsx)(s,{of:y}),`
+`,(0,S.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,S.jsx)(r,{includePrimary:!1})]})}function x(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,S.jsx)(n,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=d(),f(),o(),v()}))();export{x as default};