@ryuzaki13/react-foundation-ui 3.10.0 → 3.10.1

package/storybook-static/assets/Flex.stories-DRBLrgrW.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-E950Ehp0.js";import{i,r as a}from"./getFlexClasses-DOf6NlyJ.js";import{n as o,t as s}from"./FlexContainer-4Ap7vbIt.js";import{n as c,t as l}from"./FlexItem-Dwqi7KeT.js";import{n as u,t as d}from"./ResponsiveLayoutPreview-BHBxtn2W.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-4Ap7vbIt.js

@@ -0,0 +1 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-E950Ehp0.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-Dwqi7KeT.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-E950Ehp0.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-D8FScEoc.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-E950Ehp0.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-B-qFeMZZ.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/{FormattedTableCell-BfEiCYOi.js → FormattedTableCell-BKSpyxnu.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./circle-alert-BXB7LSDS.js";import{n as i,t as a}from"./circle-check-DrVuYn1Q.js";import{i as o,n as s,r as c,t as l}from"./info-BhHmytIH.js";import{n as u,r as d,t as f}from"./sortable-BteEe6X0.js";import{n as p}from"./iframe-CU98mtpe.js";import{C as m,S as h,b as g,c as _,f as v,l as ee,m as te,p as ne,u as re,v as y,w as ie,x as ae,y as oe}from"./odata-yWIAioh9.js";import{a as b,i as x,n as se}from"./utils-tg3ibbzi.js";import{a as S,n as C,o as ce}from"./array-D-_yMMUK-BBmW5vUr.js";import{h as w,l as T,y as E}from"./formatters-DVE1YVNQ-CJCkXjuI.js";import{i as D,n as le,r as ue,t as de}from"./NoData-BZhNhaYV.js";import{n as fe,t as pe}from"./GridContainer-BHSfIiml.js";import{c as O,m as k,n as me,o as A,p as j,r as he}from"./hooks-BgMXxXbY.js";import{i as M,r as ge}from"./useTable-CK68Q4S4.js";import{n as _e,t as ve}from"./Scrollable-DLyQwImF.js";import{n as ye,t as N}from"./ContextMenu-DbmUWR4I.js";import{At as P,Mt as F}from"./tableFeatures-Dx3U-F9E.js";var I,L,R,z,be,xe,B,V;function Se(){return(Se=e((()=>{I=`UMTbLD`,L=`cz57Fx`,R=`oPzAxu`,z=`MBu26r`,be=`_03z-1l`,xe=`_0RqsqJ`,B=`mXkUoM`,V={stateWrapper:I,status:L,information:R,success:z,warning:be,error:xe,state:B}})))()}function Ce({state:e}){switch(e){case`error`:return(0,H.jsx)(we,{});case`warning`:return(0,H.jsx)(Te,{});case`success`:return(0,H.jsx)(Ee,{});case`information`:return(0,H.jsx)(De,{});default:return null}}function we(){return(0,H.jsx)(c,{className:b(V.state,V.error)})}function Te(){return(0,H.jsx)(r,{className:b(V.state,V.warning)})}function Ee(){return(0,H.jsx)(a,{className:b(V.state,V.success)})}function De(){return(0,H.jsx)(l,{className:b(V.state,V.information)})}var H;function Oe(){return(Oe=e((()=>{x(),n(),i(),o(),s(),Se(),H=p(),Ce.__docgenInfo={description:``,methods:[],displayName:`RenderStateIcon`,props:{state:{required:!1,tsType:{name:`State`},description:``}}},we.__docgenInfo={description:``,methods:[],displayName:`ErrorIcon`},Te.__docgenInfo={description:``,methods:[],displayName:`WarningIcon`},Ee.__docgenInfo={description:``,methods:[],displayName:`SuccessIcon`},De.__docgenInfo={description:``,methods:[],displayName:`InformationIcon`}})))()}var ke,Ae;function je(){return(je=e((()=>{ke=`YJUVjb`,Ae={resizeHandle:ke}})))()}function Me(e,t){let n=e.closest(`th`)?.getBoundingClientRect().width;return m(typeof n==`number`&&Number.isFinite(n)?n:t,t)}function Ne({columnId:e,className:t,minWidth:n,keyboardStep:r=Fe,ariaLabel:i=`Изменить ширину колонки`,getStartWidth:a,onResize:o,onResizeEnd:s,onReset:c}){let l=n??60,u=(0,U.useRef)(0),d=(0,U.useRef)(0),f=(0,U.useRef)(0),p=(0,U.useRef)(!1),h=(0,U.useRef)(!1),g=t=>{let n=a?.(e,t)??Me(t,l);return m(n,l)},_=e=>{(e.button===0||e.pointerType!==`mouse`)&&(p.current=!0,h.current=!1,u.current=e.clientX,d.current=g(e.currentTarget),f.current=d.current,e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault(),e.stopPropagation())},v=t=>{if(!p.current)return;let n=m(d.current+t.clientX-u.current,l);f.current=n,h.current=!0,o(e,n),t.preventDefault(),t.stopPropagation()},ee=t=>{if(p.current){p.current=!1,h.current&&s?.(e,f.current);try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}t.preventDefault(),t.stopPropagation()}};return(0,Pe.jsx)(`div`,{role:`separator`,"aria-label":i,"aria-orientation":`vertical`,tabIndex:0,onPointerDown:_,onPointerMove:v,onPointerUp:ee,onPointerCancel:ee,onKeyDown:t=>{if(t.key!==`ArrowLeft`&&t.key!==`ArrowRight`&&t.key!==`Home`)return;if(t.preventDefault(),t.stopPropagation(),t.key===`Home`){c?.(e);return}let n=t.key===`ArrowRight`?1:-1,i=g(t.currentTarget),a=m(i+n*r,l);o(e,a),s?.(e,a)},onDoubleClick:t=>{t.preventDefault(),t.stopPropagation(),c?.(e)},className:b(Ae.resizeHandle,t)})}var U,Pe,Fe;function Ie(){return(Ie=e((()=>{U=t(),g(),x(),je(),Pe=p(),Fe=8,Ne.__docgenInfo={description:``,methods:[],displayName:`TableColumnResizeHandle`,props:{columnId:{required:!0,tsType:{name:`string`},description:``},className:{required:!1,tsType:{name:`string`},description:``},minWidth:{required:!1,tsType:{name:`number`},description:``},keyboardStep:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`8`,computed:!1}},ariaLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Изменить ширину колонки"`,computed:!1}},getStartWidth:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, element: HTMLElement) => number`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`HTMLElement`},name:`element`}],return:{name:`number`}}},description:``},onResize:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, width: number) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`number`},name:`width`}],return:{name:`void`}}},description:``},onResizeEnd:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, width: number) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`number`},name:`width`}],return:{name:`void`}}},description:``},onReset:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`}],return:{name:`void`}}},description:``}}}})))()}function Le(e,t){return typeof e==`function`?e(t):e}function Re({columnId:e,children:t,dragDisabled:n=!1,draggingClassName:r,resizeHandle:i,className:a,style:o,...s}){let{attributes:c,listeners:l,setActivatorNodeRef:u,setNodeRef:d,transform:f,isDragging:p,rect:m}=O({id:e,disabled:n}),h=p?m.current?.width:void 0,g={transform:j.Translate.toString(f),zIndex:p?`calc(var(--z-header) + 1)`:void 0,...h?{width:h,minWidth:h}:{},...o},_={attributes:c,listeners:l,setActivatorElement:u,disabled:n,isDragging:p};return(0,ze.jsxs)(`th`,{...s,ref:d,className:b(a,p&&r),style:g,children:[Le(t,_),i?(0,ze.jsx)(Ne,{...i}):null]})}var ze;function Be(){return(Be=e((()=>{A(),k(),x(),Ie(),ze=p(),Re.__docgenInfo={description:``,methods:[],displayName:`TableHeaderInteractionCell`,props:{columnId:{required:!0,tsType:{name:`UniqueIdentifier`},description:``},children:{required:!0,tsType:{name:`union`,raw:`ReactNode | ((dragState: TableHeaderCellDragState) => ReactNode)`,elements:[{name:`ReactNode`},{name:`unknown`}]},description:``},dragDisabled:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},draggingClassName:{required:!1,tsType:{name:`string`},description:``},resizeHandle:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./circle-alert-l6NwXGUY.js";import{n as i,t as a}from"./circle-check-B-r716dD.js";import{i as o,n as s,r as c,t as l}from"./info-Dp6XZGwP.js";import{n as u,r as d,t as f}from"./sortable-D7TAXZBK.js";import{n as p}from"./iframe-E950Ehp0.js";import{C as m,S as h,b as g,c as _,f as v,l as ee,m as te,p as ne,u as re,v as y,w as ie,x as ae,y as oe}from"./odata-DuJbgix6.js";import{a as b,i as x,n as se}from"./utils-tg3ibbzi.js";import{a as S,n as C,o as ce}from"./array-D-_yMMUK-BBmW5vUr.js";import{h as w,l as T,y as E}from"./formatters-DVE1YVNQ-CJCkXjuI.js";import{i as D,n as le,r as ue,t as de}from"./NoData-32gM9qt4.js";import{n as fe,t as pe}from"./GridContainer-B2iAnXeB.js";import{c as O,m as k,n as me,o as A,p as j,r as he}from"./hooks-CAgVZJ-F.js";import{i as M,r as ge}from"./useTable-CK68Q4S4.js";import{n as _e,t as ve}from"./Scrollable-BBYov1Hn.js";import{n as ye,t as N}from"./ContextMenu-BckwURZg.js";import{At as P,Mt as F}from"./tableFeatures-Dx3U-F9E.js";var I,L,R,z,be,xe,B,V;function Se(){return(Se=e((()=>{I=`UMTbLD`,L=`cz57Fx`,R=`oPzAxu`,z=`MBu26r`,be=`_03z-1l`,xe=`_0RqsqJ`,B=`mXkUoM`,V={stateWrapper:I,status:L,information:R,success:z,warning:be,error:xe,state:B}})))()}function Ce({state:e}){switch(e){case`error`:return(0,H.jsx)(we,{});case`warning`:return(0,H.jsx)(Te,{});case`success`:return(0,H.jsx)(Ee,{});case`information`:return(0,H.jsx)(De,{});default:return null}}function we(){return(0,H.jsx)(c,{className:b(V.state,V.error)})}function Te(){return(0,H.jsx)(r,{className:b(V.state,V.warning)})}function Ee(){return(0,H.jsx)(a,{className:b(V.state,V.success)})}function De(){return(0,H.jsx)(l,{className:b(V.state,V.information)})}var H;function Oe(){return(Oe=e((()=>{x(),n(),i(),o(),s(),Se(),H=p(),Ce.__docgenInfo={description:``,methods:[],displayName:`RenderStateIcon`,props:{state:{required:!1,tsType:{name:`State`},description:``}}},we.__docgenInfo={description:``,methods:[],displayName:`ErrorIcon`},Te.__docgenInfo={description:``,methods:[],displayName:`WarningIcon`},Ee.__docgenInfo={description:``,methods:[],displayName:`SuccessIcon`},De.__docgenInfo={description:``,methods:[],displayName:`InformationIcon`}})))()}var ke,Ae;function je(){return(je=e((()=>{ke=`YJUVjb`,Ae={resizeHandle:ke}})))()}function Me(e,t){let n=e.closest(`th`)?.getBoundingClientRect().width;return m(typeof n==`number`&&Number.isFinite(n)?n:t,t)}function Ne({columnId:e,className:t,minWidth:n,keyboardStep:r=Fe,ariaLabel:i=`Изменить ширину колонки`,getStartWidth:a,onResize:o,onResizeEnd:s,onReset:c}){let l=n??60,u=(0,U.useRef)(0),d=(0,U.useRef)(0),f=(0,U.useRef)(0),p=(0,U.useRef)(!1),h=(0,U.useRef)(!1),g=t=>{let n=a?.(e,t)??Me(t,l);return m(n,l)},_=e=>{(e.button===0||e.pointerType!==`mouse`)&&(p.current=!0,h.current=!1,u.current=e.clientX,d.current=g(e.currentTarget),f.current=d.current,e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault(),e.stopPropagation())},v=t=>{if(!p.current)return;let n=m(d.current+t.clientX-u.current,l);f.current=n,h.current=!0,o(e,n),t.preventDefault(),t.stopPropagation()},ee=t=>{if(p.current){p.current=!1,h.current&&s?.(e,f.current);try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}t.preventDefault(),t.stopPropagation()}};return(0,Pe.jsx)(`div`,{role:`separator`,"aria-label":i,"aria-orientation":`vertical`,tabIndex:0,onPointerDown:_,onPointerMove:v,onPointerUp:ee,onPointerCancel:ee,onKeyDown:t=>{if(t.key!==`ArrowLeft`&&t.key!==`ArrowRight`&&t.key!==`Home`)return;if(t.preventDefault(),t.stopPropagation(),t.key===`Home`){c?.(e);return}let n=t.key===`ArrowRight`?1:-1,i=g(t.currentTarget),a=m(i+n*r,l);o(e,a),s?.(e,a)},onDoubleClick:t=>{t.preventDefault(),t.stopPropagation(),c?.(e)},className:b(Ae.resizeHandle,t)})}var U,Pe,Fe;function Ie(){return(Ie=e((()=>{U=t(),g(),x(),je(),Pe=p(),Fe=8,Ne.__docgenInfo={description:``,methods:[],displayName:`TableColumnResizeHandle`,props:{columnId:{required:!0,tsType:{name:`string`},description:``},className:{required:!1,tsType:{name:`string`},description:``},minWidth:{required:!1,tsType:{name:`number`},description:``},keyboardStep:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`8`,computed:!1}},ariaLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Изменить ширину колонки"`,computed:!1}},getStartWidth:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, element: HTMLElement) => number`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`HTMLElement`},name:`element`}],return:{name:`number`}}},description:``},onResize:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, width: number) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`number`},name:`width`}],return:{name:`void`}}},description:``},onResizeEnd:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string, width: number) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`},{type:{name:`number`},name:`width`}],return:{name:`void`}}},description:``},onReset:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(columnId: string) => void`,signature:{arguments:[{type:{name:`string`},name:`columnId`}],return:{name:`void`}}},description:``}}}})))()}function Le(e,t){return typeof e==`function`?e(t):e}function Re({columnId:e,children:t,dragDisabled:n=!1,draggingClassName:r,resizeHandle:i,className:a,style:o,...s}){let{attributes:c,listeners:l,setActivatorNodeRef:u,setNodeRef:d,transform:f,isDragging:p,rect:m}=O({id:e,disabled:n}),h=p?m.current?.width:void 0,g={transform:j.Translate.toString(f),zIndex:p?`calc(var(--z-header) + 1)`:void 0,...h?{width:h,minWidth:h}:{},...o},_={attributes:c,listeners:l,setActivatorElement:u,disabled:n,isDragging:p};return(0,ze.jsxs)(`th`,{...s,ref:d,className:b(a,p&&r),style:g,children:[Le(t,_),i?(0,ze.jsx)(Ne,{...i}):null]})}var ze;function Be(){return(Be=e((()=>{A(),k(),x(),Ie(),ze=p(),Re.__docgenInfo={description:``,methods:[],displayName:`TableHeaderInteractionCell`,props:{columnId:{required:!0,tsType:{name:`UniqueIdentifier`},description:``},children:{required:!0,tsType:{name:`union`,raw:`ReactNode | ((dragState: TableHeaderCellDragState) => ReactNode)`,elements:[{name:`ReactNode`},{name:`unknown`}]},description:``},dragDisabled:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},draggingClassName:{required:!1,tsType:{name:`string`},description:``},resizeHandle:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
 	columnId: string;
 	className?: string;
 	minWidth?: number;

package/storybook-static/assets/{Grid-0NnWfTJ7.js → Grid-CJ5RLrgv.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-CU98mtpe.js";import{i as r,r as i,t as a}from"./media-D9cE2tzi.js";import{n as o,t as s}from"./PolymorphicComponent-NBvIz9JD.js";import{a as c,i as l,n as u,r as d,t as f}from"./GridContainer-BHSfIiml.js";function p({ref:e,children:t,className:n=``,as:i,style:o,area:u,column:d,row:f,alignSelf:p,justifySelf:g,..._}){let{activeBreakpoint:v}=a(),y=(0,m.useMemo)(()=>({alignSelf:r(p,v),justifySelf:r(g,v)}),[v,p,g]),b=(0,m.useMemo)(()=>({area:r(u,v),column:r(d,v),row:r(f,v)}),[v,u,d,f]),x=l(y),S=c(b),C=[x,n].filter(Boolean).join(` `),w={...S,...o};return(0,h.jsx)(s,{as:i,..._,ref:e,className:C,style:w,children:t})}var m,h;function g(){return(g=e((()=>{m=t(),i(),o(),d(),h=n(),p.displayName=`GridItem`,p.__docgenInfo={description:``,methods:[],displayName:`GridItem`,props:{area:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Именованная область для размещения элемента
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-E950Ehp0.js";import{n,t as r}from"./PolymorphicComponent-NBvIz9JD.js";import{a as i,i as a,n as o,r as s,t as c}from"./GridContainer-B2iAnXeB.js";function l({ref:e,children:t,className:n=``,as:i,style:o,area:c,column:l,row:d,alignSelf:f,justifySelf:p,...m}){let h=s({alignSelf:f,justifySelf:p}),g=a({area:c,column:l,row:d}),_=[h,g.className,n].filter(Boolean).join(` `),v={...g.style,...o};return(0,u.jsx)(r,{as:i,...m,ref:e,className:_,style:v,children:t})}var u;function d(){return(d=e((()=>{n(),i(),u=t(),l.displayName=`GridItem`,l.__docgenInfo={description:``,methods:[],displayName:`GridItem`,props:{area:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Именованная область для размещения элемента
 
 Связывает элемент с областью объявленной в GridContainer areas.
 Самый простой способ позиционирования в сложных макетах.
@@ -49,4 +49,4 @@ CSS-значение для grid-row: начало / конец.
 Используется для специфического оформления конкретных ячеек сетки.`,defaultValue:{value:`""`,computed:!1}},style:{required:!1,tsType:{name:`CSSProperties`},description:`Инлайн-стили
 
 JavaScript-объект с CSS-свойствами для тонкого контроля над стилями элемента.
-Особенно полезно для динамических расчетов позиционирования или анимаций.`},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``}},composes:[`HTMLAttributes`]}})))()}var _;function v(){return(v=e((()=>{u(),g(),_={Container:f,Item:p}})))()}export{v as n,_ as t};
+Особенно полезно для динамических расчетов позиционирования или анимаций.`},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``}},composes:[`HTMLAttributes`]}})))()}var f;function p(){return(p=e((()=>{o(),d(),f={Container:c,Item:l}})))()}export{p as n,f as t};