@ryuzaki13/react-foundation-ui 3.10.0 → 3.11.0

package/storybook-static/assets/Flex.stories-CrHxjVCH.js

@@ -0,0 +1,454 @@
+import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-BmGorvhi.js";import{i,r as a}from"./getFlexClasses-DOf6NlyJ.js";import{n as o,t as s}from"./FlexContainer-DGc37vCr.js";import{n as c,t as l}from"./FlexItem-DYv72TvP.js";import{n as u,t as d}from"./ResponsiveLayoutPreview-BWBLsr8u.js";function f({ref:e,variant:t,children:n,className:r=``,...i}){let o=[a(t??``),r].filter(Boolean).join(` `);return(0,p.jsx)(s,{ref:e,className:o,...i,children:n})}var p;function m(){return(m=e((()=>{o(),i(),p=r(),f.displayName=`PredefinedFlex`,f.__docgenInfo={description:``,methods:[],displayName:`PredefinedFlex`,props:{variant:{required:!1,tsType:{name:`union`,raw:`"center" | "centerBetween" | "columnCenter"`,elements:[{name:`literal`,value:`"center"`},{name:`literal`,value:`"centerBetween"`},{name:`literal`,value:`"columnCenter"`}]},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``},className:{defaultValue:{value:`""`,computed:!1},required:!1}},composes:[`Omit`]}})))()}var h;function g(){return(g=e((()=>{o(),c(),m(),h={Container:s,Item:l,Predefined:f}})))()}var _=t({AlignItems:()=>O,BasicColumn:()=>T,BasicRow:()=>w,Directions:()=>E,FlexItems:()=>j,Gaps:()=>A,InlineFlex:()=>N,JustifyContent:()=>D,Predefined:()=>M,RealWorld:()=>P,ResponsiveContainer:()=>F,ResponsiveItems:()=>L,ResponsiveWrapping:()=>I,Wrapping:()=>k,__namedExportsOrder:()=>R,default:()=>C});function v({children:e,index:t=0}){return(0,y.jsx)(h.Item,{style:{...x.item,backgroundColor:S(t)},children:e})}var y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R;function z(){return(z=e((()=>{n(),u(),g(),y=r(),{useArgs:b}=__STORYBOOK_MODULE_PREVIEW_API__,x={container:{border:`2px dashed var(--border-0)`,padding:`2em`,marginBlock:`1em`},item:{padding:`16px`,textAlign:`center`,fontWeight:`bold`,color:`white`,minHeight:`5em`,minWidth:`10em`,display:`flex`,alignItems:`center`,justifyContent:`center`},itemColors:[`#ff6b6b`,`#4ecdc4`,`#45b7d1`,`#96ceb4`,`#feca57`,`#ff9ff3`]},S=e=>x.itemColors[e%x.itemColors.length],C={title:`Layout/Flex`,component:h.Container,args:{row:!0,gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=b();return(0,y.jsx)(e,{args:t})}],argTypes:{inline:{description:`Использует inline-flex вместо flex.`,control:`boolean`},row:{description:`Направляет элементы по строке.`,control:`boolean`},column:{description:`Направляет элементы по колонке.`,control:`boolean`},rowReverse:{description:`Разворачивает порядок строки.`,control:`boolean`},columnReverse:{description:`Разворачивает порядок колонки.`,control:`boolean`},wrap:{description:`Разрешает перенос элементов.`,control:`boolean`},nowrap:{description:`Запрещает перенос элементов.`,control:`boolean`},wrapReverse:{description:`Разворачивает направление строк при переносе.`,control:`boolean`},align:{description:`Выравнивание по поперечной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`baseline`]},justify:{description:`Выравнивание по главной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},alignContent:{description:`Распределение строк по поперечной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},gap:{description:`Общий интервал между элементами.`,control:`select`,options:[`none`,`xs`,`sm`,`md`,`lg`,`xl`]},gapRow:{description:`Интервал между строками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},gapColumn:{description:`Интервал между колонками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},as:{description:`Семантический HTML-тег контейнера.`,control:`select`,options:[`div`,`section`,`main`,`nav`,`ul`]},children:{description:`Содержимое flex-контейнера.`,control:!1}}},w={render:e=>(0,y.jsx)(h.Container,{...e,style:x.container}),args:{children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(v,{index:0,children:`Item 1`}),(0,y.jsx)(v,{index:1,children:`Item 2`}),(0,y.jsx)(v,{index:2,children:`Item 3`})]}),row:!0}},T={render:e=>(0,y.jsx)(h.Container,{...e,style:x.container}),args:{children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(v,{index:0,children:`Header`}),(0,y.jsx)(v,{index:1,children:`Content`}),(0,y.jsx)(v,{index:2,children:`Footer`})]}),column:!0}},E={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`h3`,{children:`Row (default)`}),(0,y.jsxs)(h.Container,{row:!0,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`1`}),(0,y.jsx)(v,{index:1,children:`2`}),(0,y.jsx)(v,{index:2,children:`3`})]}),(0,y.jsx)(`h3`,{children:`Row Reverse`}),(0,y.jsxs)(h.Container,{rowReverse:!0,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`1`}),(0,y.jsx)(v,{index:1,children:`2`}),(0,y.jsx)(v,{index:2,children:`3`})]}),(0,y.jsx)(`h3`,{children:`Column`}),(0,y.jsxs)(h.Container,{column:!0,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`1`}),(0,y.jsx)(v,{index:1,children:`2`}),(0,y.jsx)(v,{index:2,children:`3`})]}),(0,y.jsx)(`h3`,{children:`Column Reverse`}),(0,y.jsxs)(h.Container,{columnReverse:!0,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`1`}),(0,y.jsx)(v,{index:1,children:`2`}),(0,y.jsx)(v,{index:2,children:`3`})]})]}),args:{children:void 0}},D={render:()=>(0,y.jsx)(`div`,{children:[`start`,`center`,`end`,`between`,`around`,`evenly`].map(e=>(0,y.jsxs)(`div`,{children:[(0,y.jsxs)(`h3`,{children:[`Justify: `,e]}),(0,y.jsxs)(h.Container,{row:!0,justify:e,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`Item 1`}),(0,y.jsx)(v,{index:1,children:`Item 2`}),(0,y.jsx)(v,{index:2,children:`Item 3`})]})]},e))}),args:{children:void 0}},O={render:()=>(0,y.jsx)(`div`,{children:[`start`,`center`,`end`,`stretch`,`baseline`].map(e=>(0,y.jsxs)(`div`,{children:[(0,y.jsxs)(`h3`,{children:[`Align: `,e]}),(0,y.jsxs)(h.Container,{row:!0,align:e,style:{...x.container,height:`120px`},children:[(0,y.jsx)(v,{index:0,children:(0,y.jsx)(`div`,{children:`Short`})}),(0,y.jsx)(v,{index:1,children:(0,y.jsx)(`div`,{style:{padding:`40px`},children:`Tall`})}),(0,y.jsx)(v,{index:2,children:(0,y.jsx)(`div`,{style:{padding:`24px`},children:`Medium`})})]})]},e))}),args:{children:void 0}},k={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`h3`,{children:`No Wrap (default)`}),(0,y.jsx)(h.Container,{row:!0,nowrap:!0,style:x.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,y.jsxs)(v,{index:e,children:[`Item `,e]},e))}),(0,y.jsx)(`h3`,{children:`Wrap`}),(0,y.jsx)(h.Container,{row:!0,wrap:!0,style:x.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,y.jsxs)(v,{index:e,children:[`Item `,e]},e))}),(0,y.jsx)(`h3`,{children:`Wrap Reverse`}),(0,y.jsx)(h.Container,{row:!0,wrapReverse:!0,style:x.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,y.jsxs)(v,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},A={render:()=>(0,y.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,y.jsxs)(`div`,{children:[(0,y.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,y.jsx)(h.Container,{row:!0,wrap:!0,gap:e,style:x.container,children:[1,2,3,4,5,6].map(e=>(0,y.jsxs)(v,{index:e,children:[`Item `,e]},e))})]},e)),(0,y.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,y.jsx)(h.Container,{row:!0,wrap:!0,gapRow:`lg`,gapColumn:`sm`,style:x.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,y.jsxs)(v,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},j={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`h3`,{children:`Grow Properties`}),(0,y.jsxs)(h.Container,{row:!0,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`Default`}),(0,y.jsx)(h.Item,{grow:!0,children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(1)},children:`Grow`})}),(0,y.jsx)(v,{index:2,children:`Default`})]}),(0,y.jsx)(`h3`,{children:`Shrink Properties`}),(0,y.jsxs)(h.Container,{row:!0,style:{...x.container,width:`300px`},children:[(0,y.jsx)(h.Item,{shrink:!1,children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(0),width:`150px`},children:`No Shrink`})}),(0,y.jsx)(h.Item,{children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(1),width:`150px`},children:`Shrink (default)`})})]}),(0,y.jsx)(`h3`,{children:`Composite Classes`}),(0,y.jsxs)(h.Container,{row:!0,style:x.container,children:[(0,y.jsx)(h.Item,{flex0:!0,children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(0)},children:`flex0`})}),(0,y.jsx)(h.Item,{flex1:!0,children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(1)},children:`flex1`})}),(0,y.jsx)(h.Item,{flex0:!0,children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(2)},children:`flex0`})})]})]}),args:{children:void 0}},M={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`h3`,{children:`Center`}),(0,y.jsx)(h.Predefined,{variant:`center`,style:{...x.container,height:`100px`},children:(0,y.jsx)(v,{index:0,children:`Centered Content`})}),(0,y.jsx)(`h3`,{children:`Center Between`}),(0,y.jsxs)(h.Predefined,{variant:`centerBetween`,style:x.container,children:[(0,y.jsx)(v,{index:0,children:`Left`}),(0,y.jsx)(v,{index:1,children:`Right`})]})]}),args:{children:void 0}},N={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsxs)(`p`,{children:[`This is text with`,(0,y.jsxs)(h.Container,{inline:!0,align:`center`,gap:`sm`,style:{margin:`0 8px`},children:[(0,y.jsx)(v,{index:0,children:`inline`}),(0,y.jsx)(v,{index:1,children:`flex`})]}),`elements inside.`]}),(0,y.jsxs)(`p`,{children:[`Another example with`,(0,y.jsxs)(h.Container,{inline:!0,column:!0,gap:`xs`,style:{margin:`0 8px`},children:[(0,y.jsx)(v,{index:2,children:`vertical`}),(0,y.jsx)(v,{index:3,children:`inline`})]}),`flex.`]})]}),args:{children:void 0}},P={render:()=>(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`h3`,{children:`Navigation Bar`}),(0,y.jsxs)(h.Predefined,{variant:`centerBetween`,style:x.container,children:[(0,y.jsxs)(h.Container,{row:!0,align:`center`,gap:`md`,children:[(0,y.jsx)(v,{index:0,children:`Logo`}),(0,y.jsx)(v,{index:1,children:`Home`}),(0,y.jsx)(v,{index:2,children:`About`}),(0,y.jsx)(v,{index:3,children:`Contact`})]}),(0,y.jsx)(v,{index:4,children:`Login`})]}),(0,y.jsx)(`h3`,{children:`Card Layout`}),(0,y.jsx)(h.Container,{row:!0,wrap:!0,gap:`lg`,style:x.container,children:[1,2,3,4].map(e=>(0,y.jsx)(h.Item,{flex1:!0,style:{minWidth:`200px`},children:(0,y.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,textAlign:`center`,backgroundColor:S(e)},children:[(0,y.jsxs)(`h4`,{children:[`Card `,e]}),(0,y.jsx)(`p`,{children:`Card content goes here`})]})},e))}),(0,y.jsx)(`h3`,{children:`Form Layout`}),(0,y.jsxs)(h.Container,{column:!0,gap:`md`,style:x.container,children:[(0,y.jsxs)(h.Container,{row:!0,gap:`md`,children:[(0,y.jsx)(h.Item,{flex1:!0,children:(0,y.jsx)(v,{index:0,children:`First Name`})}),(0,y.jsx)(h.Item,{flex1:!0,children:(0,y.jsx)(v,{index:1,children:`Last Name`})})]}),(0,y.jsx)(v,{index:2,children:`Email`}),(0,y.jsx)(v,{index:3,children:`Message`})]})]}),args:{children:void 0}},F={name:`Responsive: контейнер`,render:()=>(0,y.jsx)(d,{title:`Направление, выравнивание и общий gap`,description:`Изменяйте ширину canvas: DOM остаётся тем же, а режим выбирают media mixins до hydration.`,legend:[`laptop — строка, элементы у нижнего края, распределение between, gap xl`,`tablet — строка, центрирование, gap md`,`mobile — колонка, растяжение по ширине, gap sm`],children:(0,y.jsxs)(h.Container,{row:{mobile:!1,tablet:!0},column:{mobile:!0,tablet:!1},align:{mobile:`stretch`,tablet:`center`,laptop:`end`},justify:{mobile:`start`,tablet:`center`,laptop:`between`},gap:{mobile:`sm`,tablet:`md`,laptop:`xl`},style:{...x.container,minHeight:`14em`},children:[(0,y.jsx)(v,{index:0,children:`Первый`}),(0,y.jsx)(v,{index:1,children:`Второй`}),(0,y.jsx)(v,{index:2,children:`Третий`})]})}),args:{children:void 0},parameters:{docs:{description:{story:"Проверяет исходный сценарий `column={{ mobile: true, tablet: false }}` вместе с responsive row, align, justify и gap."}}}},I={name:`Responsive: перенос и интервалы`,render:()=>(0,y.jsx)(d,{title:`Wrap, alignContent, row-gap и column-gap`,description:`Высота контейнера зафиксирована только для наглядности распределения нескольких строк.`,legend:[`laptop — nowrap, интервалы xl/sm`,`tablet — wrap, строки распределены between, интервалы lg/md`,`mobile — wrap-reverse, строки центрированы, интервалы sm/xs`],children:(0,y.jsx)(h.Container,{row:!0,nowrap:{mobile:!1,tablet:!1,laptop:!0},wrap:{mobile:!1,tablet:!0,laptop:!1},wrapReverse:{mobile:!0,tablet:!1},alignContent:{mobile:`center`,tablet:`between`,laptop:`stretch`},gapRow:{mobile:`sm`,tablet:`lg`,laptop:`xl`},gapColumn:{mobile:`xs`,tablet:`md`,laptop:`sm`},style:{...x.container,height:`26em`,overflow:`auto`},children:[1,2,3,4,5,6].map(e=>(0,y.jsxs)(v,{index:e,children:[`Элемент `,e]},e))})}),args:{children:void 0}},L={name:`Responsive: элементы`,render:()=>(0,y.jsx)(d,{title:`Flex.Item: flex, grow, shrink, basis и alignSelf`,description:`Пример позволяет отдельно увидеть переходы поведения дочерних элементов без JavaScript-наблюдателя.`,legend:[`laptop — центральный элемент flex1, крайние выровнены по start/end`,`tablet — элементы используют grow и basis 0`,`mobile — фиксированное поведение flex0 и растяжение по ширине`],children:(0,y.jsxs)(h.Container,{row:{mobile:!1,tablet:!0},column:{mobile:!0,tablet:!1},align:`stretch`,gap:`md`,style:{...x.container,minHeight:`16em`},children:[(0,y.jsx)(h.Item,{flex0:{mobile:!0,tablet:!1},grow:{mobile:!1,tablet:!0,laptop:!1},basis:{mobile:`auto`,tablet:`0`,laptop:`auto`},alignSelf:{mobile:`stretch`,tablet:`center`,laptop:`start`},children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(0)},children:`Первый`})}),(0,y.jsx)(h.Item,{flex1:{mobile:!1,tablet:!1,laptop:!0},grow:{mobile:!1,tablet:!0,laptop:!1},shrink:{mobile:!1,tablet:!0},basis:{mobile:`auto`,tablet:`0`,laptop:`auto`},alignSelf:{mobile:`stretch`,tablet:`stretch`,laptop:`center`},children:(0,y.jsx)(`div`,{style:{...x.item,minWidth:0,backgroundColor:S(1)},children:`Изменяемый`})}),(0,y.jsx)(h.Item,{alignSelf:{mobile:`stretch`,tablet:`center`,laptop:`end`},children:(0,y.jsx)(`div`,{style:{...x.item,backgroundColor:S(2)},children:`Третий`})})]})}),args:{children:void 0}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  render: args => <Flex.Container {...args} style={demoStyles.container} />,
+  args: {
+    children: <>
+                <DemoItem index={0}>Item 1</DemoItem>
+                <DemoItem index={1}>Item 2</DemoItem>
+                <DemoItem index={2}>Item 3</DemoItem>
+            </>,
+    row: true
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  render: args => <Flex.Container {...args} style={demoStyles.container} />,
+  args: {
+    children: <>
+                <DemoItem index={0}>Header</DemoItem>
+                <DemoItem index={1}>Content</DemoItem>
+                <DemoItem index={2}>Footer</DemoItem>
+            </>,
+    column: true
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Row (default)</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Row Reverse</h3>
+            <Flex.Container rowReverse style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Column</h3>
+            <Flex.Container column style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Column Reverse</h3>
+            <Flex.Container columnReverse style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["start", "center", "end", "between", "around", "evenly"] as const).map(justify => <div key={justify}>
+                    <h3>Justify: {justify}</h3>
+                    <Flex.Container row justify={justify} style={demoStyles.container}>
+                        <DemoItem index={0}>Item 1</DemoItem>
+                        <DemoItem index={1}>Item 2</DemoItem>
+                        <DemoItem index={2}>Item 3</DemoItem>
+                    </Flex.Container>
+                </div>)}
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["start", "center", "end", "stretch", "baseline"] as const).map(align => <div key={align}>
+                    <h3>Align: {align}</h3>
+                    <Flex.Container row align={align} style={{
+        ...demoStyles.container,
+        height: "120px"
+      }}>
+                        <DemoItem index={0}>
+                            <div>Short</div>
+                        </DemoItem>
+                        <DemoItem index={1}>
+                            <div style={{
+            padding: "40px"
+          }}>Tall</div>
+                        </DemoItem>
+                        <DemoItem index={2}>
+                            <div style={{
+            padding: "24px"
+          }}>Medium</div>
+                        </DemoItem>
+                    </Flex.Container>
+                </div>)}
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>No Wrap (default)</h3>
+            <Flex.Container row nowrap style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+
+            <h3>Wrap</h3>
+            <Flex.Container row wrap style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+
+            <h3>Wrap Reverse</h3>
+            <Flex.Container row wrapReverse style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
+                    <h3>Gap: {gap}</h3>
+                    <Flex.Container row wrap gap={gap} style={demoStyles.container}>
+                        {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                                Item {i}
+                            </DemoItem>)}
+                    </Flex.Container>
+                </div>)}
+
+            <h3>Different Row and Column Gaps</h3>
+            <Flex.Container row wrap gapRow="lg" gapColumn="sm" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Grow Properties</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <DemoItem index={0}>Default</DemoItem>
+                <Flex.Item grow>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1)
+        }}>Grow</div>
+                </Flex.Item>
+                <DemoItem index={2}>Default</DemoItem>
+            </Flex.Container>
+
+            <h3>Shrink Properties</h3>
+            <Flex.Container row style={{
+      ...demoStyles.container,
+      width: "300px"
+    }}>
+                <Flex.Item shrink={false}>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(0),
+          width: "150px"
+        }}>
+                        No Shrink
+                    </div>
+                </Flex.Item>
+                <Flex.Item>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1),
+          width: "150px"
+        }}>
+                        Shrink (default)
+                    </div>
+                </Flex.Item>
+            </Flex.Container>
+
+            <h3>Composite Classes</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <Flex.Item flex0>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(0)
+        }}>flex0</div>
+                </Flex.Item>
+                <Flex.Item flex1>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1)
+        }}>flex1</div>
+                </Flex.Item>
+                <Flex.Item flex0>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(2)
+        }}>flex0</div>
+                </Flex.Item>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Center</h3>
+            <Flex.Predefined variant="center" style={{
+      ...demoStyles.container,
+      height: "100px"
+    }}>
+                <DemoItem index={0}>Centered Content</DemoItem>
+            </Flex.Predefined>
+
+            <h3>Center Between</h3>
+            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
+                <DemoItem index={0}>Left</DemoItem>
+                <DemoItem index={1}>Right</DemoItem>
+            </Flex.Predefined>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <p>
+                This is text with
+                <Flex.Container inline align="center" gap="sm" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={0}>inline</DemoItem>
+                    <DemoItem index={1}>flex</DemoItem>
+                </Flex.Container>
+                elements inside.
+            </p>
+
+            <p>
+                Another example with
+                <Flex.Container inline column gap="xs" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={2}>vertical</DemoItem>
+                    <DemoItem index={3}>inline</DemoItem>
+                </Flex.Container>
+                flex.
+            </p>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...N.parameters?.docs?.source}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Navigation Bar</h3>
+            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
+                <Flex.Container row align="center" gap="md">
+                    <DemoItem index={0}>Logo</DemoItem>
+                    <DemoItem index={1}>Home</DemoItem>
+                    <DemoItem index={2}>About</DemoItem>
+                    <DemoItem index={3}>Contact</DemoItem>
+                </Flex.Container>
+                <DemoItem index={4}>Login</DemoItem>
+            </Flex.Predefined>
+
+            <h3>Card Layout</h3>
+            <Flex.Container row wrap gap="lg" style={demoStyles.container}>
+                {[1, 2, 3, 4].map(i => <Flex.Item key={i} flex1 style={{
+        minWidth: "200px"
+      }}>
+                        <div style={{
+          border: "1px solid #ddd",
+          borderRadius: "8px",
+          padding: "16px",
+          textAlign: "center",
+          backgroundColor: getItemColor(i)
+        }}>
+                            <h4>Card {i}</h4>
+                            <p>Card content goes here</p>
+                        </div>
+                    </Flex.Item>)}
+            </Flex.Container>
+
+            <h3>Form Layout</h3>
+            <Flex.Container column gap="md" style={demoStyles.container}>
+                <Flex.Container row gap="md">
+                    <Flex.Item flex1>
+                        <DemoItem index={0}>First Name</DemoItem>
+                    </Flex.Item>
+                    <Flex.Item flex1>
+                        <DemoItem index={1}>Last Name</DemoItem>
+                    </Flex.Item>
+                </Flex.Container>
+                <DemoItem index={2}>Email</DemoItem>
+                <DemoItem index={3}>Message</DemoItem>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...P.parameters?.docs?.source}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: контейнер",
+  render: () => <ResponsiveLayoutPreview title="Направление, выравнивание и общий gap" description="Изменяйте ширину canvas: DOM остаётся тем же, а режим выбирают media mixins до hydration." legend={["laptop — строка, элементы у нижнего края, распределение between, gap xl", "tablet — строка, центрирование, gap md", "mobile — колонка, растяжение по ширине, gap sm"]}>
+            <Flex.Container row={{
+      mobile: false,
+      tablet: true
+    }} column={{
+      mobile: true,
+      tablet: false
+    }} align={{
+      mobile: "stretch",
+      tablet: "center",
+      laptop: "end"
+    }} justify={{
+      mobile: "start",
+      tablet: "center",
+      laptop: "between"
+    }} gap={{
+      mobile: "sm",
+      tablet: "md",
+      laptop: "xl"
+    }} style={{
+      ...demoStyles.container,
+      minHeight: "14em"
+    }}>
+                <DemoItem index={0}>Первый</DemoItem>
+                <DemoItem index={1}>Второй</DemoItem>
+                <DemoItem index={2}>Третий</DemoItem>
+            </Flex.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Проверяет исходный сценарий \`column={{ mobile: true, tablet: false }}\` вместе с responsive row, align, justify и gap."
+      }
+    }
+  }
+}`,...F.parameters?.docs?.source}}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: перенос и интервалы",
+  render: () => <ResponsiveLayoutPreview title="Wrap, alignContent, row-gap и column-gap" description="Высота контейнера зафиксирована только для наглядности распределения нескольких строк." legend={["laptop — nowrap, интервалы xl/sm", "tablet — wrap, строки распределены between, интервалы lg/md", "mobile — wrap-reverse, строки центрированы, интервалы sm/xs"]}>
+            <Flex.Container row nowrap={{
+      mobile: false,
+      tablet: false,
+      laptop: true
+    }} wrap={{
+      mobile: false,
+      tablet: true,
+      laptop: false
+    }} wrapReverse={{
+      mobile: true,
+      tablet: false
+    }} alignContent={{
+      mobile: "center",
+      tablet: "between",
+      laptop: "stretch"
+    }} gapRow={{
+      mobile: "sm",
+      tablet: "lg",
+      laptop: "xl"
+    }} gapColumn={{
+      mobile: "xs",
+      tablet: "md",
+      laptop: "sm"
+    }} style={{
+      ...demoStyles.container,
+      height: "26em",
+      overflow: "auto"
+    }}>
+                {[1, 2, 3, 4, 5, 6].map(item => <DemoItem key={item} index={item}>
+                        Элемент {item}
+                    </DemoItem>)}
+            </Flex.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  }
+}`,...I.parameters?.docs?.source}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: элементы",
+  render: () => <ResponsiveLayoutPreview title="Flex.Item: flex, grow, shrink, basis и alignSelf" description="Пример позволяет отдельно увидеть переходы поведения дочерних элементов без JavaScript-наблюдателя." legend={["laptop — центральный элемент flex1, крайние выровнены по start/end", "tablet — элементы используют grow и basis 0", "mobile — фиксированное поведение flex0 и растяжение по ширине"]}>
+            <Flex.Container row={{
+      mobile: false,
+      tablet: true
+    }} column={{
+      mobile: true,
+      tablet: false
+    }} align="stretch" gap="md" style={{
+      ...demoStyles.container,
+      minHeight: "16em"
+    }}>
+                <Flex.Item flex0={{
+        mobile: true,
+        tablet: false
+      }} grow={{
+        mobile: false,
+        tablet: true,
+        laptop: false
+      }} basis={{
+        mobile: "auto",
+        tablet: "0",
+        laptop: "auto"
+      }} alignSelf={{
+        mobile: "stretch",
+        tablet: "center",
+        laptop: "start"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(0)
+        }}>Первый</div>
+                </Flex.Item>
+                <Flex.Item flex1={{
+        mobile: false,
+        tablet: false,
+        laptop: true
+      }} grow={{
+        mobile: false,
+        tablet: true,
+        laptop: false
+      }} shrink={{
+        mobile: false,
+        tablet: true
+      }} basis={{
+        mobile: "auto",
+        tablet: "0",
+        laptop: "auto"
+      }} alignSelf={{
+        mobile: "stretch",
+        tablet: "stretch",
+        laptop: "center"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          minWidth: 0,
+          backgroundColor: getItemColor(1)
+        }}>Изменяемый</div>
+                </Flex.Item>
+                <Flex.Item alignSelf={{
+        mobile: "stretch",
+        tablet: "center",
+        laptop: "end"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(2)
+        }}>Третий</div>
+                </Flex.Item>
+            </Flex.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  }
+}`,...L.parameters?.docs?.source}}},R=[`BasicRow`,`BasicColumn`,`Directions`,`JustifyContent`,`AlignItems`,`Wrapping`,`Gaps`,`FlexItems`,`Predefined`,`InlineFlex`,`RealWorld`,`ResponsiveContainer`,`ResponsiveWrapping`,`ResponsiveItems`]})))()}export{j as a,N as c,P as d,F as f,z as g,k as h,E as i,D as l,I as m,T as n,_ as o,L as p,w as r,A as s,O as t,M as u};

package/storybook-static/assets/FlexContainer-DGc37vCr.js

@@ -0,0 +1 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BmGorvhi.js";import{n,t as r}from"./PolymorphicComponent-NBvIz9JD.js";import{i,t as a}from"./getFlexClasses-DOf6NlyJ.js";function o({ref:e,children:t,className:n=``,as:i,style:o,inline:c,row:l,column:u,rowReverse:d,columnReverse:f,wrap:p,nowrap:m,wrapReverse:h,align:g,justify:_,alignContent:v,gap:y,gapRow:b,gapColumn:x,...S}){let C=[a({inline:c,row:l,column:u,rowReverse:d,columnReverse:f,wrap:p,nowrap:m,wrapReverse:h,align:g,justify:_,alignContent:v,gap:y,gapRow:b,gapColumn:x}),n].filter(Boolean).join(` `);return(0,s.jsx)(r,{as:i,...S,ref:e,className:C,style:o,children:t})}var s;function c(){return(c=e((()=>{n(),i(),s=t(),o.displayName=`FlexContainer`,o.__docgenInfo={description:``,methods:[],displayName:`FlexContainer`,props:{inline:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:"Тип display `flex | inline-flex`"},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Направление flex-контейнера`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},rowReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},columnReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},wrap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Перенос элементов`},nowrap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},wrapReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},align:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<FlexAlign>`},description:`Выравнивание по поперечной оси`},justify:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<FlexJustify>`},description:`Выравнивание по главной оси`},alignContent:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<FlexJustify>`},description:`Выравнивание контента`},gap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<FlexGap>`},description:`Gap`},gapRow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},{name:`literal`,value:`"none"`}],raw:`Exclude<FlexGap, "none">`}],raw:`ResponsiveValue<Exclude<FlexGap, "none">>`},description:`Row gap`},gapColumn:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},{name:`literal`,value:`"none"`}],raw:`Exclude<FlexGap, "none">`}],raw:`ResponsiveValue<Exclude<FlexGap, "none">>`},description:`Column gap`},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы`},className:{required:!1,tsType:{name:`string`},description:`CSS класс`,defaultValue:{value:`""`,computed:!1}},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML тег`},style:{required:!1,tsType:{name:`CSSProperties`},description:`Inline styles`},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``}},composes:[`HTMLAttributes`]}})))()}export{c as n,o as t};

package/storybook-static/assets/{FlexItem-BE_4juAd.js → FlexItem-DYv72TvP.js}

@@ -1,3 +1,3 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-CU98mtpe.js";import{n as r,r as i,t as a}from"./media-D9cE2tzi.js";import{n as o,t as s}from"./PolymorphicComponent-NBvIz9JD.js";import{r as c,t as l}from"./useFlexClasses-SgVG37Bb.js";function u({ref:e,children:t,className:n=``,as:i,style:o,flex0:l,flex1:u,grow:m,shrink:h,basis:g,alignSelf:_,justifySelf:v,...y}){let{activeBreakpoint:b}=a(),x=(0,d.useMemo)(()=>r({flex0:l,flex1:u,grow:m,shrink:h,basis:g,alignSelf:_,justifySelf:v},b,p),[b,_,g,l,u,m,v,h]),S=[c(x),n].filter(Boolean).join(` `);return(0,f.jsx)(s,{as:i,...y,ref:e,className:S,style:o,children:t})}var d,f,p;function m(){return(m=e((()=>{d=t(),i(),o(),l(),f=n(),p=[`flex0`,`flex1`,`grow`,`shrink`,`basis`,`alignSelf`,`justifySelf`],u.displayName=`FlexItem`,u.__docgenInfo={description:``,methods:[],displayName:`FlexItem`,props:{grow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Способность расти
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BmGorvhi.js";import{n,t as r}from"./PolymorphicComponent-NBvIz9JD.js";import{i,n as a}from"./getFlexClasses-DOf6NlyJ.js";function o({ref:e,children:t,className:n=``,as:i,style:o,flex0:c,flex1:l,grow:u,shrink:d,basis:f,alignSelf:p,justifySelf:m,...h}){let g=[a({flex0:c,flex1:l,grow:u,shrink:d,basis:f,alignSelf:p,justifySelf:m}),n].filter(Boolean).join(` `);return(0,s.jsx)(r,{as:i,...h,ref:e,className:g,style:o,children:t})}var s;function c(){return(c=e((()=>{n(),i(),s=t(),o.displayName=`FlexItem`,o.__docgenInfo={description:``,methods:[],displayName:`FlexItem`,props:{grow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Способность расти
 @default false = 0`},shrink:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Способность сжиматься
-@default true = 1`},flex0:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex0`},flex1:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex1`},basis:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"0" | "auto"`,elements:[{name:`literal`,value:`"0"`},{name:`literal`,value:`"auto"`}]}],raw:`ResponsiveValue<FlexBasis>`},description:`Базовый размер`},alignSelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<FlexAlign>`},description:`Выравнивание отдельного элемента`},justifySelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]},{name:`union`,raw:`"between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`Exclude<FlexJustify, "between" | "around" | "evenly">`}],raw:`ResponsiveValue<Exclude<FlexJustify, "between" | "around" | "evenly">>`},description:`Justify-self для grid-like выравнивания`},children:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы`},className:{required:!1,tsType:{name:`string`},description:`CSS класс`,defaultValue:{value:`""`,computed:!1}},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML тег`},style:{required:!1,tsType:{name:`CSSProperties`},description:`Inline styles`},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``}},composes:[`HTMLAttributes`]}})))()}export{m as n,u as t};
+@default true = 1`},flex0:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex0`},flex1:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex1`},basis:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"0" | "auto"`,elements:[{name:`literal`,value:`"0"`},{name:`literal`,value:`"auto"`}]}],raw:`ResponsiveValue<FlexBasis>`},description:`Базовый размер`},alignSelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<FlexAlign>`},description:`Выравнивание отдельного элемента`},justifySelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]},{name:`union`,raw:`"between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`Exclude<FlexJustify, "between" | "around" | "evenly">`}],raw:`ResponsiveValue<Exclude<FlexJustify, "between" | "around" | "evenly">>`},description:`Justify-self для grid-like выравнивания`},children:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы`},className:{required:!1,tsType:{name:`string`},description:`CSS класс`,defaultValue:{value:`""`,computed:!1}},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML тег`},style:{required:!1,tsType:{name:`CSSProperties`},description:`Inline styles`},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``}},composes:[`HTMLAttributes`]}})))()}export{c as n,o as t};

package/storybook-static/assets/{FloatingPopover-DHxMCBdS.js → FloatingPopover-Bd3b1U8c.js}

@@ -1 +1 @@
-import{a as e,n as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-CU98mtpe.js";import{t as i}from"./react-dom-BzEl8usk.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{_ as s,a as c,c as l,f as u,h as d,i as f,l as p,m,o as h,r as g,s as _,u as v}from"./floating-ui.react-BTEwHffF.js";function y(e,t){if(!t?.arrow)return{};let{x:n,y:r}=t.arrow,i=e.split(`-`)[0],a={top:`bottom`,right:`left`,bottom:`top`,left:`right`}[i],o={top:`rotate(180deg)`,right:`rotate(-90deg)`,bottom:`rotate(0deg)`,left:`rotate(90deg)`}[i];return{pointerEvents:`none`,position:`absolute`,zIndex:-5,width:`16px`,height:`16px`,left:n==null?``:`${n}px`,top:r==null?``:`${r}px`,transform:o,[a]:`-16px`}}function b({ref:e,placement:t,middlewareData:n}){return(0,x.jsx)(`div`,{ref:e,style:y(t,n),children:(0,x.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`var(--border-2)`,stroke:`var(--border-2)`,strokeWidth:`var(--border-width)`,style:{display:`block`},children:(0,x.jsx)(`polygon`,{points:`8,8 16,16 0,16`})})})}var x;function S(){return(S=t((()=>{x=r(),b.__docgenInfo={description:``,methods:[],displayName:`FloatingArrow`,props:{placement:{required:!0,tsType:{name:`Placement`},description:``},middlewareData:{required:!0,tsType:{name:`MiddlewareData`},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLDivElement`}],raw:`Ref<HTMLDivElement>`},description:``}}}})))()}var C,w,T,E,D,O,k,A;function j(){return(j=t((()=>{C=`sZ0x6w`,w=`_538Ejd`,T=`fqciCO`,E=`sHkUiQ`,D=`bpGNoX`,O=`tYnRg-`,k=`_8lflEh`,A={tooltipPanel:C,tooltip:w,negative:T,information:E,error:D,warning:O,success:k}})))()}function M({content:e,children:t,openOnHover:n=!0,placement:r=`bottom`,openDelay:i=200,closeDelay:o=100,maxWidth:g,state:y,tooltip:x,positionUpdateKey:S}){let[C,w]=(0,N.useState)(!1),T=(0,N.useRef)(null),{refs:E,floatingStyles:D,middlewareData:O,context:k,placement:j,update:M}=c({open:C,onOpenChange:w,placement:r,middleware:[m(8),u({fallbackAxisSideDirection:`end`,fallbackPlacements:[`top`,`right`,`bottom`]}),d({padding:8}),v({element:T,padding:8})],whileElementsMounted:s});(0,N.useLayoutEffect)(()=>{C&&M()},[C,S,M]);let I=_(k,{enabled:n,move:!1,delay:{open:i,close:o}}),L=h(k,{enabled:n}),R=f(k),z=p(k,{role:`tooltip`}),{getReferenceProps:B,getFloatingProps:V}=l([I,L,R,z]);return(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(`span`,{ref:E.setReference,...B(),style:{lineHeight:1},children:t}),C&&(0,P.createPortal)((0,F.jsxs)(`div`,{ref:E.setFloating,style:{...D,zIndex:`var(--z-tooltip)`,maxWidth:g?`${g}em`:void 0},...V(),role:`tooltip`,className:a(A.tooltipPanel,x&&A.tooltip,y&&A[y]),children:[e,(0,F.jsx)(b,{ref:T,placement:j,middlewareData:O})]}),document.body)]})}var N,P,F;function I(){return(I=t((()=>{N=e(n(),1),g(),o(),P=i(),S(),j(),F=r(),M.__docgenInfo={description:``,methods:[],displayName:`FloatingPopover`,props:{content:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},openOnHover:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"bottom"`,computed:!1}},openDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`200`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`100`,computed:!1}},maxWidth:{required:!1,tsType:{name:`number`},description:``},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},tooltip:{required:!1,tsType:{name:`literal`,value:`true`},description:``},positionUpdateKey:{required:!1,tsType:{name:`unknown`},description:"Изменяется вместе с CSS-координатой trigger, когда её изменение не отслеживается `autoUpdate`.\nПосле commit React выполняется повторный расчёт позиции открытой floating-панели."}}}})))()}export{S as i,I as n,b as r,M as t};
+import{a as e,n as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-BmGorvhi.js";import{t as i}from"./react-dom-BzEl8usk.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{_ as s,a as c,c as l,f as u,h as d,i as f,l as p,m,o as h,r as g,s as _,u as v}from"./floating-ui.react-CypKyrM4.js";function y(e,t){if(!t?.arrow)return{};let{x:n,y:r}=t.arrow,i=e.split(`-`)[0],a={top:`bottom`,right:`left`,bottom:`top`,left:`right`}[i],o={top:`rotate(180deg)`,right:`rotate(-90deg)`,bottom:`rotate(0deg)`,left:`rotate(90deg)`}[i];return{pointerEvents:`none`,position:`absolute`,zIndex:-5,width:`16px`,height:`16px`,left:n==null?``:`${n}px`,top:r==null?``:`${r}px`,transform:o,[a]:`-16px`}}function b({ref:e,placement:t,middlewareData:n}){return(0,x.jsx)(`div`,{ref:e,style:y(t,n),children:(0,x.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`var(--border-2)`,stroke:`var(--border-2)`,strokeWidth:`var(--border-width)`,style:{display:`block`},children:(0,x.jsx)(`polygon`,{points:`8,8 16,16 0,16`})})})}var x;function S(){return(S=t((()=>{x=r(),b.__docgenInfo={description:``,methods:[],displayName:`FloatingArrow`,props:{placement:{required:!0,tsType:{name:`Placement`},description:``},middlewareData:{required:!0,tsType:{name:`MiddlewareData`},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLDivElement`}],raw:`Ref<HTMLDivElement>`},description:``}}}})))()}var C,w,T,E,D,O,k,A;function j(){return(j=t((()=>{C=`sZ0x6w`,w=`_538Ejd`,T=`fqciCO`,E=`sHkUiQ`,D=`bpGNoX`,O=`tYnRg-`,k=`_8lflEh`,A={tooltipPanel:C,tooltip:w,negative:T,information:E,error:D,warning:O,success:k}})))()}function M({content:e,children:t,openOnHover:n=!0,placement:r=`bottom`,openDelay:i=200,closeDelay:o=100,maxWidth:g,state:y,tooltip:x,positionUpdateKey:S}){let[C,w]=(0,N.useState)(!1),T=(0,N.useRef)(null),{refs:E,floatingStyles:D,middlewareData:O,context:k,placement:j,update:M}=c({open:C,onOpenChange:w,placement:r,middleware:[m(8),u({fallbackAxisSideDirection:`end`,fallbackPlacements:[`top`,`right`,`bottom`]}),d({padding:8}),v({element:T,padding:8})],whileElementsMounted:s});(0,N.useLayoutEffect)(()=>{C&&M()},[C,S,M]);let I=_(k,{enabled:n,move:!1,delay:{open:i,close:o}}),L=h(k,{enabled:n}),R=f(k),z=p(k,{role:`tooltip`}),{getReferenceProps:B,getFloatingProps:V}=l([I,L,R,z]);return(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(`span`,{ref:E.setReference,...B(),style:{lineHeight:1},children:t}),C&&(0,P.createPortal)((0,F.jsxs)(`div`,{ref:E.setFloating,style:{...D,zIndex:`var(--z-tooltip)`,maxWidth:g?`${g}em`:void 0},...V(),role:`tooltip`,className:a(A.tooltipPanel,x&&A.tooltip,y&&A[y]),children:[e,(0,F.jsx)(b,{ref:T,placement:j,middlewareData:O})]}),document.body)]})}var N,P,F;function I(){return(I=t((()=>{N=e(n(),1),g(),o(),P=i(),S(),j(),F=r(),M.__docgenInfo={description:``,methods:[],displayName:`FloatingPopover`,props:{content:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},openOnHover:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"bottom"`,computed:!1}},openDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`200`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`100`,computed:!1}},maxWidth:{required:!1,tsType:{name:`number`},description:``},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},tooltip:{required:!1,tsType:{name:`literal`,value:`true`},description:``},positionUpdateKey:{required:!1,tsType:{name:`unknown`},description:"Изменяется вместе с CSS-координатой trigger, когда её изменение не отслеживается `autoUpdate`.\nПосле commit React выполняется повторный расчёт позиции открытой floating-панели."}}}})))()}export{S as i,I as n,b as r,M as t};

package/storybook-static/assets/FloatingWindows-C2FJO6ij.css

@@ -0,0 +1 @@
+.k9WITw,.QIQYat,._7-j1qT,.r0aEv3,.PZ5cL0{min-width:0}.k9WITw,.QIQYat,.PZ5cL0{min-height:0}.k9WITw,.QIQYat{overflow:hidden}.k9WITw{isolation:isolate;pointer-events:none;width:100%;height:100%;position:relative}.QIQYat{box-sizing:border-box;border:var(--border);pointer-events:auto;max-width:100%;max-height:100%;position:absolute}._7-j1qT{padding:var(--space-xs);border-bottom:var(--border);flex:none}.r0aEv3{text-align:start;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:auto}.r0aEv3[aria-pressed=true]{cursor:grabbing}.PZ5cL0{padding:var(--space-md);overscroll-behavior:contain;overflow-wrap:anywhere;flex:auto;overflow:auto}

package/storybook-static/assets/FloatingWindows.stories-Cs_i092m.js

@@ -0,0 +1,13 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-BmlmEU-a.js";import{i,n as a,r as o}from"./iframe-BmGorvhi.js";import{r as s}from"./isRecord-DXDTW-jA-DtM9YD3V.js";import{a as c,i as l}from"./utils-tg3ibbzi.js";import{a as u,i as d,n as f,r as p}from"./react-GkniIHEK.js";import{t as m}from"./validators-D82aYLRK.js";import{a as h,r as ee}from"./dom-D9_dPJ4G.js";import{n as te}from"./error-De9R4E_F.js";import{n as g,t as _}from"./FlexContainer-DGc37vCr.js";import{n as v,t as y}from"./Button-C-uRygWz.js";import{n as ne,t as re}from"./GridContainer-C5r-VTTG.js";import{l as ie,o as ae}from"./Input-YuUUu0DD.js";import{u as oe}from"./number-scale-D2KTkjVQ.js";import{n as se,t as ce}from"./Textarea-Bz9O1y1I.js";var le,ue;function de(){return(de=e((()=>{i(),le=[[`path`,{d:`M12 2v20`,key:`t6zp3m`}],[`path`,{d:`m15 19-3 3-3-3`,key:`11eu04`}],[`path`,{d:`m19 9 3 3-3 3`,key:`1mg7y2`}],[`path`,{d:`M2 12h20`,key:`9i4pu4`}],[`path`,{d:`m5 9-3 3 3 3`,key:`j64kie`}],[`path`,{d:`m9 5 3-3 3 3`,key:`l8vdw6`}]],ue=o(`move`,le)})))()}var fe,pe,me,he,ge,b;function x(){return(x=e((()=>{fe=`k9WITw`,pe=`QIQYat`,me=`_7-j1qT`,he=`r0aEv3`,ge=`PZ5cL0`,b={boundary:fe,window:pe,header:me,handle:he,content:ge}})))()}function _e(e){let t=(0,S.useRef)(null);return(0,S.useEffect)(()=>{let n=t.current;if(!n)return;let r=()=>{e.getState().setBounds({width:n.clientWidth,height:n.clientHeight})};if(r(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(r);return i.observe(n),()=>i.disconnect()},[e]),t}var S;function ve(){return(ve=e((()=>{S=t()})))()}var ye,C;function w(){return(w=e((()=>{ye=t(),C=(0,ye.createContext)(null)})))()}function be(){let e=(0,xe.useContext)(C);if(!e)throw te({hookName:`useFloatingWindowsStore`,providerName:`FloatingWindows`});return e}var xe;function T(){return(T=e((()=>{xe=t(),w()})))()}function Se({children:e,className:t,style:n}){let r=_e(be());return(0,Ce.jsx)(`div`,{ref:r,className:c(b.boundary,t),style:n,"data-floating-windows":``,children:e})}var Ce;function we(){return(we=e((()=>{l(),x(),ve(),T(),Ce=a(),Se.__docgenInfo={description:`Измеряемый containing block не перехватывает события страницы за пределами самих окон.`,methods:[],displayName:`FloatingWindowsBoundary`}})))()}function E(e,t,n){if(!Number.isFinite(e.x)||!Number.isFinite(e.y))throw RangeError(`Координаты плавающего окна должны быть конечными числами.`);for(let e of[t,n])if(e!==null&&(!Number.isFinite(e.width)||!Number.isFinite(e.height)||e.width<0||e.height<0))throw RangeError(`Размер окна и рабочей области должен состоять из конечных неотрицательных чисел.`);if(t===null||n===null||n.width===0||n.height===0)return e;let r=oe(e.x,0,Math.max(0,n.width-t.width)),i=oe(e.y,0,Math.max(0,n.height-t.height));return r===e.x&&i===e.y?e:{x:r,y:i}}function D(){return(D=e((()=>{})))()}function O(e){return typeof e==`string`&&e.trim().length>0&&e.length<=256}function Te(e,t,n=24){if(!Number.isFinite(n)||n<0)throw RangeError(`Смещение каскада должно быть конечным неотрицательным числом.`);for(let n of[e,...t])if(!Number.isFinite(n.x)||!Number.isFinite(n.y))throw RangeError(`Координаты каскада плавающих окон должны быть конечными числами.`);if(n===0)return e;let r=e;for(let e=0;e<t.length;e+=1){if(!t.some(e=>e.x===r.x&&e.y===r.y))return r;let e=r.x+n,i=r.y+n;if(!Number.isFinite(e)||!Number.isFinite(i))throw RangeError(`Координаты каскада вышли за пределы конечных чисел.`);r={x:e,y:i}}return r}function Ee({cascadeOffset:e=24}={}){if(!Number.isFinite(e)||e<0)throw RangeError(`Смещение каскада должно быть конечным неотрицательным числом.`);return d()((t,n)=>({windows:new Map,positions:new Map,order:[],bounds:null,register:(r,i={x:24,y:24})=>{if(!O(r))throw Error(`Идентификатор плавающего окна должен содержать от 1 до 256 символов и не состоять из пробелов.`);let a=n();if(a.windows.has(r))throw Error(`Плавающее окно с идентификатором «${r}» уже открыто в этой рабочей области.`);E(i,null,null);let o=a.positions.get(r),s=o??Te(i,Array.from(a.windows.values(),e=>e.position),e),c=[...a.order,r],l=new Map(a.windows);l.set(r,{position:s,size:null,layer:c.length}),t({windows:l,positions:o?a.positions:new Map(a.positions).set(r,s),order:c});let u=!0;return()=>{u&&(u=!1,t(e=>{let t=e.order.filter(e=>e!==r),n=new Map(e.windows);return n.delete(r),t.forEach((e,t)=>{let r=n.get(e);r&&r.layer!==t+1&&n.set(e,{...r,layer:t+1})}),{windows:n,order:t}}))}},setPosition:(e,n)=>{t(t=>{let r=t.windows.get(e);if(!r)return t;let i=E(n,r.size,t.bounds);return r.position.x===i.x&&r.position.y===i.y?t:{windows:new Map(t.windows).set(e,{...r,position:i}),positions:new Map(t.positions).set(e,i)}})},setSize:(e,n)=>{t(t=>{let r=t.windows.get(e);if(!r)return t;let i=E(r.position,n,t.bounds);return r.size?.width===n.width&&r.size.height===n.height&&i===r.position?t:{windows:new Map(t.windows).set(e,{...r,position:i,size:n}),positions:i===r.position?t.positions:new Map(t.positions).set(e,i)}})},setBounds:e=>{E({x:0,y:0},null,e),t(t=>{if(t.bounds?.width===e?.width&&t.bounds?.height===e?.height)return t;let n=new Map(t.windows),r=new Map(t.positions),i=!1;for(let[a,o]of t.windows){let t=E(o.position,o.size,e);t!==o.position&&(i=!0,n.set(a,{...o,position:t}),r.set(a,t))}return{bounds:e,windows:i?n:t.windows,positions:i?r:t.positions}})},bringToFront:e=>{t(t=>{if(!t.windows.has(e)||t.order.at(-1)===e)return t;let n=[...t.order.filter(t=>t!==e),e],r=new Map(t.windows);return n.forEach((e,t)=>{let n=r.get(e);n&&n.layer!==t+1&&r.set(e,{...n,layer:t+1})}),{windows:r,order:n}})},restorePositions:e=>{for(let[t,n]of e){if(!O(t))throw Error(`Идентификатор плавающего окна должен содержать от 1 до 256 символов и не состоять из пробелов.`);E(n,null,null)}t(t=>{let n=new Map;for(let[r,i]of e){let e=t.positions.get(r);n.set(r,e&&e.x===i.x&&e.y===i.y?e:i)}let r=new Map(t.windows),i=!1;for(let[e,a]of t.windows){let o=E(n.get(e)??a.position,a.size,t.bounds),s=o.x===a.position.x&&o.y===a.position.y,c=s?a.position:o;n.set(e,c),!s&&(i=!0,r.set(e,{...a,position:c}))}let a=n.size===t.positions.size&&Array.from(n).every(([e,n])=>t.positions.get(e)===n);return!i&&a?t:{windows:i?r:t.windows,positions:a?t.positions:n}})}}))}function De(){return(De=e((()=>{u(),D()})))()}function Oe(e){if(e.length>k)throw Error(`Сохранённые позиции окон превышают допустимый размер.`);let t=JSON.parse(e);if(!s(t)||t.version!==1||!Array.isArray(t.positions)||t.positions.length>Ae)throw Error(`Неизвестный формат сохранённых позиций окон.`);let n=new Map;for(let e of t.positions){if(!s(e)||!O(e.id)||n.has(e.id)||typeof e.x!=`number`||!Number.isFinite(e.x)||typeof e.y!=`number`||!Number.isFinite(e.y))throw Error(`Сохранённая позиция окна не прошла проверку.`);n.set(e.id,{x:e.x,y:e.y})}return n}function ke(e){let t=[...e].slice(-200),n=[],r=28;for(let e=t.length-1;e>=0;--e){let[i,a]=t[e];if(!O(i)||!Number.isFinite(a.x)||!Number.isFinite(a.y))throw Error(`Сохранённая позиция окна не прошла проверку.`);let o=JSON.stringify({id:i,x:a.x,y:a.y}),s=r+o.length+(n.length===0?0:1);if(s>k)break;n.push(o),r=s}return`{"version":1,"positions":[${n.reverse().join(`,`)}]}`}var Ae,k;function je(){return(je=e((()=>{m(),Ae=200,k=65536})))()}function Me(e,t,n){let r=(0,A.useEffectEvent)(e=>n?.(e));(0,A.useEffect)(()=>{if(!t)return;let n;try{n=window.localStorage;let r=n.getItem(t);r!==null&&e.getState().restorePositions(Oe(r))}catch(e){r(e);return}let i=!0,a=()=>{if(i)try{n.setItem(t,ke(e.getState().positions))}catch(e){i=!1,r(e)}};return a(),e.subscribe((e,t)=>{e.positions!==t.positions&&a()})},[e,t])}var A;function Ne(){return(Ne=e((()=>{A=t(),je()})))()}function Pe({children:e,cascadeOffset:t,storageKey:n,onStorageError:r}){let[i]=(0,Fe.useState)(()=>Ee({cascadeOffset:t}));return Me(i,n,r),(0,Ie.jsx)(C,{value:i,children:e})}var Fe,Ie;function Le(){return(Le=e((()=>{Fe=t(),De(),w(),Ne(),Ie=a(),Pe.__docgenInfo={description:`Один экземпляр области — один store. Провайдер компонует владельцев state/persistence, не реализуя их алгоритмы.`,methods:[],displayName:`FloatingWindowsProvider`}})))()}function j({children:e,className:t,style:n,storageKey:r,cascadeOffset:i,onStorageError:a}){if(r!==void 0&&!r.trim())throw Error(`Ключ сохранения области окон не может быть пустым.`);return(0,M.jsx)(Pe,{storageKey:r,cascadeOffset:i,onStorageError:a,children:(0,M.jsx)(Se,{className:t,style:n,children:e})},r)}var M;function N(){return(N=e((()=>{we(),Le(),M=a(),j.__docgenInfo={description:`Независимая немодальная область для свободно размещаемых окон; контент не анализируется и не клонируется.`,methods:[],displayName:`FloatingWindows`}})))()}function Re({title:e,titleId:t,instructionId:n,actions:i,onClose:a,move:o}){return(0,P.jsxs)(_,{row:!0,align:`center`,gap:`xs`,className:b.header,children:[(0,P.jsx)(y,{appearance:`ghost`,icon:(0,P.jsx)(ue,{size:16}),className:b.handle,"aria-label":`Переместить окно «${e}»`,"aria-describedby":n,"aria-pressed":o.moving,"data-floating-window-action":`move`,...o.handleProps,children:(0,P.jsx)(`span`,{id:t,children:e})}),i,a&&(0,P.jsx)(y,{icon:(0,P.jsx)(r,{size:16}),appearance:`ghost`,"aria-label":`Закрыть окно «${e}»`,"data-floating-window-action":`close`,onClick:a})]})}var P;function ze(){return(ze=e((()=>{de(),n(),v(),g(),x(),P=a(),Re.__docgenInfo={description:`Handle — самостоятельная кнопка: действия и закрытие не становятся вложенными interactive controls.`,methods:[],displayName:`FloatingWindowHeader`}})))()}function Be(e,t,n){let r=e.size?.width??(typeof t==`number`?t:null),i=e.size?.height??(typeof n==`number`?n:null);return{width:t,height:n,zIndex:e.layer,left:r===null?0:`clamp(0px, ${e.position.x}px, max(0px, calc(100% - ${r}px)))`,top:i===null?0:`clamp(0px, ${e.position.y}px, max(0px, calc(100% - ${i}px)))`}}function Ve(e){let t=document.activeElement;return t instanceof HTMLElement&&t!==document.body&&!e?.contains(t)?t:void 0}function He(e){let t=(0,Ue.useRef)(null);h({active:!0,trapFocus:!1,containerRef:e,initialFocus:e=>(t.current=e,e),restoreFocusTarget:()=>Ve(t.current)})}var Ue;function We(){return(We=e((()=>{Ue=t(),ee()})))()}function Ge(e,t,n){(0,Ke.useEffect)(()=>{let r=n.current;if(!r)return;let i=()=>{let n=r.offsetWidth,i=r.offsetHeight;n>0&&i>0&&e.getState().setSize(t,{width:n,height:i})};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(r),()=>a.disconnect()},[e,t,n])}var Ke;function F(){return(F=e((()=>{Ke=t()})))()}function qe({id:e,store:t,panelRef:n,onPositionChange:r}){let i=(0,I.useRef)(null),a=(0,I.useRef)(null),[o,s]=(0,I.useState)(!1),c=()=>{a.current!==null&&cancelAnimationFrame(a.current),a.current=null,n.current?.style.removeProperty(`transform`)},l=e=>{e?.pointer?.target.hasPointerCapture(e.pointer.id)&&e.pointer.target.releasePointerCapture(e.pointer.id)},u=n=>{let a=i.current;if(!a||(i.current=null,c(),l(a),s(!1),!n))return;t.getState().setPosition(e,a.position);let o=t.getState().windows.get(e)?.position;o&&(o.x!==a.origin.x||o.y!==a.origin.y)&&r?.(o)},d=r=>{let o=i.current;if(!o)return;let s=t.getState();o.position=E(r,s.windows.get(e)?.size??null,s.bounds),a.current===null&&(a.current=requestAnimationFrame(()=>{a.current=null;let e=i.current;e&&n.current&&(n.current.style.transform=`translate(${e.position.x-e.origin.x}px, ${e.position.y-e.origin.y}px)`)}))},f=n=>{if(i.current)return;let r=t.getState().windows.get(e);r&&(t.getState().bringToFront(e),i.current={origin:r.position,position:r.position,pointer:n},s(!0))},p=(0,I.useEffectEvent)(()=>u(!1)),m=(0,I.useEffectEvent)(()=>{let e=i.current;i.current=null,c(),l(e)});return(0,I.useEffect)(()=>{let n=t.subscribe((t,n)=>{let r=n.windows.get(e),i=t.windows.get(e);(t.bounds!==n.bounds||r?.size!==i?.size||r?.position!==i?.position)&&p()});return()=>{n(),m()}},[t,e]),{moving:o,handleProps:{onClick:e=>{e.detail!==0||i.current?.pointer||(i.current?u(!0):f(null))},onPointerDown:e=>{if(e.button!==0||!e.isPrimary||i.current)return;e.preventDefault(),e.currentTarget.focus({preventScroll:!0});let t=n.current;if(!t)return;let r=t.getBoundingClientRect();f({id:e.pointerId,x:e.clientX,y:e.clientY,target:e.currentTarget,scaleX:t.offsetWidth>0&&r.width>0?r.width/t.offsetWidth:1,scaleY:t.offsetHeight>0&&r.height>0?r.height/t.offsetHeight:1}),e.currentTarget.setPointerCapture(e.pointerId)},onPointerMove:e=>{let t=i.current;!t?.pointer||t.pointer.id!==e.pointerId||d({x:t.origin.x+(e.clientX-t.pointer.x)/t.pointer.scaleX,y:t.origin.y+(e.clientY-t.pointer.y)/t.pointer.scaleY})},onPointerUp:e=>{let t=i.current;!t?.pointer||t.pointer.id!==e.pointerId||(d({x:t.origin.x+(e.clientX-t.pointer.x)/t.pointer.scaleX,y:t.origin.y+(e.clientY-t.pointer.y)/t.pointer.scaleY}),u(!0))},onPointerCancel:e=>{i.current?.pointer?.id===e.pointerId&&u(!1)},onLostPointerCapture:e=>{i.current?.pointer?.id===e.pointerId&&u(!1)},onBlur:()=>u(!1),onKeyDown:e=>{if(e.defaultPrevented)return;if(e.key===`Escape`&&i.current){e.preventDefault(),e.stopPropagation(),u(!1);return}if((e.key===` `||e.key===`Enter`)&&!i.current?.pointer){if(e.preventDefault(),e.repeat)return;i.current?u(!0):f(null);return}let t=i.current;if(!t||t.pointer)return;let n=e.shiftKey?1:10,r=e.key===`ArrowLeft`?-n:e.key===`ArrowRight`?n:0,a=e.key===`ArrowUp`?-n:e.key===`ArrowDown`?n:0;(r||a)&&(e.preventDefault(),d({x:t.position.x+r,y:t.position.y+a}))}}}}var I;function Je(){return(Je=e((()=>{I=t(),D()})))()}function Ye(e,t,n){let r=n?.x??24,i=n?.y??24,a=(0,L.useMemo)(()=>({position:{x:r,y:i},size:null,layer:0}),[r,i]),o=p(e,e=>e.windows.get(t)??a),s=(0,L.useEffectEvent)(()=>e.getState().register(t,{x:r,y:i}));return(0,L.useEffect)(()=>s(),[e,t]),o}var L;function Xe(){return(Xe=e((()=>{L=t(),f()})))()}function R({id:e,title:t,children:n,defaultPosition:r,width:i=360,height:a=300,actions:o,onClose:s,onPositionChange:l,className:u}){let d=be(),f=Ye(d,e,r),p=(0,z.useRef)(null),m=(0,z.useId)(),h=(0,z.useId)();Ge(d,e,p),He(p);let ee=qe({id:e,store:d,panelRef:p,onPositionChange:l});return(0,B.jsxs)(_,{column:!0,ref:p,role:`dialog`,"aria-labelledby":m,tabIndex:-1,"data-floating-window-id":e,className:c(`surface0 radiusMd shadowLg`,b.window,u),style:Be(f,i,a),onPointerDownCapture:()=>d.getState().bringToFront(e),onFocusCapture:()=>d.getState().bringToFront(e),onKeyDown:t=>{t.key!==`Escape`||t.defaultPrevented||d.getState().order.at(-1)!==e||!s||(t.preventDefault(),t.stopPropagation(),s())},children:[(0,B.jsx)(Re,{title:t,titleId:m,instructionId:h,actions:o,onClose:s,move:ee}),(0,B.jsx)(`span`,{id:h,className:`visuallyHidden`,children:`Для перемещения нажмите Enter или пробел, затем используйте стрелки. Shift — шаг 1 пиксель. Enter или пробел — сохранить, Escape — отменить.`}),(0,B.jsx)(`div`,{className:b.content,children:n})]})}var z,B;function V(){return(V=e((()=>{z=t(),l(),g(),ze(),x(),We(),F(),Je(),Xe(),T(),B=a(),R.__docgenInfo={description:`Немодальное окно: host управляет его существованием, primitive — геометрией, движением и локальным порядком.`,methods:[],displayName:`FloatingWindow`,props:{width:{defaultValue:{value:`360`,computed:!1},required:!1},height:{defaultValue:{value:`300`,computed:!1},required:!1}}}})))()}function Ze(){return(0,H.jsxs)(_,{column:!0,gap:`md`,children:[(0,H.jsx)(`p`,{children:`Обе области содержат окно с ID shared-window. Перемещение в одной области не меняет другую.`}),(0,H.jsxs)(re,{gap:`md`,templateColumns:`repeat(auto-fit, minmax(min(100%, 22rem), 1fr))`,children:[(0,H.jsxs)(_,{as:`section`,column:!0,gap:`sm`,"aria-label":`Первая область`,"data-floating-windows-example-host":`first`,children:[(0,H.jsx)(`h3`,{children:`Первая область`}),(0,H.jsx)(j,{style:{height:`22rem`,background:`var(--surface-2)`},children:(0,H.jsx)(R,{id:`shared-window`,title:`Окно первой области`,width:`17rem`,height:`12rem`,defaultPosition:{x:16,y:16},children:(0,H.jsx)(`p`,{children:`Фокус и порядок наложения ограничены этим контейнером.`})})})]}),(0,H.jsxs)(_,{as:`section`,column:!0,gap:`sm`,"aria-label":`Вторая область`,"data-floating-windows-example-host":`second`,children:[(0,H.jsx)(`h3`,{children:`Вторая область`}),(0,H.jsx)(j,{style:{height:`22rem`,background:`var(--surface-2)`},children:(0,H.jsx)(R,{id:`shared-window`,title:`Окно второй области`,width:`17rem`,height:`12rem`,defaultPosition:{x:40,y:64},children:(0,H.jsx)(`p`,{children:`Общий module-level реестр для этих окон не нужен.`})})})]})]})]})}var H;function Qe(){return(Qe=e((()=>{g(),ne(),V(),N(),H=a(),Ze.__docgenInfo={description:`Одинаковый ID допустим в разных host: координаты и порядок принадлежат каждому контейнеру.`,methods:[],displayName:`IndependentFloatingWindowsExample`}})))()}function $e(){let[e,t]=(0,U.useState)(!0),[n,r]=(0,U.useState)(!0),[i,a]=(0,U.useState)(`Проверьте ввод текста, выделение и прокрутку независимо от перемещения окна.`),[o,s]=(0,U.useState)(`Рабочий набросок`),[c,l]=(0,U.useState)(!1);return(0,W.jsxs)(_,{column:!0,gap:`md`,children:[(0,W.jsx)(`p`,{children:`Перемещайте окна за кнопку в заголовке. С клавиатуры: Space или Enter включает перемещение, стрелки меняют положение, Shift уменьшает шаг, Escape отменяет перемещение.`}),(0,W.jsxs)(_,{wrap:!0,gap:`sm`,children:[(0,W.jsx)(y,{type:`button`,"data-floating-windows-example-action":`open-notes`,disabled:e,onClick:()=>t(!0),children:`Открыть заметки`}),(0,W.jsx)(y,{type:`button`,"data-floating-windows-example-action":`open-details`,disabled:n,onClick:()=>r(!0),children:`Открыть сведения`})]}),(0,W.jsxs)(j,{style:{height:`min(70dvh, 36rem)`,background:`var(--surface-2)`},children:[e&&(0,W.jsx)(R,{id:`notes`,title:`Заметки`,width:`24rem`,height:`21rem`,defaultPosition:{x:20,y:24},onClose:()=>t(!1),actions:(0,W.jsx)(y,{type:`button`,appearance:`ghost`,"data-floating-windows-example-action":`clear-notes`,onClick:()=>a(``),children:`Очистить`}),children:(0,W.jsxs)(_,{column:!0,gap:`md`,children:[(0,W.jsx)(ce,{label:`Текст заметки`,value:i,onChange:a,rows:5,"data-floating-windows-example-field":`notes`}),(0,W.jsx)(`p`,{children:`Закройте окно и откройте снова: черновик остаётся у владельца этого примера.`})]})}),n&&(0,W.jsx)(R,{id:`details`,title:`Сведения`,width:`22rem`,height:`19rem`,defaultPosition:{x:320,y:120},onClose:()=>r(!1),children:(0,W.jsxs)(_,{column:!0,gap:`md`,children:[(0,W.jsx)(ae,{label:`Название`,value:o,onChange:s,"data-floating-windows-example-field":`name`}),(0,W.jsx)(y,{type:`button`,"data-floating-windows-example-action":`save-details`,onClick:()=>l(!0),children:`Сохранить в примере`}),(0,W.jsx)(`p`,{role:`status`,children:c?`Изменения отмечены как сохранённые.`:`Поля и кнопки остаются интерактивными.`})]})})]})]})}var U,W;function et(){return(et=e((()=>{U=t(),v(),g(),ie(),se(),V(),N(),W=a(),$e.__docgenInfo={description:`Сценарий хранит черновики снаружи окон, чтобы закрытие панели не удаляло введённый текст.`,methods:[],displayName:`InteractiveFloatingWindowsExample`}})))()}function tt(){let[e,t]=(0,G.useState)(!1),[n,r]=(0,G.useState)(``);return(0,K.jsxs)(_,{column:!0,gap:`md`,children:[(0,K.jsx)(`p`,{children:`Окно запрашивает 42 × 36 rem. Контейнер сужает его, а длинное содержимое прокручивается внутри.`}),(0,K.jsx)(y,{type:`button`,"data-floating-windows-example-action":`resize-host`,onClick:()=>t(e=>!e),children:e?`Увеличить область`:`Уменьшить область`}),(0,K.jsx)(j,{style:{width:`100%`,maxWidth:e?`17rem`:`24rem`,height:e?`18rem`:`27rem`,background:`var(--surface-2)`},children:(0,K.jsx)(R,{id:`narrow-content`,title:`Длинное содержимое в узкой области`,width:`42rem`,height:`36rem`,defaultPosition:{x:200,y:160},children:(0,K.jsxs)(_,{column:!0,gap:`md`,children:[(0,K.jsx)(ae,{label:`Поле в начале`,value:n,onChange:r,"data-floating-windows-example-field":`narrow`}),Array.from({length:12},(e,t)=>(0,K.jsxs)(`p`,{children:[`Раздел `,t+1,`. Содержимое панели остаётся доступным при уменьшении области. Прокрутка текста не запускает перемещение окна.`]},t)),(0,K.jsx)(y,{type:`button`,"data-floating-windows-example-action":`clear-narrow`,onClick:()=>r(``),children:`Очистить поле в начале`})]})})})]})}var G,K;function nt(){return(nt=e((()=>{G=t(),v(),g(),ie(),V(),N(),K=a(),tt.__docgenInfo={description:`Большие запрошенные размеры проверяют ограничение реальным размером контейнера.`,methods:[],displayName:`NarrowFloatingWindowsExample`}})))()}function rt(){let[e,t]=(0,q.useState)(0),[n,r]=(0,q.useState)(``),i=`foundation-ui-storybook:floating-windows:positions`;return(0,J.jsxs)(_,{column:!0,gap:`md`,children:[(0,J.jsx)(`p`,{children:`Переместите окно и пересоздайте область: координаты восстановятся из localStorage.`}),(0,J.jsxs)(_,{wrap:!0,gap:`sm`,children:[(0,J.jsx)(y,{type:`button`,"data-floating-windows-example-action":`remount-persisted-host`,onClick:()=>t(e=>e+1),children:`Пересоздать область`}),(0,J.jsx)(y,{type:`button`,"data-floating-windows-example-action":`reset-persisted-positions`,onClick:()=>{try{window.localStorage.removeItem(i),r(`Сохранённые координаты этого примера удалены.`),t(e=>e+1)}catch{r(`Браузер не разрешил очистить сохранённые координаты.`)}},children:`Сбросить координаты примера`})]}),(0,J.jsx)(`p`,{role:`status`,children:n||`Сохраняются только координаты; состав окон задаёт приложение.`}),(0,J.jsx)(j,{storageKey:i,onStorageError:()=>r(`Сохранение недоступно; окна продолжают работать в текущей области.`),style:{height:`min(70dvh, 30rem)`,background:`var(--surface-2)`},children:(0,J.jsx)(R,{id:`persisted-notes`,title:`Сохранённое положение`,width:`23rem`,height:`14rem`,defaultPosition:{x:24,y:24},children:(0,J.jsx)(`p`,{children:`После восстановления положение ограничивается текущими размерами контейнера.`})})},e)]})}var q,J;function it(){return(it=e((()=>{q=t(),v(),g(),V(),N(),J=a(),rt.__docgenInfo={description:`Явный сброс затрагивает только ключ этого примера и пересоздаёт его локальную область.`,methods:[],displayName:`PersistentFloatingWindowsExample`}})))()}var at,Y,X,Z,Q,ot;function $(){return($=e((()=>{N(),Qe(),et(),nt(),it(),at={title:`Layout/FloatingWindows`,component:j,args:{children:null},parameters:{atomicCanvas:!0,layout:`padded`,controls:{disable:!0},docs:{description:{component:`Немодальные перемещаемые окна внутри явно заданной области. Состав окон и их содержимое принадлежат приложению; контейнер управляет координатами и порядком наложения. Полный контракт находится в src/floating-windows/README.md.`}}}},Y={name:`Два интерактивных окна`,render:$e},X={name:`Узкая область и длинное содержимое`,render:tt},Z={name:`Независимые области`,render:Ze},Q={name:`Сохранение координат`,render:rt},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  name: "Два интерактивных окна",
+  render: InteractiveFloatingWindowsExample
+}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  name: "Узкая область и длинное содержимое",
+  render: NarrowFloatingWindowsExample
+}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  name: "Независимые области",
+  render: IndependentFloatingWindowsExample
+}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
+  name: "Сохранение координат",
+  render: PersistentFloatingWindowsExample
+}`,...Q.parameters?.docs?.source}}},ot=[`InteractiveWindows`,`NarrowHost`,`IndependentHosts`,`PersistedPositions`]})))()}$();export{Z as IndependentHosts,Y as InteractiveWindows,X as NarrowHost,Q as PersistedPositions,ot as __namedExportsOrder,at as default};