@ryuzaki13/react-foundation-ui 1.4.5 → 1.5.0

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

@@ -0,0 +1,303 @@
+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-C9OAPzUM.js";import{i as a,n as o,r as s,t as ee}from"./DisclosureGroup-BUDxwl5C.js";import{n as c,t as te}from"./ExpandableActionPanel-C9G9PsZx.js";import{n as ne,t as re}from"./RadioButton-BLyqp88m.js";import{n as l,t as ie}from"./SingleDateTimeInput-CN7PyOsb.js";import{n as u,t as ae}from"./CheckBox-CWipX4CI.js";import{n as d,t as oe}from"./DropZone-B7Q1qQqP.js";import{n as f}from"./iframe-BHhbrImE.js";import{n as p,t as m}from"./Popover-CUJF-IMC.js";import{n as se,t as h}from"./Button-Bzc9jBAF.js";import{n as ce,t as g}from"./ContextMenu-BjWu5DHB.js";import{a as le,i as ue,n as de,r as fe,s as pe,t as me}from"./ModalManagerProvider-natWXnSM.js";import{n as _,t as v}from"./DropdownMenu-BW35W6_U.js";import{n as he,r as ge}from"./DateInput-BUgBb3aH.js";import{a as y,c as b,i as x,t as _e}from"./Input-DZQKV4DP.js";import{n as ve,t as S}from"./RadioGroup-DERcyzA0.js";import{n as C,t as ye}from"./Select-g0c0XGQY.js";import{n as w,t as be}from"./DateRangePresetSelect-CBZ0OAmn.js";import{n as T,t as xe}from"./Dialog-DBTU-LRR.js";import{n as E,t as Se}from"./InputFiles-OusF5Lfq.js";import{n as D,t as Ce}from"./InputFile-CJll5mC-.js";import{n as O,t as we}from"./InputImage-Dl2bJNZk.js";import{n as k,t as Te}from"./LayoutPicker-DzAN3gGO.js";import{n as A,t as Ee}from"./Listbox-CHsNGsDc.js";import{n as j,t as De}from"./MultiSelect-DlCZ7dhH.js";import{n as M,t as Oe}from"./PeriodSelect-DtfTzrNK.js";import{n as N,t as ke}from"./PresetRangeDateInput-D3_uzWzQ.js";import{i as Ae,t as je}from"./Slider-24H5ASxG.js";import{r as Me,t as Ne}from"./SliderInput-bqFr-Lyp.js";import{n as Pe,t as Fe}from"./StateSelect-IigEzRom.js";import{n as Ie,t as Le}from"./TabsBox-ClZCbgKB.js";import{n as Re,t as ze}from"./TagInput-DorsSF_V.js";import{n as P,t as Be}from"./Textarea-yZWv6QdW.js";import{n as F,t as Ve}from"./Toggle-CdpPJI_O.js";import{n as He,t as I}from"./TreeMultiSelect-BPz5kISi.js";import{n as Ue,t as We}from"./treeStoryFixtures-Ci7STpiz.js";function Ge({onChange:e,...t}){let[n,r]=(0,L.useState)(()=>t.defaultValue??t.value??``),[i,a]=(0,L.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,R.jsx)(_e,{...t,value:n,onChange:te,onKeyDown:ee,onBlur:c,onClear:s})}var L,R;function z(){return(z=e((()=>{L=t(n(),1),b(),R=f(),Ge.__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 B({title:e,children:t}){return(0,U.jsxs)(`section`,{style:W,children:[(0,U.jsx)(`div`,{style:G,children:e}),t]})}function Ke({initialValue:e={},label:t=`TreeMultiSelect`,description:n,optionsLayout:r=`tree`,nodes:i=We,defaultExpandedCodeKeys:a}){let[o,s]=(0,H.useState)(e);return(0,U.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:520},children:[(0,U.jsx)(I,{label:t,description:n,nodes:i,value:o,onChange:s,optionsLayout:r,defaultExpandedCodeKeys:a}),(0,U.jsxs)(`div`,{style:{fontSize:`var(--font-size-sm)`,color:`var(--content-1)`},children:[`Текущее значение: `,JSON.stringify(o)]})]})}function V(){let[e,t]=(0,H.useState)(`Значение`),[n,r]=(0,H.useState)(42),[a,o]=(0,H.useState)(``),[c,ne]=(0,H.useState)(`Комментарий`),[l,u]=(0,H.useState)(!0),[d,f]=(0,H.useState)(!1),[p,se]=(0,H.useState)(`first`),[ce,de]=(0,H.useState)(!0),[pe,_]=(0,H.useState)(!1),[ge,b]=(0,H.useState)(60),[_e,ve]=(0,H.useState)(60),[C,w]=(0,H.useState)(q[0]),[T,E]=(0,H.useState)([J[0]]),[D,O]=(0,H.useState)([`UI`,`Стили`]),[k,A]=(0,H.useState)(`week`),[j,M]=(0,H.useState)(`information`),[N,Ae]=(0,H.useState)(`two-columns`),[Me,Pe]=(0,H.useState)(new Date(2026,2,10)),[Ie,Re]=(0,H.useState)(new Date(2026,2,10,10,30)),[P,F]=(0,H.useState)(`today`),[He,I]=(0,H.useState)([new Date(2026,2,1),new Date(2026,2,10)]),[Ue,We]=(0,H.useState)(`month`),[L,R]=(0,H.useState)(),[z,V]=(0,H.useState)([]),[W,G]=(0,H.useState)(),[Y,X]=(0,H.useState)([]),[Z,Q]=(0,H.useState)(!1),[Ye,$]=(0,H.useState)(!1);return(0,U.jsxs)(`div`,{style:qe,children:[(0,U.jsxs)(B,{title:`Button`,children:[(0,U.jsx)(h,{variant:`transparent`,children:`Действие`}),(0,U.jsx)(h,{variant:`ghost`,children:`Действие`}),(0,U.jsx)(h,{variant:`neutral`,children:`Действие`}),(0,U.jsx)(h,{variant:`neutralOutline`,children:`Действие`}),(0,U.jsx)(h,{variant:`info`,children:`Действие`}),(0,U.jsx)(h,{variant:`infoOutline`,children:`Действие`})]}),(0,U.jsxs)(B,{title:`InputText`,children:[(0,U.jsx)(y,{label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,disabled:!0,value:e,onChange:t}),(0,U.jsx)(y,{label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,value:e,onChange:t}),(0,U.jsx)(y,{required:!0,label:`Текст`,description:`Поле ввода текста`,placeholder:`Введите текст`,value:e,onChange:t,onClear:()=>t(``)})]}),(0,U.jsxs)(B,{title:`InputNumber`,children:[(0,U.jsx)(x,{label:`Количество`,value:n,min:0,onChange:r,disabled:!0}),(0,U.jsx)(x,{label:`Количество`,value:n,min:0,onChange:r,required:!0}),(0,U.jsx)(x,{label:`Количество`,value:n,min:0,onChange:r}),(0,U.jsx)(x,{label:`Количество`,value:n,min:0,onChange:r,onClear:()=>r(void 0)})]}),(0,U.jsx)(B,{title:`InputSearch`,children:(0,U.jsx)(Ge,{label:`Поиск`,placeholder:`Найти`,value:a,onChange:o})}),(0,U.jsx)(B,{title:`Textarea`,children:(0,U.jsx)(Be,{label:`Комментарий`,required:!0,placeholder:`Многострочный комментарий`,rows:6,value:c,onChange:ne})}),(0,U.jsxs)(B,{title:`CheckBox`,children:[(0,U.jsx)(ae,{label:`Опция включена`,disabled:!0,value:l,onChange:u}),(0,U.jsx)(ae,{label:`Опция включена`,value:l,onChange:u,indeterminate:!0})]}),(0,U.jsxs)(B,{title:`RadioButton`,children:[(0,U.jsx)(re,{label:`Выбранная опция`,disabled:!0,value:d,onChange:f}),(0,U.jsx)(re,{label:`Выбранная опция`,value:d,onChange:f})]}),(0,U.jsx)(B,{title:`RadioGroup`,children:(0,U.jsxs)(S,{value:p,onChange:se,orientation:`vertical`,"aria-label":`Вариант`,children:[(0,U.jsx)(S.Option,{value:`first`,label:`Первый`}),(0,U.jsx)(S.Option,{value:`second`,label:`Второй`})]})}),(0,U.jsx)(B,{title:`Switch`,children:(0,U.jsx)(i,{label:`Уведомления`,value:ce,onChange:de})}),(0,U.jsx)(B,{title:`Toggle`,children:(0,U.jsx)(Ve,{label:`Режим`,value:pe,onChange:_,checkedText:`Вкл`,uncheckedText:`Выкл`})}),(0,U.jsx)(B,{title:`Slider`,children:(0,U.jsx)(je,{label:`Уровень`,value:ge,min:0,max:100,onChange:b})}),(0,U.jsx)(B,{title:`SliderInput`,children:(0,U.jsx)(Ne,{label:`Порог`,value:_e,min:0,max:100,onChange:ve})}),(0,U.jsxs)(B,{title:`Select`,children:[(0,U.jsx)(ye,{label:`Статус`,options:q,value:C,onChange:w,getOptionKey:e=>e.id,getOptionLabel:e=>e.label}),(0,U.jsx)(ye,{label:`Статус`,searchable:!0,options:q,value:C,onChange:w,getOptionKey:e=>e.id,getOptionLabel:e=>e.label})]}),(0,U.jsx)(B,{title:`MultiSelect`,children:(0,U.jsx)(De,{label:`Города`,items:J,value:T,query:``,codeKey:`code`,textKey:`label`,onChange:E,onQuery:()=>void 0,onOpen:()=>void 0,onClose:()=>void 0})}),(0,U.jsx)(B,{title:`TreeMultiSelect`,children:(0,U.jsx)(Ke,{})}),(0,U.jsx)(B,{title:`TagInput`,children:(0,U.jsx)(ze,{label:`Теги`,placeholder:`Добавить`,value:D,onChange:O})}),(0,U.jsx)(B,{title:`Listbox`,children:(0,U.jsx)(Ee,{options:Je,value:k,onChange:e=>A(e)})}),(0,U.jsx)(B,{title:`StateSelect`,children:(0,U.jsx)(Fe,{label:`Состояние`,value:j,onChange:M})}),(0,U.jsx)(B,{title:`LayoutPicker`,children:(0,U.jsx)(Te,{label:`Раскладка`,value:N,onChange:Ae,showPlaceholder:!0})}),(0,U.jsx)(B,{title:`SingleDateInput`,children:(0,U.jsx)(he,{label:`Дата`,value:Me,onChange:Pe})}),(0,U.jsx)(B,{title:`SingleDateTimeInput`,children:(0,U.jsx)(ie,{label:`Дата и время`,value:Ie,onChange:Re})}),(0,U.jsx)(B,{title:`DateRangePresetSelect`,children:(0,U.jsx)(be,{label:`Период`,value:P??void 0,onChange:e=>F(e??null),onRangeChange:e=>I(e?.range??null),referenceDate:new Date(2026,2,10,12)})}),(0,U.jsx)(B,{title:`PresetRangeDateInput`,children:(0,U.jsx)(ke,{value:He,onChange:I,presetId:P??null,onPresetIdChange:e=>F(e??null),referenceDate:new Date(2026,2,10,12),presetLabel:`Быстрый диапазон`})}),(0,U.jsx)(B,{title:`PeriodSelect`,children:(0,U.jsx)(Oe,{label:`Группировка`,value:Ue,onChange:We})}),(0,U.jsx)(B,{title:`InputFile`,children:(0,U.jsx)(Ce,{label:`Файл`,placeholder:`Выберите файл`,value:L,onChange:R,onClear:()=>R(void 0),readMode:`data-url`})}),(0,U.jsx)(B,{title:`InputFiles`,children:(0,U.jsx)(Se,{label:`Файлы`,placeholder:`Выберите файлы`,value:z,onChange:V,readMode:`data-url`})}),(0,U.jsx)(B,{title:`InputImage`,children:(0,U.jsx)(we,{label:`Изображение`,value:W,onChange:G,onClear:()=>G(void 0)})}),(0,U.jsx)(B,{title:`DropZone`,children:(0,U.jsx)(oe,{value:Y,multiple:!0,readMode:`data-url`,onChange:e=>X(e),children:(0,U.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,minHeight:`6em`,textAlign:`center`},children:Y.length?`Файлов: ${Y.length}`:`Перетащите файлы`})})}),(0,U.jsx)(B,{title:`TabsBox`,children:(0,U.jsx)(Le,{defaultValue:`first`,bordered:!0,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Другая панель`},{id:`quat`,title:`Четвертая`,content:`Другая панель`}]})}),(0,U.jsx)(B,{title:`TabsBox`,children:(0,U.jsx)(Le,{defaultValue:`first`,orientation:`vertical`,bordered:!0,items:[{id:`first`,title:`Первый`,content:`Содержимое`},{id:`second`,title:`Второй`,content:`Другая панель`},{id:`third`,title:`Ещё одна`,content:`Другая панель`},{id:`quat`,title:`Четвертая`,content:`Другая панель`}]})}),(0,U.jsxs)(B,{title:`Disclosure`,children:[(0,U.jsxs)(ee,{children:[(0,U.jsx)(s,{label:`Раскрыть 1`,children:`Содержимое панели 1`}),(0,U.jsx)(s,{label:`Раскрыть 2`,children:`Содержимое панели 2`}),(0,U.jsx)(s,{label:`Раскрыть 3`,children:`Содержимое панели 3`}),(0,U.jsx)(s,{label:`Раскрыть 4`,children:`Содержимое панели 4`})]}),(0,U.jsx)(s,{label:`Раскрыть 1`,children:`Содержимое панели 1`})]}),(0,U.jsx)(B,{title:`ExpandableActionPanel`,children:(0,U.jsx)(te,{children:(0,U.jsx)(h,{variant:`transparent`,children:`Действие`})})}),(0,U.jsx)(B,{title:`Popover`,children:(0,U.jsxs)(m,{children:[(0,U.jsx)(m.Trigger,{children:(0,U.jsx)(h,{style:K,children:`Открыть`})}),(0,U.jsx)(m.Content,{children:({setClose:e})=>(0,U.jsxs)(`div`,{style:{display:`grid`,gap:`0.75em`,padding:`1em`,maxWidth:`14em`},children:[(0,U.jsx)(`div`,{children:`Содержимое popover`}),(0,U.jsx)(h,{onClick:e,children:`Закрыть`})]})})]})}),(0,U.jsx)(B,{title:`DropdownMenu`,children:(0,U.jsxs)(v,{children:[(0,U.jsx)(v.Trigger,{children:(0,U.jsx)(h,{style:K,children:`Действия`})}),(0,U.jsxs)(v.Content,{children:[(0,U.jsx)(v.Item,{children:`Редактировать`}),(0,U.jsx)(v.Item,{children:`Удалить`})]})]})}),(0,U.jsx)(B,{title:`ContextMenu`,children:(0,U.jsxs)(g,{children:[(0,U.jsx)(g.Trigger,{children:(0,U.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,minHeight:`6em`,padding:`0.75em`,border:`var(--border)`,borderRadius:`var(--radius-sm)`,textAlign:`center`},children:`Правая кнопка мыши`})}),(0,U.jsxs)(g.Content,{children:[(0,U.jsx)(g.Item,{children:`Переименовать`}),(0,U.jsx)(g.Item,{children:`Удалить`})]})]})}),(0,U.jsxs)(B,{title:`Dialog`,children:[(0,U.jsx)(h,{style:K,onClick:()=>Q(!0),children:`Открыть диалог`}),(0,U.jsx)(xe,{title:`Подтверждение`,description:`Подтвердите действие`,open:Z,onClose:()=>Q(!1),children:(0,U.jsx)(h,{onClick:()=>Q(!1),children:`Закрыть`})})]}),(0,U.jsx)(B,{title:`Modal`,children:(0,U.jsxs)(me,{children:[(0,U.jsx)(h,{style:K,onClick:()=>$(!0),children:`Открыть модалку`}),(0,U.jsxs)(fe,{title:`Параметры`,isOpen:Ye,onClose:()=>$(!1),children:[(0,U.jsx)(ue,{children:`Содержимое модального окна`}),(0,U.jsx)(le,{children:(0,U.jsx)(h,{onClick:()=>$(!1),children:`Готово`})})]})]})})]})}var H,U,qe,W,G,K,q,J,Je,Y,X,Z;function Q(){return(Q=e((()=>{H=n(),se(),u(),ce(),_(),ge(),w(),l(),T(),a(),o(),d(),c(),b(),D(),E(),O(),z(),k(),A(),pe(),de(),j(),M(),p(),N(),ne(),ve(),C(),Ae(),Me(),Pe(),r(),Ie(),Re(),P(),F(),He(),Ue(),U=f(),qe={display:`grid`,gridTemplateColumns:`repeat(auto-fit, minmax(var(--ui-width-xl), 1fr))`,alignItems:`start`,gap:`2em`,padding:`2em`},W={display:`grid`,alignContent:`start`,gridTemplateColumns:`100%`,gap:`0.5em`,padding:`1em`,overflow:`hidden`,borderRadius:`var(--radius-md)`,background:`var(--surface-0)`,boxShadow:`var(--shadow-lg)`},G={fontWeight:700,color:`var(--content-0)`},K={width:`100%`},q=[{id:`draft`,label:`Черновик`},{id:`review`,label:`На согласовании`},{id:`published`,label:`Опубликован`}],J=[{code:`EKB`,label:`Екатеринбург`},{code:`KZN`,label:`Казань`},{code:`MOW`,label:`Москва`}],Je=[{value:`day`,label:`День`},{value:`week`,label:`Неделя`},{value:`month`,label:`Месяц`}],Y={title:`Development/Interactive components`,component:V,parameters:{layout:`fullscreen`,docs:{description:{component:`Быстрая витрина интерактивных UI-компонентов для разработки и проверки общих стилей.`}}}},X={},V.__docgenInfo={description:``,methods:[],displayName:`InteractiveComponents`},V.parameters={...V.parameters,docs:{...V.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>(60);
+  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);
+  return <div style={gridStyle}>
+            <ComponentCard title="Button">
+                <Button variant="transparent">Действие</Button>
+                <Button variant="ghost">Действие</Button>
+                <Button variant="neutral">Действие</Button>
+                <Button variant="neutralOutline">Действие</Button>
+                <Button variant="info">Действие</Button>
+                <Button variant="infoOutline">Действие</Button>
+            </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="Количество" value={number} min={0} onChange={setNumber} disabled />
+                <InputNumber label="Количество" value={number} min={0} onChange={setNumber} required />
+                <InputNumber label="Количество" value={number} min={0} onChange={setNumber} />
+                <InputNumber label="Количество" 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="Опция включена" disabled value={checked} onChange={setChecked} />
+                <CheckBox label="Опция включена" value={checked} onChange={setChecked} indeterminate />
+            </ComponentCard>
+
+            <ComponentCard title="RadioButton">
+                <RadioButton label="Выбранная опция" disabled value={radio} onChange={setRadio} />
+                <RadioButton label="Выбранная опция" value={radio} onChange={setRadio} />
+            </ComponentCard>
+
+            <ComponentCard title="RadioGroup">
+                <RadioGroup value={radioGroup} onChange={setRadioGroup} orientation="vertical" aria-label="Вариант">
+                    <RadioGroup.Option value="first" label="Первый" />
+                    <RadioGroup.Option value="second" label="Второй" />
+                </RadioGroup>
+            </ComponentCard>
+
+            <ComponentCard title="Switch">
+                <Switch label="Уведомления" value={switchValue} onChange={setSwitchValue} />
+            </ComponentCard>
+
+            <ComponentCard title="Toggle">
+                <Toggle label="Режим" value={toggleValue} onChange={setToggleValue} checkedText="Вкл" uncheckedText="Выкл" />
+            </ComponentCard>
+
+            <ComponentCard title="Slider">
+                <Slider label="Уровень" value={sliderValue} min={0} max={100} onChange={setSliderValue} />
+            </ComponentCard>
+
+            <ComponentCard title="SliderInput">
+                <SliderInput label="Порог" value={sliderInputValue} min={0} max={100} onChange={setSliderInputValue} />
+            </ComponentCard>
+
+            <ComponentCard title="Select">
+                <Select label="Статус" options={statusOptions} value={selectedStatus} onChange={setSelectedStatus} getOptionKey={option => option.id} getOptionLabel={option => option.label} />
+                <Select label="Статус" searchable options={statusOptions} value={selectedStatus} onChange={setSelectedStatus} getOptionKey={option => option.id} getOptionLabel={option => option.label} />
+            </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} />
+            </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" bordered items={[{
+        id: "first",
+        title: "Первый",
+        content: "Содержимое"
+      }, {
+        id: "second",
+        title: "Второй",
+        content: "Другая панель"
+      }, {
+        id: "third",
+        title: "Ещё одна",
+        content: "Другая панель"
+      }, {
+        id: "quat",
+        title: "Четвертая",
+        content: "Другая панель"
+      }]} />
+            </ComponentCard>
+
+            <ComponentCard title="TabsBox">
+                <TabsBox defaultValue="first" orientation="vertical" bordered 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">Содержимое панели 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>;
+}`,...V.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{}`,...X.parameters?.docs?.source}}},Z=[`InteractiveComponents`,`All`]})))()}Q();export{X as All,V as InteractiveComponents,Z as __namedExportsOrder,Y as default};

package/storybook-static/assets/{LayoutPicker-Dc55ovYM.js → LayoutPicker-BahcFBzK.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-BiaKjftm.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-DXcn-WXQ.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-BHhbrImE.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-D8l_hmHU.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-ByamaGlv.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-CZRoovVS.css

@@ -0,0 +1 @@
+.buT8ds{gap:var(--space-md);width:min(100%,48em);display:grid}.vDpJVR{align-items:end;gap:var(--space-sm);flex-wrap:wrap;display:flex}.-GMI1h{gap:var(--space-sm);padding:var(--space-sm);border:var(--border);border-radius:var(--radius-sm);background-color:var(--surface-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr));display:grid}.Xgkzn9{gap:calc(var(--space-xs) / 2);min-width:0;display:grid}.X--lo-{color:var(--content-1);font-variation-settings:"wght" 300;text-overflow:ellipsis;white-space:nowrap;font-weight:300;overflow:hidden}.W5rEjx{color:var(--content-2);font-size:var(--font-size-sm)}.BgilL7{gap:var(--space-sm);display:grid}.ALGrVl{gap:var(--space-xs);min-height:6em;padding:var(--space-sm);border:var(--border);border-radius:var(--radius-sm);background-color:var(--surface-1);align-content:start;display:grid}.IrqK1d{color:var(--content-0);font-variation-settings:"wght" 600;font-weight:600}