@ryuzaki13/react-foundation-ui 3.10.0 → 3.10.1

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

@@ -1,300 +0,0 @@
-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-CU98mtpe.js";import{i,t as a}from"./useFlexClasses-SgVG37Bb.js";import{n as o,t as s}from"./FlexContainer-DO3X5f_1.js";import{n as c,t as l}from"./FlexItem-BE_4juAd.js";function u({ref:e,variant:t,children:n,className:r=``,...a}){let o=[i(t??``),r].filter(Boolean).join(` `);return(0,d.jsx)(s,{ref:e,className:o,...a,children:n})}var d;function f(){return(f=e((()=>{o(),a(),d=r(),u.displayName=`PredefinedFlex`,u.__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 p;function m(){return(m=e((()=>{o(),c(),f(),p={Container:s,Item:l,Predefined:u}})))()}var h=t({AlignItems:()=>E,BasicColumn:()=>C,BasicRow:()=>S,Directions:()=>w,FlexItems:()=>k,Gaps:()=>O,InlineFlex:()=>j,JustifyContent:()=>T,Predefined:()=>A,RealWorld:()=>M,Wrapping:()=>D,__namedExportsOrder:()=>N,default:()=>x});function g({children:e,index:t=0}){return(0,_.jsx)(p.Item,{style:{...y.item,backgroundColor:b(t)},children:e})}var _,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N;function P(){return(P=e((()=>{n(),m(),_=r(),{useArgs:v}=__STORYBOOK_MODULE_PREVIEW_API__,y={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`]},b=e=>y.itemColors[e%y.itemColors.length],x={title:`Layout/Flex`,component:p.Container,args:{row:!0,gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=v();return(0,_.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}}},S={render:e=>(0,_.jsx)(p.Container,{...e,style:y.container}),args:{children:(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(g,{index:0,children:`Item 1`}),(0,_.jsx)(g,{index:1,children:`Item 2`}),(0,_.jsx)(g,{index:2,children:`Item 3`})]}),row:!0}},C={render:e=>(0,_.jsx)(p.Container,{...e,style:y.container}),args:{children:(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(g,{index:0,children:`Header`}),(0,_.jsx)(g,{index:1,children:`Content`}),(0,_.jsx)(g,{index:2,children:`Footer`})]}),column:!0}},w={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Row (default)`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Row Reverse`}),(0,_.jsxs)(p.Container,{rowReverse:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Column`}),(0,_.jsxs)(p.Container,{column:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Column Reverse`}),(0,_.jsxs)(p.Container,{columnReverse:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]})]}),args:{children:void 0}},T={render:()=>(0,_.jsx)(`div`,{children:[`start`,`center`,`end`,`between`,`around`,`evenly`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Justify: `,e]}),(0,_.jsxs)(p.Container,{row:!0,justify:e,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Item 1`}),(0,_.jsx)(g,{index:1,children:`Item 2`}),(0,_.jsx)(g,{index:2,children:`Item 3`})]})]},e))}),args:{children:void 0}},E={render:()=>(0,_.jsx)(`div`,{children:[`start`,`center`,`end`,`stretch`,`baseline`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Align: `,e]}),(0,_.jsxs)(p.Container,{row:!0,align:e,style:{...y.container,height:`120px`},children:[(0,_.jsx)(g,{index:0,children:(0,_.jsx)(`div`,{children:`Short`})}),(0,_.jsx)(g,{index:1,children:(0,_.jsx)(`div`,{style:{padding:`40px`},children:`Tall`})}),(0,_.jsx)(g,{index:2,children:(0,_.jsx)(`div`,{style:{padding:`24px`},children:`Medium`})})]})]},e))}),args:{children:void 0}},D={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`No Wrap (default)`}),(0,_.jsx)(p.Container,{row:!0,nowrap:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))}),(0,_.jsx)(`h3`,{children:`Wrap`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))}),(0,_.jsx)(`h3`,{children:`Wrap Reverse`}),(0,_.jsx)(p.Container,{row:!0,wrapReverse:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},O={render:()=>(0,_.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gap:e,style:y.container,children:[1,2,3,4,5,6].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]},e)),(0,_.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gapRow:`lg`,gapColumn:`sm`,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},k={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Grow Properties`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Default`}),(0,_.jsx)(p.Item,{grow:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1)},children:`Grow`})}),(0,_.jsx)(g,{index:2,children:`Default`})]}),(0,_.jsx)(`h3`,{children:`Shrink Properties`}),(0,_.jsxs)(p.Container,{row:!0,style:{...y.container,width:`300px`},children:[(0,_.jsx)(p.Item,{shrink:!1,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(0),width:`150px`},children:`No Shrink`})}),(0,_.jsx)(p.Item,{children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1),width:`150px`},children:`Shrink (default)`})})]}),(0,_.jsx)(`h3`,{children:`Composite Classes`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(p.Item,{flex0:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(0)},children:`flex0`})}),(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1)},children:`flex1`})}),(0,_.jsx)(p.Item,{flex0:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(2)},children:`flex0`})})]})]}),args:{children:void 0}},A={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Center`}),(0,_.jsx)(p.Predefined,{variant:`center`,style:{...y.container,height:`100px`},children:(0,_.jsx)(g,{index:0,children:`Centered Content`})}),(0,_.jsx)(`h3`,{children:`Center Between`}),(0,_.jsxs)(p.Predefined,{variant:`centerBetween`,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Left`}),(0,_.jsx)(g,{index:1,children:`Right`})]})]}),args:{children:void 0}},j={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`p`,{children:[`This is text with`,(0,_.jsxs)(p.Container,{inline:!0,align:`center`,gap:`sm`,style:{margin:`0 8px`},children:[(0,_.jsx)(g,{index:0,children:`inline`}),(0,_.jsx)(g,{index:1,children:`flex`})]}),`elements inside.`]}),(0,_.jsxs)(`p`,{children:[`Another example with`,(0,_.jsxs)(p.Container,{inline:!0,column:!0,gap:`xs`,style:{margin:`0 8px`},children:[(0,_.jsx)(g,{index:2,children:`vertical`}),(0,_.jsx)(g,{index:3,children:`inline`})]}),`flex.`]})]}),args:{children:void 0}},M={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Navigation Bar`}),(0,_.jsxs)(p.Predefined,{variant:`centerBetween`,style:y.container,children:[(0,_.jsxs)(p.Container,{row:!0,align:`center`,gap:`md`,children:[(0,_.jsx)(g,{index:0,children:`Logo`}),(0,_.jsx)(g,{index:1,children:`Home`}),(0,_.jsx)(g,{index:2,children:`About`}),(0,_.jsx)(g,{index:3,children:`Contact`})]}),(0,_.jsx)(g,{index:4,children:`Login`})]}),(0,_.jsx)(`h3`,{children:`Card Layout`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gap:`lg`,style:y.container,children:[1,2,3,4].map(e=>(0,_.jsx)(p.Item,{flex1:!0,style:{minWidth:`200px`},children:(0,_.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,textAlign:`center`,backgroundColor:b(e)},children:[(0,_.jsxs)(`h4`,{children:[`Card `,e]}),(0,_.jsx)(`p`,{children:`Card content goes here`})]})},e))}),(0,_.jsx)(`h3`,{children:`Form Layout`}),(0,_.jsxs)(p.Container,{column:!0,gap:`md`,style:y.container,children:[(0,_.jsxs)(p.Container,{row:!0,gap:`md`,children:[(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(g,{index:0,children:`First Name`})}),(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(g,{index:1,children:`Last Name`})})]}),(0,_.jsx)(g,{index:2,children:`Email`}),(0,_.jsx)(g,{index:3,children:`Message`})]})]}),args:{children:void 0}},S.parameters={...S.parameters,docs:{...S.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
-  }
-}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.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
-  }
-}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.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
-  }
-}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.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
-  }
-}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.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
-  }
-}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.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
-  }
-}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.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
-  }
-}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.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
-  }
-}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.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
-  }
-}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.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
-  }
-}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.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
-  }
-}`,...M.parameters?.docs?.source}}},N=[`BasicRow`,`BasicColumn`,`Directions`,`JustifyContent`,`AlignItems`,`Wrapping`,`Gaps`,`FlexItems`,`Predefined`,`InlineFlex`,`RealWorld`]})))()}export{k as a,j as c,M as d,D as f,w as i,T as l,C as n,h as o,P as p,S as r,O as s,E as t,A as u};

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

@@ -1 +0,0 @@
-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{n as c,t as l}from"./useFlexClasses-SgVG37Bb.js";function u({ref:e,children:t,className:n=``,as:i,style:o,inline:l,row:u,column:m,rowReverse:h,columnReverse:g,wrap:_,nowrap:v,wrapReverse:y,align:b,justify:x,alignContent:S,gap:C,gapRow:w,gapColumn:T,...E}){let{activeBreakpoint:D}=a(),O=(0,d.useMemo)(()=>r({inline:l,row:u,column:m,rowReverse:h,columnReverse:g,wrap:_,nowrap:v,wrapReverse:y,align:b,justify:x,alignContent:S,gap:C,gapRow:w,gapColumn:T},D,p),[D,b,S,m,g,C,T,w,l,x,v,u,h,_,y]),k=[c(O),n].filter(Boolean).join(` `);return(0,f.jsx)(s,{as:i,...E,ref:e,className:k,style:o,children:t})}var d,f,p;function m(){return(m=e((()=>{d=t(),i(),o(),l(),f=n(),p=[`inline`,`row`,`column`,`rowReverse`,`columnReverse`,`wrap`,`nowrap`,`wrapReverse`,`align`,`justify`,`alignContent`,`gap`,`gapRow`,`gapColumn`],u.displayName=`FlexContainer`,u.__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{m as n,u as t};

package/storybook-static/assets/Grid-ChS0GzNg.js

@@ -1,61 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-CU98mtpe.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-SX-KK9Lg.js";import{a as p,c as m,d as h,f as g,i as _,l as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T}from"./Grid.stories-ClZzgSfZ.js";function E(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(s,{of:C,parameters:{docs:{toc:!0}}}),`
-`,(0,O.jsx)(u,{children:`Grid`}),`
-`,(0,O.jsx)(o,{children:`Композиция для построения grid-раскладок с управлением колонками, строками и позиционированием элементов`}),`
-`,(0,O.jsx)(t.p,{children:`Grid уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
-Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
-`,(0,O.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,O.jsx)(f,{}),`
-`,(0,O.jsx)(i,{of:S}),`
-`,(0,O.jsx)(t.pre,{children:(0,O.jsx)(t.code,{className:`language-tsx`,children:`import { Grid } from "@ryuzaki13/react-foundation-ui";
-
-export function Example() {
-	return (
-		<Grid.Container templateColumns="repeat(2, minmax(0, 1fr))" gap="md">
-			<Grid.Item>Левая колонка</Grid.Item>
-			<Grid.Item>Правая колонка</Grid.Item>
-		</Grid.Container>
-	);
-}
-`})}),`
-`,(0,O.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,O.jsxs)(t.ul,{children:[`
-`,(0,O.jsx)(t.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
-`]}),`
-`,(0,O.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,O.jsx)(t.h3,{id:`минимальный-пример-построения-grid-раскладки`,children:`Минимальный пример построения grid-раскладки`}),`
-`,(0,O.jsx)(t.p,{children:`Минимальный пример построения grid-раскладки.`}),`
-`,(0,O.jsx)(d,{of:S}),`
-`,(0,O.jsx)(t.h3,{id:`автоматическое-размещение-элементов-в-сетке`,children:`Автоматическое размещение элементов в сетке`}),`
-`,(0,O.jsx)(t.p,{children:`Автоматическое размещение элементов в сетке.`}),`
-`,(0,O.jsx)(d,{of:y}),`
-`,(0,O.jsx)(t.h3,{id:`выравнивание-содержимого-и-элементов-контейнера`,children:`Выравнивание содержимого и элементов контейнера`}),`
-`,(0,O.jsx)(t.p,{children:`Выравнивание содержимого и элементов контейнера.`}),`
-`,(0,O.jsx)(d,{of:w}),`
-`,(0,O.jsx)(t.h3,{id:`сравнение-интервалов-между-элементами`,children:`Сравнение интервалов между элементами`}),`
-`,(0,O.jsx)(t.p,{children:`Сравнение интервалов между элементами.`}),`
-`,(0,O.jsx)(d,{of:p}),`
-`,(0,O.jsx)(t.h3,{id:`применение-готовых-grid-вариантов`,children:`Применение готовых grid-вариантов`}),`
-`,(0,O.jsx)(t.p,{children:`Применение готовых grid-вариантов.`}),`
-`,(0,O.jsx)(d,{of:T}),`
-`,(0,O.jsx)(t.h3,{id:`использование-сложных-шаблонов-строк-и-колонок`,children:`Использование сложных шаблонов строк и колонок`}),`
-`,(0,O.jsx)(t.p,{children:`Использование сложных шаблонов строк и колонок.`}),`
-`,(0,O.jsx)(d,{of:_}),`
-`,(0,O.jsx)(t.h3,{id:`работа-с-именованными-областями-раскладки`,children:`Работа с именованными областями раскладки`}),`
-`,(0,O.jsx)(t.p,{children:`Работа с именованными областями раскладки.`}),`
-`,(0,O.jsx)(d,{of:b}),`
-`,(0,O.jsx)(t.h3,{id:`ручное-позиционирование-отдельных-элементов`,children:`Ручное позиционирование отдельных элементов`}),`
-`,(0,O.jsx)(t.p,{children:`Ручное позиционирование отдельных элементов.`}),`
-`,(0,O.jsx)(d,{of:v}),`
-`,(0,O.jsx)(t.h3,{id:`режим-inline-grid-в-потоке-документа`,children:`Режим inline-grid в потоке документа`}),`
-`,(0,O.jsx)(t.p,{children:`Режим inline-grid в потоке документа.`}),`
-`,(0,O.jsx)(d,{of:m}),`
-`,(0,O.jsx)(t.h3,{id:`прикладной-пример-использования-в-интерфейсе`,children:`Прикладной пример использования в интерфейсе`}),`
-`,(0,O.jsx)(t.p,{children:`Прикладной пример использования в интерфейсе.`}),`
-`,(0,O.jsx)(d,{of:h}),`
-`,(0,O.jsx)(t.h3,{id:`адаптация-раскладки-под-ширину-контейнера`,children:`Адаптация раскладки под ширину контейнера`}),`
-`,(0,O.jsx)(t.p,{children:`Адаптация раскладки под ширину контейнера.`}),`
-`,(0,O.jsx)(d,{of:g}),`
-`,(0,O.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,O.jsx)(l,{of:C}),`
-`,(0,O.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,O.jsx)(a,{includePrimary:!1})]})}function D(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(E,{...e})}):E(e)}var O;function k(){return(k=e((()=>{O=t(),r(),c(),x()})))()}k();export{D as default};