@ryuzaki13/react-foundation-ui 1.5.8 → 1.5.9

package/storybook-static/assets/InteractiveComponents.stories-EPcGTlqo.js

@@ -0,0 +1,530 @@
+import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./Switch-Bf1Zr3rq.js";import{i as a,n as o,r as s,t as ee}from"./DisclosureGroup-DtQit9bi.js";import{n as c,t as te}from"./ExpandableActionPanel-C1SC-Fm0.js";import{n as ne,t as l}from"./RadioButton-BfyYyhLa.js";import{n as u,t as re}from"./SingleDateTimeInput-BtpTlEeK.js";import{n as d,t as f}from"./CheckBox-DGy-LNaF.js";import{n as p,t as ie}from"./DropZone-DYT6KTBY.js";import{n as m}from"./iframe-B94C5PVz.js";import{n as ae,t as h}from"./Text-B8JQ8g6X.js";import{n as g,t as _}from"./Popover-N6YINSY_.js";import{i as oe,n as se,r as v,t as ce}from"./BadgeList-DB44TweU.js";import{n as y,t as b}from"./Button-CAqJR-HG.js";import{n as x,t as S}from"./ContextMenu-XLrJcLuy.js";import{a as le,i as ue,n as C,r as de,s as fe,t as pe}from"./ModalManagerProvider-Z3rgI84z.js";import{n as me,t as w}from"./DropdownMenu-Dw4WHBLp.js";import{n as he,r as ge}from"./DateInput-BAvKi07l.js";import{a as T,c as E,i as D,t as O}from"./Input-CUfYW_um.js";import{n as _e,t as k}from"./RadioGroup-CFrv1NLu.js";import{n as ve,t as ye}from"./GridContainer-qDguE1HS.js";import{n as A,t as j}from"./Select-Co7ThaEv.js";import{n as M,t as be}from"./DateRangePresetSelect-CSrEwt-3.js";import{n as xe,t as Se}from"./Dialog-R5Am1Hzd.js";import{n as Ce,t as we}from"./InputFiles-B2tnIFaW.js";import{n as Te,t as Ee}from"./InputFile-DodOOJna.js";import{n as De,t as Oe}from"./InputImage-C325RWQr.js";import{n as ke,t as Ae}from"./LayoutPicker-ZpKrd_7K.js";import{n as je,t as Me}from"./Listbox-CuNYuQox.js";import{n as Ne,t as Pe}from"./MultiSelect-CCpKNk3U.js";import{n as Fe,t as Ie}from"./PeriodSelect-Dg4cO0kt.js";import{n as Le,t as Re}from"./PresetRangeDateInput-Ctgz_cfn.js";import{i as ze,r as Be,t as Ve}from"./Slider-aNVrwhr6.js";import{n as N,r as He,t as Ue}from"./SliderInput-CkIxuEjc.js";import{n as We,t as Ge}from"./StateSelect-CLchQToK.js";import{n as Ke,t as P}from"./TabsBox-BcZIzq2f.js";import{n as qe,t as Je}from"./TagInput-C1ynHkEU.js";import{n as F,t as Ye}from"./Textarea-DlwCUO2d.js";import{n as I,t as Xe}from"./Toggle-XKm0YNzz.js";import{n as Ze,t as L}from"./TreeMultiSelect-C3LhJxzz.js";import{n as Qe,t as $e}from"./treeStoryFixtures-Ci7STpiz.js";function et({onChange:e,...t}){let[n,r]=(0,R.useState)(()=>t.defaultValue??t.value??``),[i,a]=(0,R.useState)(()=>t.defaultValue??t.value??``),o=t=>{let n=t.trim();n!==i&&(a(n),e(n))},s=()=>{r(``),a(``),e(``)},ee=e=>{e.key===`Enter`&&(e.preventDefault(),o(n))},c=()=>{o(n)},te=e=>{r(e)};return(0,z.jsx)(O,{...t,value:n,onChange:te,onKeyDown:ee,onBlur:c,onClear:s})}var R,z;function B(){return(B=e((()=>{R=t(n(),1),E(),z=m(),et.__docgenInfo={description:``,methods:[],displayName:`InputSearch`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},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:`T`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`]}})))()}function V({title:e,children:t}){return(0,W.jsxs)(`section`,{style:G,children:[(0,W.jsx)(`div`,{style:K,children:e}),t]})}function tt({initialValue:e={},label:t=`TreeMultiSelect`,description:n,optionsLayout:r=`tree`,nodes:i=$e,defaultExpandedCodeKeys:a}){let[o,s]=(0,U.useState)(e);return(0,W.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:520},children:[(0,W.jsx)(L,{label:t,description:n,nodes:i,value:o,onChange:s,optionsLayout:r,defaultExpandedCodeKeys:a}),(0,W.jsxs)(`div`,{style:{fontSize:`var(--font-size-sm)`,color:`var(--content-1)`},children:[`Текущее значение: `,JSON.stringify(o)]})]})}function H(){let[e,t]=(0,U.useState)(`Значение`),[n,r]=(0,U.useState)(42),[a,o]=(0,U.useState)(``),[c,ne]=(0,U.useState)(`Комментарий`),[u,d]=(0,U.useState)(!0),[p,m]=(0,U.useState)(!1),[ae,g]=(0,U.useState)(`first`),[oe,se]=(0,U.useState)(!0),[y,x]=(0,U.useState)(!1),[C,fe]=(0,U.useState)(3),[me,ge]=(0,U.useState)(),[E,O]=(0,U.useState)([0,0]),[_e,ve]=(0,U.useState)(60),[A,M]=(0,U.useState)(J[0]),[xe,Ce]=(0,U.useState)([Y[0]]),[Te,De]=(0,U.useState)([`UI`,`Стили`]),[ke,je]=(0,U.useState)(`week`),[Ne,Fe]=(0,U.useState)(`information`),[Le,ze]=(0,U.useState)(`two-columns`),[He,We]=(0,U.useState)(new Date(2026,2,10)),[Ke,qe]=(0,U.useState)(new Date(2026,2,10,10,30)),[F,I]=(0,U.useState)(`today`),[Ze,L]=(0,U.useState)([new Date(2026,2,1),new Date(2026,2,10)]),[Qe,$e]=(0,U.useState)(`month`),[R,z]=(0,U.useState)(),[B,H]=(0,U.useState)([]),[G,K]=(0,U.useState)(),[X,Z]=(0,U.useState)([]),[at,Q]=(0,U.useState)(!1),[ot,$]=(0,U.useState)(!1),[st,ct]=(0,U.useState)();return(0,W.jsxs)(`div`,{style:nt,children:[(0,W.jsxs)(V,{title:`Text`,children:[(0,W.jsx)(h,{color:`primary`,children:`Основной`}),(0,W.jsx)(h,{color:`secondary`,children:`Дополнительный`}),(0,W.jsx)(h,{color:`muted`,children:`Приглушенный`}),(0,W.jsx)(h,{color:`accent`,children:`Акцентированный`}),(0,W.jsx)(h,{color:`brand`,children:`Брендовый`}),(0,W.jsx)(h,{color:`info`,children:`Информация`}),(0,W.jsx)(h,{color:`success`,children:`Успешно`}),(0,W.jsx)(h,{color:`warning`,children:`Предупреждение`}),(0,W.jsx)(h,{color:`error`,children:`Ошибка`})]}),(0,W.jsx)(V,{title:`Badge`,children:(0,W.jsxs)(ce,{children:[(0,W.jsx)(v,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,W.jsx)(v,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,W.jsx)(v,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,W.jsx)(v,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,W.jsx)(v,{tone:`info`,appearance:`solid`,children:`Информация`})]})}),(0,W.jsx)(V,{title:`Button`,children:(0,W.jsxs)(ye,{gap:`sm`,templateColumns:`1fr 1fr`,children:[(0,W.jsx)(b,{variant:`transparent`,children:`Действие`}),(0,W.jsx)(b,{variant:`ghost`,children:`Действие`}),(0,W.jsx)(b,{variant:`neutralOutline`,children:`Действие`}),(0,W.jsx)(b,{variant:`infoOutline`,children:`Действие`}),(0,W.jsx)(b,{variant:`successOutline`,children:`Действие`}),(0,W.jsx)(b,{variant:`warningOutline`,children:`Действие`}),(0,W.jsx)(b,{variant:`errorOutline`,children:`Действие`}),(0,W.jsx)(b,{variant:`neutral`,children:`Действие`}),(0,W.jsx)(b,{variant:`info`,children:`Действие`}),(0,W.jsx)(b,{variant:`success`,children:`Действие`}),(0,W.jsx)(b,{variant:`warning`,children:`Действие`}),(0,W.jsx)(b,{variant:`error`,children:`Действие`})]})}),(0,W.jsxs)(V,{title:`InputText`,children:[(0,W.jsx)(T,{label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,disabled:!0,value:e,onChange:t}),(0,W.jsx)(T,{label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,value:e,onChange:t}),(0,W.jsx)(T,{required:!0,label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,value:e,onChange:t,onClear:()=>t(``)})]}),(0,W.jsxs)(V,{title:`InputNumber`,children:[(0,W.jsx)(D,{label:`Количество`,description:`Поле ввода числа`,placeholder:`Введите число`,value:n,min:0,onChange:r,disabled:!0}),(0,W.jsx)(D,{label:`Количество`,description:`Поле ввода числа`,placeholder:`Введите число`,value:n,min:0,onChange:r,required:!0}),(0,W.jsx)(D,{label:`Количество`,description:`Поле ввода числа`,placeholder:`Введите число`,value:n,min:0,onChange:r}),(0,W.jsx)(D,{label:`Количество`,description:`Поле ввода числа`,placeholder:`Введите число`,value:n,min:0,onChange:r,onClear:()=>r(void 0)})]}),(0,W.jsx)(V,{title:`InputSearch`,children:(0,W.jsx)(et,{label:`Поиск`,placeholder:`Найти`,value:a,onChange:o})}),(0,W.jsx)(V,{title:`Textarea`,children:(0,W.jsx)(Ye,{label:`Комментарий`,required:!0,placeholder:`Многострочный комментарий`,rows:6,value:c,onChange:ne})}),(0,W.jsxs)(V,{title:`CheckBox`,children:[(0,W.jsx)(f,{label:`Опция`,description:`Описание чекбокса`,disabled:!0,value:u,onChange:d}),(0,W.jsx)(f,{label:`Опция`,description:`Описание чекбокса`,value:u,onChange:d}),(0,W.jsx)(f,{label:`Опция`,description:`Описание чекбокса`,value:u,onChange:d,indeterminate:!0})]}),(0,W.jsxs)(V,{title:`RadioButton`,children:[(0,W.jsx)(l,{label:`Опция`,description:`Описание радиокнопки`,disabled:!0,value:p,onChange:m}),(0,W.jsx)(l,{label:`Опция`,description:`Описание радиокнопки`,name:`radio-1`,value:p,onChange:m}),(0,W.jsx)(l,{label:`Опция`,description:`Описание радиокнопки`,name:`radio-1`,value:p,onChange:m})]}),(0,W.jsxs)(V,{title:`RadioGroup`,children:[(0,W.jsxs)(k,{label:`Радио группа`,description:`Вертикальная группа`,value:ae,onChange:g,orientation:`vertical`,"aria-label":`Вариант`,children:[(0,W.jsx)(k.Option,{value:`first`,label:`Первый`}),(0,W.jsx)(k.Option,{value:`second`,label:`Второй`}),(0,W.jsx)(k.Option,{value:`third`,label:`Третий`,description:`Новая опциональная опция`})]}),(0,W.jsxs)(k,{label:`Радио группа`,description:`Горизонтальная группа`,value:ae,onChange:g,orientation:`horizontal`,"aria-label":`Вариант`,children:[(0,W.jsx)(k.Option,{value:`first`,label:`Первый`}),(0,W.jsx)(k.Option,{value:`second`,label:`Второй`}),(0,W.jsx)(k.Option,{value:`third`,label:`Третий`,description:`Новая опциональная опция`})]})]}),(0,W.jsx)(V,{title:`Switch`,children:(0,W.jsx)(i,{label:`Уведомления`,description:`Устаревный компонент`,value:oe,onChange:se})}),(0,W.jsxs)(V,{title:`Toggle`,children:[(0,W.jsx)(Xe,{label:`Режим`,description:`Переключатель состояния`,value:y,onChange:x,checkedText:`Вкл`,uncheckedText:`Выкл`}),(0,W.jsx)(Xe,{label:`Режим`,description:`Переключатель состояния`,labelPosition:`after`,value:y,onChange:x,checkedText:`Вкл`,uncheckedText:`Выкл`})]}),(0,W.jsxs)(V,{title:`Slider`,children:[(0,W.jsx)(Ve,{label:`Уровень`,description:`Простой слайдер`,value:C,min:0,max:100,onChange:fe}),(0,W.jsx)(Ve,{label:`Уровень`,description:`Простой слайдер`,disabled:!0,marks:[{value:1,label:`m1`},{value:2,label:`m2`},{value:3,label:`m3`},{value:4,label:`m4`},{value:5,label:`m5`},{value:6,label:`m6`}],marksPosition:`index`,value:C,min:0,max:100,onChange:fe}),(0,W.jsx)(Be,{label:`Уровень`,description:`Диапазон`,marks:[{value:0,label:`m1`},{value:1,label:`m2`},{value:2,label:`m3`},{value:3,label:`m4`}],marksPosition:`index`,value:me,min:0,max:100,onChange:ge})]}),(0,W.jsxs)(V,{title:`SliderInput`,children:[(0,W.jsx)(Ue,{label:`Порог`,value:_e,min:0,max:100,onChange:ve}),(0,W.jsx)(N,{label:`Порог`,value:E,onChange:O,min:0,max:100,marks:[{value:0,label:`0`},{value:20,label:`20`},{value:40,label:`40`},{value:60,label:`60`},{value:80,label:`80`},{value:100,label:`100`}]}),(0,W.jsx)(N,{label:`Срок: открытые границы и дни в фильтре`,description:"Крайние marks отдают null, обычные marks отдают дни через `outputValue`.",min:0,max:25,marks:[{value:0,label:`-`,outputValue:null},{value:1,label:`1м.`,outputValue:30},{value:3,label:`3м.`,outputValue:90},{value:6,label:`6м.`,outputValue:180},{value:12,label:`1г.`,outputValue:360},{value:18,label:`1.5г.`,outputValue:540},{value:24,label:`2г.`,outputValue:720},{value:25,label:`-`,outputValue:null}],value:E,onChange:O}),(0,W.jsx)(N,{label:`Срок текстом`,description:`В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии.`,placeholder:`Любой срок`,readonlyValueText:!0,min:0,max:25,marks:[{value:0,label:`-`,outputValue:null},{value:1,label:`1м.`,outputValue:30},{value:3,label:`3м.`,outputValue:90},{value:6,label:`6м.`,outputValue:180},{value:12,label:`1г.`,outputValue:360},{value:18,label:`1.5г.`,outputValue:540},{value:24,label:`2г.`,outputValue:720},{value:25,label:`-`,outputValue:null}],marksPosition:`index`,value:E,onChange:O})]}),(0,W.jsxs)(V,{title:`Select`,children:[(0,W.jsx)(j,{label:`Статус`,description:`searchable`,searchable:!0,options:J,value:A,onChange:M,getOptionKey:e=>e.id,getOptionLabel:e=>e.label}),(0,W.jsx)(j,{label:`Статус`,description:`disabled`,disabled:!0,options:J,value:A,onChange:M,getOptionKey:e=>e.id,getOptionLabel:e=>e.label}),(0,W.jsx)(j,{label:`Статус`,description:`Пример использования низкоуровневого Select со строковыми значениями.`,placeholder:`Выберите статус`,options:J,value:A,onChange:M,getOptionKey:e=>e.id,getOptionLabel:e=>e.label}),(0,W.jsx)(j,{label:`Подразделение`,description:`Выберите подразделение из списка.`,placeholder:`Не выбрано`,options:it,value:st,onChange:ct,getOptionKey:e=>e.id,getOptionLabel:e=>e.name,getOptionCode:e=>e.code,getOptionDisabled:e=>e.disabled??!1,getOptionGroup:e=>({key:e.direction,label:e.direction}),optionsMaxWidth:`40em`})]}),(0,W.jsx)(V,{title:`MultiSelect`,children:(0,W.jsx)(Pe,{label:`Города`,items:Y,value:xe,query:``,codeKey:`code`,textKey:`label`,onChange:Ce,onQuery:()=>void 0,onOpen:()=>void 0,onClose:()=>void 0})}),(0,W.jsx)(V,{title:`TreeMultiSelect`,children:(0,W.jsx)(tt,{})}),(0,W.jsx)(V,{title:`TagInput`,children:(0,W.jsx)(Je,{label:`Теги`,placeholder:`Добавить`,value:Te,onChange:De})}),(0,W.jsx)(V,{title:`Listbox`,children:(0,W.jsx)(Me,{options:rt,value:ke,onChange:e=>je(e)})}),(0,W.jsx)(V,{title:`StateSelect`,children:(0,W.jsx)(Ge,{label:`Состояние`,value:Ne,onChange:Fe})}),(0,W.jsx)(V,{title:`LayoutPicker`,children:(0,W.jsx)(Ae,{label:`Раскладка`,value:Le,onChange:ze,showPlaceholder:!0})}),(0,W.jsx)(V,{title:`SingleDateInput`,children:(0,W.jsx)(he,{label:`Дата`,value:He,onChange:We,selectionMode:`week`})}),(0,W.jsx)(V,{title:`SingleDateTimeInput`,children:(0,W.jsx)(re,{label:`Дата и время`,value:Ke,onChange:qe})}),(0,W.jsx)(V,{title:`DateRangePresetSelect`,children:(0,W.jsx)(be,{label:`Период`,value:F??void 0,onChange:e=>I(e??null),onRangeChange:e=>L(e?.range??null),referenceDate:new Date(2026,2,10,12)})}),(0,W.jsx)(V,{title:`PresetRangeDateInput`,children:(0,W.jsx)(Re,{value:Ze,onChange:L,presetId:F??null,onPresetIdChange:e=>I(e??null),referenceDate:new Date(2026,2,10,12),presetLabel:`Быстрый диапазон`})}),(0,W.jsx)(V,{title:`PeriodSelect`,children:(0,W.jsx)(Ie,{label:`Группировка`,value:Qe,onChange:$e})}),(0,W.jsx)(V,{title:`InputFile`,children:(0,W.jsx)(Ee,{label:`Файл`,placeholder:`Выберите файл`,value:R,onChange:z,onClear:()=>z(void 0),readMode:`data-url`})}),(0,W.jsx)(V,{title:`InputFiles`,children:(0,W.jsx)(we,{label:`Файлы`,placeholder:`Выберите файлы`,value:B,onChange:H,readMode:`data-url`})}),(0,W.jsx)(V,{title:`InputImage`,children:(0,W.jsx)(Oe,{label:`Изображение`,value:G,onChange:K,onClear:()=>K(void 0)})}),(0,W.jsx)(V,{title:`DropZone`,children:(0,W.jsx)(ie,{value:X,multiple:!0,readMode:`data-url`,onChange:e=>Z(e),children:(0,W.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,minHeight:`6em`,textAlign:`center`},children:X.length?`Файлов: ${X.length}`:`Перетащите файлы`})})}),(0,W.jsxs)(V,{title:`TabsBox`,children:[(0,W.jsx)(P,{defaultValue:`first`,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Ещё одна панель`},{id:`quat`,title:`Четвертая`,content:`Четвертая панель`},{id:`five`,title:`Пятая`,content:`Пятая панель`}]}),(0,W.jsx)(P,{defaultValue:`first`,clean:!0,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Ещё одна панель`},{id:`quat`,title:`Четвертая`,content:`Четвертая панель`},{id:`five`,title:`Пятая`,content:`Пятая панель`}]})]}),(0,W.jsxs)(V,{title:`TabsBox`,children:[(0,W.jsx)(P,{defaultValue:`first`,orientation:`vertical`,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Другая панель`},{id:`quat`,title:`Четвертая`,content:`Другая панель`}]}),(0,W.jsx)(P,{defaultValue:`first`,orientation:`vertical`,clean:!0,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Другая панель`},{id:`quat`,title:`Четвертая`,content:`Другая панель`}]})]}),(0,W.jsxs)(V,{title:`Disclosure`,children:[(0,W.jsxs)(ee,{children:[(0,W.jsx)(s,{label:`Раскрыть 1`,children:`Содержимое панели 1`}),(0,W.jsx)(s,{label:`Раскрыть 2`,children:`Содержимое панели 2`}),(0,W.jsx)(s,{label:`Раскрыть 3`,children:`Содержимое панели 3`}),(0,W.jsx)(s,{label:`Раскрыть 4`,children:`Содержимое панели 4`})]}),(0,W.jsx)(s,{label:`Раскрыть 1`,tone:`secondary`,children:`Содержимое панели 1`})]}),(0,W.jsx)(V,{title:`ExpandableActionPanel`,children:(0,W.jsx)(te,{children:(0,W.jsx)(b,{variant:`transparent`,children:`Действие`})})}),(0,W.jsx)(V,{title:`Popover`,children:(0,W.jsxs)(_,{children:[(0,W.jsx)(_.Trigger,{children:(0,W.jsx)(b,{style:q,children:`Открыть`})}),(0,W.jsx)(_.Content,{children:({setClose:e})=>(0,W.jsxs)(`div`,{style:{display:`grid`,gap:`0.75em`,padding:`1em`,maxWidth:`14em`},children:[(0,W.jsx)(`div`,{children:`Содержимое popover`}),(0,W.jsx)(b,{onClick:e,children:`Закрыть`})]})})]})}),(0,W.jsx)(V,{title:`DropdownMenu`,children:(0,W.jsxs)(w,{children:[(0,W.jsx)(w.Trigger,{children:(0,W.jsx)(b,{style:q,children:`Действия`})}),(0,W.jsxs)(w.Content,{children:[(0,W.jsx)(w.Item,{children:`Редактировать`}),(0,W.jsx)(w.Item,{children:`Удалить`})]})]})}),(0,W.jsx)(V,{title:`ContextMenu`,children:(0,W.jsxs)(S,{children:[(0,W.jsx)(S.Trigger,{children:(0,W.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,minHeight:`6em`,padding:`0.75em`,border:`var(--border)`,borderRadius:`var(--radius-sm)`,textAlign:`center`},children:`Правая кнопка мыши`})}),(0,W.jsxs)(S.Content,{children:[(0,W.jsx)(S.Item,{children:`Переименовать`}),(0,W.jsx)(S.Item,{children:`Удалить`})]})]})}),(0,W.jsxs)(V,{title:`Dialog`,children:[(0,W.jsx)(b,{style:q,onClick:()=>Q(!0),children:`Открыть диалог`}),(0,W.jsx)(Se,{title:`Подтверждение`,description:`Подтвердите действие`,open:at,onClose:()=>Q(!1),children:(0,W.jsx)(b,{onClick:()=>Q(!1),children:`Закрыть`})})]}),(0,W.jsx)(V,{title:`Modal`,children:(0,W.jsxs)(pe,{children:[(0,W.jsx)(b,{style:q,onClick:()=>$(!0),children:`Открыть модалку`}),(0,W.jsxs)(de,{title:`Параметры`,isOpen:ot,onClose:()=>$(!1),children:[(0,W.jsx)(ue,{children:`Содержимое модального окна`}),(0,W.jsx)(le,{children:(0,W.jsx)(b,{onClick:()=>$(!1),children:`Готово`})})]})]})})]})}var U,W,nt,G,K,q,J,Y,rt,it,X,Z,at;function Q(){return(Q=e((()=>{U=n(),oe(),se(),y(),d(),x(),me(),ge(),M(),u(),xe(),a(),o(),p(),c(),ve(),E(),Te(),Ce(),De(),B(),ke(),je(),fe(),C(),Ne(),Fe(),g(),Le(),ne(),_e(),A(),ze(),He(),We(),r(),Ke(),qe(),ae(),F(),I(),Ze(),Qe(),W=m(),nt={display:`grid`,gridTemplateColumns:`repeat(auto-fit, minmax(var(--ui-width-xl), 1fr))`,alignItems:`start`,gap:`2em`,padding:`2em`,background:`var(--surface-2)`},G={display:`grid`,alignContent:`start`,gridTemplateColumns:`100%`,gap:`0.5em`,padding:`1em`,overflow:`hidden`,borderRadius:`var(--radius-md)`,background:`var(--surface-1)`,boxShadow:`var(--shadow-lg)`},K={fontWeight:700,color:`var(--content-0)`},q={width:`100%`},J=[{id:`draft`,label:`Черновик`},{id:`review`,label:`На согласовании`},{id:`published`,label:`Опубликован`}],Y=[{code:`EKB`,label:`Екатеринбург`},{code:`KZN`,label:`Казань`},{code:`MOW`,label:`Москва`}],rt=[{value:`day`,label:`День`},{value:`week`,label:`Неделя`},{value:`month`,label:`Месяц`}],it=[{id:1,name:`Отдел продаж`,code:`SLS`,manager:`Елена Миронова`,direction:`Коммерческий блок`},{id:2,name:`Закупки`,code:`PRC`,manager:`Антон Мелихов`,direction:`Коммерческий блок`},{id:3,name:`Логистика`,code:`LGS`,manager:`Мария Климова`,direction:`Операционный блок`,disabled:!0},{id:4,name:`Поддержка клиентов`,code:`SUP`,manager:`Ирина Белова`,direction:`Операционный блок`}],X={title:`Development/Interactive components`,component:H,parameters:{layout:`fullscreen`,docs:{description:{component:`Быстрая витрина интерактивных UI-компонентов для разработки и проверки общих стилей.`}}}},Z={},H.__docgenInfo={description:``,methods:[],displayName:`InteractiveComponents`},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`function InteractiveComponents() {
+  const [text, setText] = useState("Значение");
+  const [number, setNumber] = useState<number | undefined>(42);
+  const [search, setSearch] = useState("");
+  const [textarea, setTextarea] = useState("Комментарий");
+  const [checked, setChecked] = useState(true);
+  const [radio, setRadio] = useState(false);
+  const [radioGroup, setRadioGroup] = useState("first");
+  const [switchValue, setSwitchValue] = useState(true);
+  const [toggleValue, setToggleValue] = useState(false);
+  const [sliderValue, setSliderValue] = useState<number | undefined>(3);
+  const [sliderRangeValue, setSliderRangeValue] = useState<SliderRangeValue | undefined>();
+  const [sliderRangeInputValue, setSliderRangeInputValue] = useState<SliderRangeValue>([0, 0]);
+  const [sliderInputValue, setSliderInputValue] = useState(60);
+  const [selectedStatus, setSelectedStatus] = useState<(typeof statusOptions)[number] | undefined>(statusOptions[0]);
+  const [selectedCities, setSelectedCities] = useState<CollectionItem[]>([cityOptions[0]!]);
+  const [tags, setTags] = useState<readonly string[]>(["UI", "Стили"]);
+  const [listboxValue, setListboxValue] = useState("week");
+  const [state, setState] = useState<State | undefined>("information");
+  const [layout, setLayout] = useState("two-columns");
+  const [date, setDate] = useState<Date | null>(new Date(2026, 2, 10));
+  const [dateTime, setDateTime] = useState<Date | null>(new Date(2026, 2, 10, 10, 30));
+  const [presetId, setPresetId] = useState<string | null>("today");
+  const [range, setRange] = useState<NullableDateRange | null>([new Date(2026, 2, 1), new Date(2026, 2, 10)]);
+  const [period, setPeriod] = useState<string | undefined>("month");
+  const [file, setFile] = useState<ReadFileResult>();
+  const [files, setFiles] = useState<ReadFileAsDataUrlResult[]>([]);
+  const [image, setImage] = useState<ReadImageResult>();
+  const [droppedFiles, setDroppedFiles] = useState<ReadFileResult[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [departmentValue, setDepartmentValue] = useState<DepartmentOption | undefined>();
+  return <div style={gridStyle}>
+            <ComponentCard title="Text">
+                <Text color="primary">Основной</Text>
+                <Text color="secondary">Дополнительный</Text>
+                <Text color="muted">Приглушенный</Text>
+                <Text color="accent">Акцентированный</Text>
+                <Text color="brand">Брендовый</Text>
+                <Text color="info">Информация</Text>
+                <Text color="success">Успешно</Text>
+                <Text color="warning">Предупреждение</Text>
+                <Text color="error">Ошибка</Text>
+            </ComponentCard>
+
+            <ComponentCard title="Badge">
+                <BadgeList>
+                    <Badge tone="neutral" appearance="outline">
+                        Neutral
+                    </Badge>
+                    <Badge tone="success" appearance="solid">
+                        Успешно
+                    </Badge>
+                    <Badge tone="warning" appearance="solid">
+                        Внимание
+                    </Badge>
+                    <Badge tone="error" appearance="solid">
+                        Ошибка
+                    </Badge>
+                    <Badge tone="info" appearance="solid">
+                        Информация
+                    </Badge>
+                </BadgeList>
+            </ComponentCard>
+
+            <ComponentCard title="Button">
+                <GridContainer gap="sm" templateColumns="1fr 1fr">
+                    <Button variant="transparent">Действие</Button>
+                    <Button variant="ghost">Действие</Button>
+                    <Button variant="neutralOutline">Действие</Button>
+                    <Button variant="infoOutline">Действие</Button>
+                    <Button variant="successOutline">Действие</Button>
+                    <Button variant="warningOutline">Действие</Button>
+                    <Button variant="errorOutline">Действие</Button>
+
+                    <Button variant="neutral">Действие</Button>
+                    <Button variant="info">Действие</Button>
+                    <Button variant="success">Действие</Button>
+                    <Button variant="warning">Действие</Button>
+                    <Button variant="error">Действие</Button>
+                </GridContainer>
+            </ComponentCard>
+
+            <ComponentCard title="InputText">
+                <InputText label="Текст" description="Поле ввода текста" placeholder="Введите текст" disabled value={text} onChange={setText} />
+                <InputText label="Текст" description="Поле ввода текста" placeholder="Введите текст" value={text} onChange={setText} />
+                <InputText required label="Текст" description="Поле ввода текста" placeholder="Введите текст" value={text} onChange={setText} onClear={() => setText("")} />
+            </ComponentCard>
+
+            <ComponentCard title="InputNumber">
+                <InputNumber label="Количество" description="Поле ввода числа" placeholder="Введите число" value={number} min={0} onChange={setNumber} disabled />
+                <InputNumber label="Количество" description="Поле ввода числа" placeholder="Введите число" value={number} min={0} onChange={setNumber} required />
+                <InputNumber label="Количество" description="Поле ввода числа" placeholder="Введите число" value={number} min={0} onChange={setNumber} />
+                <InputNumber label="Количество" description="Поле ввода числа" placeholder="Введите число" value={number} min={0} onChange={setNumber} onClear={() => setNumber(undefined)} />
+            </ComponentCard>
+
+            <ComponentCard title="InputSearch">
+                <InputSearch label="Поиск" placeholder="Найти" value={search} onChange={setSearch} />
+            </ComponentCard>
+
+            <ComponentCard title="Textarea">
+                <Textarea label="Комментарий" required placeholder="Многострочный комментарий" rows={6} value={textarea} onChange={setTextarea} />
+            </ComponentCard>
+
+            <ComponentCard title="CheckBox">
+                <CheckBox label="Опция" description="Описание чекбокса" disabled value={checked} onChange={setChecked} />
+                <CheckBox label="Опция" description="Описание чекбокса" value={checked} onChange={setChecked} />
+                <CheckBox label="Опция" description="Описание чекбокса" value={checked} onChange={setChecked} indeterminate />
+            </ComponentCard>
+
+            <ComponentCard title="RadioButton">
+                <RadioButton label="Опция" description="Описание радиокнопки" disabled value={radio} onChange={setRadio} />
+                <RadioButton label="Опция" description="Описание радиокнопки" name="radio-1" value={radio} onChange={setRadio} />
+                <RadioButton label="Опция" description="Описание радиокнопки" name="radio-1" value={radio} onChange={setRadio} />
+            </ComponentCard>
+
+            <ComponentCard title="RadioGroup">
+                <RadioGroup label="Радио группа" description="Вертикальная группа" value={radioGroup} onChange={setRadioGroup} orientation="vertical" aria-label="Вариант">
+                    <RadioGroup.Option value="first" label="Первый" />
+                    <RadioGroup.Option value="second" label="Второй" />
+                    <RadioGroup.Option value="third" label="Третий" description="Новая опциональная опция" />
+                </RadioGroup>
+
+                <RadioGroup label="Радио группа" description="Горизонтальная группа" value={radioGroup} onChange={setRadioGroup} orientation="horizontal" aria-label="Вариант">
+                    <RadioGroup.Option value="first" label="Первый" />
+                    <RadioGroup.Option value="second" label="Второй" />
+                    <RadioGroup.Option value="third" label="Третий" description="Новая опциональная опция" />
+                </RadioGroup>
+            </ComponentCard>
+
+            <ComponentCard title="Switch">
+                <Switch label="Уведомления" description="Устаревный компонент" value={switchValue} onChange={setSwitchValue} />
+            </ComponentCard>
+
+            <ComponentCard title="Toggle">
+                <Toggle label="Режим" description="Переключатель состояния" value={toggleValue} onChange={setToggleValue} checkedText="Вкл" uncheckedText="Выкл" />
+                <Toggle label="Режим" description="Переключатель состояния" labelPosition="after" value={toggleValue} onChange={setToggleValue} checkedText="Вкл" uncheckedText="Выкл" />
+            </ComponentCard>
+
+            <ComponentCard title="Slider">
+                <Slider label="Уровень" description="Простой слайдер" value={sliderValue} min={0} max={100} onChange={setSliderValue} />
+                <Slider label="Уровень" description="Простой слайдер" disabled marks={[{
+        value: 1,
+        label: "m1"
+      }, {
+        value: 2,
+        label: "m2"
+      }, {
+        value: 3,
+        label: "m3"
+      }, {
+        value: 4,
+        label: "m4"
+      }, {
+        value: 5,
+        label: "m5"
+      }, {
+        value: 6,
+        label: "m6"
+      }]} marksPosition="index" value={sliderValue} min={0} max={100} onChange={setSliderValue} />
+
+                <SliderRange label="Уровень" description="Диапазон" marks={[{
+        value: 0,
+        label: "m1"
+      }, {
+        value: 1,
+        label: "m2"
+      }, {
+        value: 2,
+        label: "m3"
+      }, {
+        value: 3,
+        label: "m4"
+      }]} marksPosition="index" value={sliderRangeValue} min={0} max={100} onChange={setSliderRangeValue} />
+            </ComponentCard>
+
+            <ComponentCard title="SliderInput">
+                <SliderInput label="Порог" value={sliderInputValue} min={0} max={100} onChange={setSliderInputValue} />
+                <SliderRangeInput label="Порог" value={sliderRangeInputValue} onChange={setSliderRangeInputValue} min={0} max={100} marks={[{
+        value: 0,
+        label: "0"
+      }, {
+        value: 20,
+        label: "20"
+      }, {
+        value: 40,
+        label: "40"
+      }, {
+        value: 60,
+        label: "60"
+      }, {
+        value: 80,
+        label: "80"
+      }, {
+        value: 100,
+        label: "100"
+      }]} />
+                <SliderRangeInput label="Срок: открытые границы и дни в фильтре" description="Крайние marks отдают null, обычные marks отдают дни через \`outputValue\`." min={0} max={25} marks={[{
+        value: 0,
+        label: "-",
+        outputValue: null
+      }, {
+        value: 1,
+        label: "1м.",
+        outputValue: 30
+      }, {
+        value: 3,
+        label: "3м.",
+        outputValue: 90
+      }, {
+        value: 6,
+        label: "6м.",
+        outputValue: 180
+      }, {
+        value: 12,
+        label: "1г.",
+        outputValue: 360
+      }, {
+        value: 18,
+        label: "1.5г.",
+        outputValue: 540
+      }, {
+        value: 24,
+        label: "2г.",
+        outputValue: 720
+      }, {
+        value: 25,
+        label: "-",
+        outputValue: null
+      }]} value={sliderRangeInputValue} onChange={setSliderRangeInputValue} />
+
+                <SliderRangeInput label="Срок текстом" description="В поле выводится готовый текст по marks, а изменение через popover коммитится при закрытии." placeholder="Любой срок" readonlyValueText min={0} max={25} marks={[{
+        value: 0,
+        label: "-",
+        outputValue: null
+      }, {
+        value: 1,
+        label: "1м.",
+        outputValue: 30
+      }, {
+        value: 3,
+        label: "3м.",
+        outputValue: 90
+      }, {
+        value: 6,
+        label: "6м.",
+        outputValue: 180
+      }, {
+        value: 12,
+        label: "1г.",
+        outputValue: 360
+      }, {
+        value: 18,
+        label: "1.5г.",
+        outputValue: 540
+      }, {
+        value: 24,
+        label: "2г.",
+        outputValue: 720
+      }, {
+        value: 25,
+        label: "-",
+        outputValue: null
+      }]} marksPosition="index" value={sliderRangeInputValue} onChange={setSliderRangeInputValue} />
+            </ComponentCard>
+
+            <ComponentCard title="Select">
+                <Select label="Статус" description="searchable" searchable options={statusOptions} value={selectedStatus} onChange={setSelectedStatus} getOptionKey={option => option.id} getOptionLabel={option => option.label} />
+                <Select label="Статус" description="disabled" disabled options={statusOptions} value={selectedStatus} onChange={setSelectedStatus} getOptionKey={option => option.id} getOptionLabel={option => option.label} />
+                <Select label="Статус" description="Пример использования низкоуровневого Select со строковыми значениями." placeholder="Выберите статус" options={statusOptions} value={selectedStatus} onChange={setSelectedStatus} getOptionKey={option => option.id} getOptionLabel={option => option.label} />
+
+                <Select label="Подразделение" description="Выберите подразделение из списка." placeholder="Не выбрано" options={departmentOptions} value={departmentValue} onChange={setDepartmentValue} getOptionKey={(option: DepartmentOption) => option.id} getOptionLabel={(option: DepartmentOption) => option.name} getOptionCode={(option: DepartmentOption) => option.code} getOptionDisabled={(option: DepartmentOption) => option.disabled ?? false} getOptionGroup={option => ({
+        key: option.direction,
+        label: option.direction
+      })} optionsMaxWidth="40em" />
+
+                {/* <LinkedFiltersDemo /> */}
+            </ComponentCard>
+
+            <ComponentCard title="MultiSelect">
+                <MultiSelect label="Города" items={cityOptions} value={selectedCities} query="" codeKey="code" textKey="label" onChange={setSelectedCities} onQuery={() => undefined} onOpen={() => undefined} onClose={() => undefined} />
+            </ComponentCard>
+
+            <ComponentCard title="TreeMultiSelect">
+                <StatefulTreeMultiSelect />
+            </ComponentCard>
+
+            <ComponentCard title="TagInput">
+                <TagInput label="Теги" placeholder="Добавить" value={tags} onChange={setTags} />
+            </ComponentCard>
+
+            <ComponentCard title="Listbox">
+                <Listbox options={listboxOptions} value={listboxValue} onChange={value => setListboxValue(value)} />
+            </ComponentCard>
+
+            <ComponentCard title="StateSelect">
+                <StateSelect label="Состояние" value={state} onChange={setState} />
+            </ComponentCard>
+
+            <ComponentCard title="LayoutPicker">
+                <LayoutPicker label="Раскладка" value={layout} onChange={setLayout} showPlaceholder />
+            </ComponentCard>
+
+            <ComponentCard title="SingleDateInput">
+                <SingleDateInput label="Дата" value={date} onChange={setDate} selectionMode="week" />
+            </ComponentCard>
+
+            <ComponentCard title="SingleDateTimeInput">
+                <SingleDateTimeInput label="Дата и время" value={dateTime} onChange={setDateTime} />
+            </ComponentCard>
+
+            <ComponentCard title="DateRangePresetSelect">
+                <DateRangePresetSelect label="Период" value={presetId ?? undefined} onChange={nextPresetId => setPresetId(nextPresetId ?? null)} onRangeChange={payload => setRange(payload?.range ?? null)} referenceDate={new Date(2026, 2, 10, 12)} />
+            </ComponentCard>
+
+            <ComponentCard title="PresetRangeDateInput">
+                <PresetRangeDateInput value={range} onChange={setRange} presetId={presetId ?? null} onPresetIdChange={nextPresetId => setPresetId(nextPresetId ?? null)} referenceDate={new Date(2026, 2, 10, 12)} presetLabel="Быстрый диапазон" />
+            </ComponentCard>
+
+            <ComponentCard title="PeriodSelect">
+                <PeriodSelect label="Группировка" value={period} onChange={setPeriod} />
+            </ComponentCard>
+
+            <ComponentCard title="InputFile">
+                <InputFile label="Файл" placeholder="Выберите файл" value={file} onChange={setFile} onClear={() => setFile(undefined)} readMode="data-url" />
+            </ComponentCard>
+
+            <ComponentCard title="InputFiles">
+                <InputFiles label="Файлы" placeholder="Выберите файлы" value={files} onChange={setFiles} readMode="data-url" />
+            </ComponentCard>
+
+            <ComponentCard title="InputImage">
+                <InputImage label="Изображение" value={image} onChange={setImage} onClear={() => setImage(undefined)} />
+            </ComponentCard>
+
+            <ComponentCard title="DropZone">
+                <DropZone value={droppedFiles} multiple readMode="data-url" onChange={nextFiles => setDroppedFiles(nextFiles)}>
+                    <div style={{
+          display: "grid",
+          placeItems: "center",
+          minHeight: "6em",
+          textAlign: "center"
+        }}>
+                        {droppedFiles.length ? \`Файлов: \${droppedFiles.length}\` : "Перетащите файлы"}
+                    </div>
+                </DropZone>
+            </ComponentCard>
+
+            <ComponentCard title="TabsBox">
+                <TabsBox defaultValue="first" items={[{
+        id: "first",
+        title: "Первый",
+        content: "Содержимое"
+      }, {
+        id: "second",
+        title: "Второй",
+        content: "Другая панель"
+      }, {
+        id: "third",
+        title: "Ещё одна",
+        content: "Ещё одна панель"
+      }, {
+        id: "quat",
+        title: "Четвертая",
+        content: "Четвертая панель"
+      }, {
+        id: "five",
+        title: "Пятая",
+        content: "Пятая панель"
+      }]} />
+
+                <TabsBox defaultValue="first" clean items={[{
+        id: "first",
+        title: "Первый",
+        content: "Содержимое"
+      }, {
+        id: "second",
+        title: "Второй",
+        content: "Другая панель"
+      }, {
+        id: "third",
+        title: "Ещё одна",
+        content: "Ещё одна панель"
+      }, {
+        id: "quat",
+        title: "Четвертая",
+        content: "Четвертая панель"
+      }, {
+        id: "five",
+        title: "Пятая",
+        content: "Пятая панель"
+      }]} />
+            </ComponentCard>
+
+            <ComponentCard title="TabsBox">
+                <TabsBox defaultValue="first" orientation="vertical" items={[{
+        id: "first",
+        title: "Первый",
+        content: "Содержимое"
+      }, {
+        id: "second",
+        title: "Второй",
+        content: "Другая панель"
+      }, {
+        id: "third",
+        title: "Ещё одна",
+        content: "Другая панель"
+      }, {
+        id: "quat",
+        title: "Четвертая",
+        content: "Другая панель"
+      }]} />
+
+                <TabsBox defaultValue="first" orientation="vertical" clean items={[{
+        id: "first",
+        title: "Первый",
+        content: "Содержимое"
+      }, {
+        id: "second",
+        title: "Второй",
+        content: "Другая панель"
+      }, {
+        id: "third",
+        title: "Ещё одна",
+        content: "Другая панель"
+      }, {
+        id: "quat",
+        title: "Четвертая",
+        content: "Другая панель"
+      }]} />
+            </ComponentCard>
+
+            <ComponentCard title="Disclosure">
+                <DisclosureGroup>
+                    <Disclosure label="Раскрыть 1">Содержимое панели 1</Disclosure>
+                    <Disclosure label="Раскрыть 2">Содержимое панели 2</Disclosure>
+                    <Disclosure label="Раскрыть 3">Содержимое панели 3</Disclosure>
+                    <Disclosure label="Раскрыть 4">Содержимое панели 4</Disclosure>
+                </DisclosureGroup>
+
+                <Disclosure label="Раскрыть 1" tone="secondary">
+                    Содержимое панели 1
+                </Disclosure>
+            </ComponentCard>
+
+            <ComponentCard title="ExpandableActionPanel">
+                <ExpandableActionPanel>
+                    <Button variant="transparent">Действие</Button>
+                </ExpandableActionPanel>
+            </ComponentCard>
+
+            <ComponentCard title="Popover">
+                <Popover>
+                    <Popover.Trigger>
+                        <Button style={compactButtonStyle}>Открыть</Button>
+                    </Popover.Trigger>
+                    <Popover.Content>
+                        {({
+            setClose
+          }) => <div style={{
+            display: "grid",
+            gap: "0.75em",
+            padding: "1em",
+            maxWidth: "14em"
+          }}>
+                                <div>Содержимое popover</div>
+                                <Button onClick={setClose}>Закрыть</Button>
+                            </div>}
+                    </Popover.Content>
+                </Popover>
+            </ComponentCard>
+
+            <ComponentCard title="DropdownMenu">
+                <DropdownMenu>
+                    <DropdownMenu.Trigger>
+                        <Button style={compactButtonStyle}>Действия</Button>
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content>
+                        <DropdownMenu.Item>Редактировать</DropdownMenu.Item>
+                        <DropdownMenu.Item>Удалить</DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu>
+            </ComponentCard>
+
+            <ComponentCard title="ContextMenu">
+                <ContextMenu>
+                    <ContextMenu.Trigger>
+                        <div style={{
+            display: "grid",
+            placeItems: "center",
+            minHeight: "6em",
+            padding: "0.75em",
+            border: "var(--border)",
+            borderRadius: "var(--radius-sm)",
+            textAlign: "center"
+          }}>
+                            Правая кнопка мыши
+                        </div>
+                    </ContextMenu.Trigger>
+                    <ContextMenu.Content>
+                        <ContextMenu.Item>Переименовать</ContextMenu.Item>
+                        <ContextMenu.Item>Удалить</ContextMenu.Item>
+                    </ContextMenu.Content>
+                </ContextMenu>
+            </ComponentCard>
+
+            <ComponentCard title="Dialog">
+                <Button style={compactButtonStyle} onClick={() => setDialogOpen(true)}>
+                    Открыть диалог
+                </Button>
+                <Dialog title="Подтверждение" description="Подтвердите действие" open={dialogOpen} onClose={() => setDialogOpen(false)}>
+                    <Button onClick={() => setDialogOpen(false)}>Закрыть</Button>
+                </Dialog>
+            </ComponentCard>
+
+            <ComponentCard title="Modal">
+                <ModalManagerProvider>
+                    <Button style={compactButtonStyle} onClick={() => setModalOpen(true)}>
+                        Открыть модалку
+                    </Button>
+                    <Modal title="Параметры" isOpen={modalOpen} onClose={() => setModalOpen(false)}>
+                        <ModalContent>Содержимое модального окна</ModalContent>
+                        <ModalFooter>
+                            <Button onClick={() => setModalOpen(false)}>Готово</Button>
+                        </ModalFooter>
+                    </Modal>
+                </ModalManagerProvider>
+            </ComponentCard>
+        </div>;
+}`,...H.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{}`,...Z.parameters?.docs?.source}}},at=[`InteractiveComponents`,`All`]})))()}Q();export{Z as All,H as InteractiveComponents,at as __namedExportsOrder,X as default};

package/storybook-static/assets/{LayoutPicker-Bghy4k1z.js → LayoutPicker-CPFQxHT8.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DuAeRvx6.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-Dk_BOKmc.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-DW9dESrS.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-B94C5PVz.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-CQ7RHmDr.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-SD1M9rTk.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
 `,(0,C.jsx)(u,{children:`LayoutPicker`}),`
 `,(0,C.jsx)(o,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
 `,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.

package/storybook-static/assets/{LayoutPicker-yb6IMmd2.css → LayoutPicker-DudPIiwb.css}

@@ -1 +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}
+._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(--status-brand-fill);border:none}