@ryuzaki13/react-foundation-ui 1.0.7 → 1.0.11

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

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

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

@@ -0,0 +1,61 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Alignment as p,AutoFlow as m,BasicGrid as h,ComplexTemplates as g,Gaps as _,GridAreas as v,InlineGrid as y,ItemPlacement as b,PredefinedVariants as x,RealWorld as S,Responsive as C,n as w,t as T}from"./Grid.stories-6WUp6Tof.js";function E(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(a,{of:T,parameters:{docs:{toc:!0}}}),`
+`,(0,O.jsx)(c,{children:`Grid`}),`
+`,(0,O.jsx)(i,{children:`Композиция для построения grid-раскладок с управлением колонками, строками и позиционированием элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Grid уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,O.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,O.jsx)(u,{}),`
+`,(0,O.jsx)(n,{of:h}),`
+`,(0,O.jsx)(o.pre,{children:(0,O.jsx)(o.code,{className:`language-tsx`,children:`import { Grid } from "@/shared/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)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,O.jsxs)(o.ul,{children:[`
+`,(0,O.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,O.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,O.jsx)(o.h3,{id:`минимальный-пример-построения-grid-раскладки`,children:`Минимальный пример построения grid-раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Минимальный пример построения grid-раскладки.`}),`
+`,(0,O.jsx)(l,{of:h}),`
+`,(0,O.jsx)(o.h3,{id:`автоматическое-размещение-элементов-в-сетке`,children:`Автоматическое размещение элементов в сетке`}),`
+`,(0,O.jsx)(o.p,{children:`Автоматическое размещение элементов в сетке.`}),`
+`,(0,O.jsx)(l,{of:m}),`
+`,(0,O.jsx)(o.h3,{id:`выравнивание-содержимого-и-элементов-контейнера`,children:`Выравнивание содержимого и элементов контейнера`}),`
+`,(0,O.jsx)(o.p,{children:`Выравнивание содержимого и элементов контейнера.`}),`
+`,(0,O.jsx)(l,{of:p}),`
+`,(0,O.jsx)(o.h3,{id:`сравнение-интервалов-между-элементами`,children:`Сравнение интервалов между элементами`}),`
+`,(0,O.jsx)(o.p,{children:`Сравнение интервалов между элементами.`}),`
+`,(0,O.jsx)(l,{of:_}),`
+`,(0,O.jsx)(o.h3,{id:`применение-готовых-grid-вариантов`,children:`Применение готовых grid-вариантов`}),`
+`,(0,O.jsx)(o.p,{children:`Применение готовых grid-вариантов.`}),`
+`,(0,O.jsx)(l,{of:x}),`
+`,(0,O.jsx)(o.h3,{id:`использование-сложных-шаблонов-строк-и-колонок`,children:`Использование сложных шаблонов строк и колонок`}),`
+`,(0,O.jsx)(o.p,{children:`Использование сложных шаблонов строк и колонок.`}),`
+`,(0,O.jsx)(l,{of:g}),`
+`,(0,O.jsx)(o.h3,{id:`работа-с-именованными-областями-раскладки`,children:`Работа с именованными областями раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Работа с именованными областями раскладки.`}),`
+`,(0,O.jsx)(l,{of:v}),`
+`,(0,O.jsx)(o.h3,{id:`ручное-позиционирование-отдельных-элементов`,children:`Ручное позиционирование отдельных элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Ручное позиционирование отдельных элементов.`}),`
+`,(0,O.jsx)(l,{of:b}),`
+`,(0,O.jsx)(o.h3,{id:`режим-inline-grid-в-потоке-документа`,children:`Режим inline-grid в потоке документа`}),`
+`,(0,O.jsx)(o.p,{children:`Режим inline-grid в потоке документа.`}),`
+`,(0,O.jsx)(l,{of:y}),`
+`,(0,O.jsx)(o.h3,{id:`прикладной-пример-использования-в-интерфейсе`,children:`Прикладной пример использования в интерфейсе`}),`
+`,(0,O.jsx)(o.p,{children:`Прикладной пример использования в интерфейсе.`}),`
+`,(0,O.jsx)(l,{of:S}),`
+`,(0,O.jsx)(o.h3,{id:`адаптация-раскладки-под-ширину-контейнера`,children:`Адаптация раскладки под ширину контейнера`}),`
+`,(0,O.jsx)(o.p,{children:`Адаптация раскладки под ширину контейнера.`}),`
+`,(0,O.jsx)(l,{of:C}),`
+`,(0,O.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,O.jsx)(s,{of:T}),`
+`,(0,O.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,O.jsx)(r,{includePrimary:!1})]})}function D(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,O.jsx)(n,{...e,children:(0,O.jsx)(E,{...e})}):E(e)}var O;e((()=>{O=d(),f(),o(),w()}))();export{D as default};

package/storybook-static/assets/Grid-K9R_IHaw.css

@@ -0,0 +1 @@
+._5Z2YQF{display:grid}._5Z2YQF.gAEXju{vertical-align:middle;display:inline-grid}._5Z2YQF.KdmGbk{grid-auto-flow:row}._5Z2YQF.uOpH1m{grid-auto-flow:column}._5Z2YQF.EOUgpE{grid-auto-flow:dense}._5Z2YQF.PoMD0P{gap:unset}._5Z2YQF.FBebhA{row-gap:var(--space-xs)}._5Z2YQF.rwvhfS{row-gap:var(--space-sm)}._5Z2YQF.ZIsGgj{row-gap:var(--space-md)}._5Z2YQF.lbAie9{row-gap:var(--space-lg)}._5Z2YQF.ylmmN3{row-gap:var(--space-xl)}._5Z2YQF.Fg86QU{column-gap:var(--space-xs)}._5Z2YQF._3qWtbZ{column-gap:var(--space-sm)}._5Z2YQF.gIXZ8P{column-gap:var(--space-md)}._5Z2YQF.xXxHZM{column-gap:var(--space-lg)}._5Z2YQF.zRgpft{column-gap:var(--space-xl)}._5Z2YQF.Fb1W2U{row-gap:var(--space-xs);column-gap:var(--space-xs)}._5Z2YQF._2EojT9{row-gap:var(--space-sm);column-gap:var(--space-sm)}._5Z2YQF.gYCGa5{row-gap:var(--space-md);column-gap:var(--space-md)}._5Z2YQF.JN0CZr{row-gap:var(--space-lg);column-gap:var(--space-lg)}._5Z2YQF._2QvtUb{row-gap:var(--space-xl);column-gap:var(--space-xl)}._5Z2YQF._1kRriS{align-items:start}._5Z2YQF.ocLWZU{align-items:center}._5Z2YQF.TS1qri{align-items:end}._5Z2YQF.FXfvI7{align-items:stretch}._5Z2YQF.biKmzi{align-items:baseline}._5Z2YQF._4-sIS7{justify-items:start}._5Z2YQF.lbdoyi{justify-items:center}._5Z2YQF.WvAC9I{justify-items:end}._5Z2YQF.LN4Ak-{justify-items:stretch}._5Z2YQF.XC0FuJ{align-content:start}._5Z2YQF._6b9wZI{align-content:center}._5Z2YQF.KevE4M{align-content:end}._5Z2YQF.Sn-je4{align-content:stretch}._5Z2YQF.Wnx9iF{align-content:space-between}._5Z2YQF.RAoqm2{align-content:space-around}._5Z2YQF.nUjbmv{align-content:space-evenly}._5Z2YQF.TjTsA7{justify-content:start}._5Z2YQF.VdpzYk{justify-content:center}._5Z2YQF.peszxb{justify-content:end}._5Z2YQF.E98bqx{justify-content:stretch}._5Z2YQF.CdaBbu{justify-content:space-between}._5Z2YQF.leVL0N{justify-content:space-around}._5Z2YQF._6mOZVj{justify-content:space-evenly}.XHgjM3.wtrn5A{grid-area:auto}.XHgjM3.LkIh-N{align-self:start}.XHgjM3.Vhdvpo{align-self:center}.XHgjM3.cyg2du{align-self:end}.XHgjM3.Ptd1ad{align-self:stretch}.XHgjM3.Z22Yty{align-self:baseline}.XHgjM3.gycEgN{justify-self:start}.XHgjM3.s69iy2{justify-self:center}.XHgjM3.pKEJ9k{justify-self:end}.XHgjM3.qWkZVw{justify-self:stretch}.gUbUDY{grid-auto-rows:1fr}.S0HulN{grid-template-columns:auto 1fr;grid-auto-rows:auto}.K2fFKT{grid-template-columns:100%;grid-auto-rows:auto 1fr}

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

@@ -0,0 +1,163 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{i as r,r as i,t as ee}from"./media-Djn0SUaN.js";var a,o,s,c,l,u,d,f,p,m,h,g,_,v,te,ne,re,ie,ae,oe,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,se,U,W,G,K,ce,le,ue,de,fe,pe,me,he,ge,q,_e=t((()=>{a=`_5Z2YQF`,o=`gAEXju`,s=`KdmGbk`,c=`uOpH1m`,l=`EOUgpE`,u=`PoMD0P`,d=`FBebhA`,f=`rwvhfS`,p=`ZIsGgj`,m=`lbAie9`,h=`ylmmN3`,g=`Fg86QU`,_=`_3qWtbZ`,v=`gIXZ8P`,te=`xXxHZM`,ne=`zRgpft`,re=`Fb1W2U`,ie=`_2EojT9`,ae=`gYCGa5`,oe=`JN0CZr`,y=`_2QvtUb`,b=`_1kRriS`,x=`ocLWZU`,S=`TS1qri`,C=`FXfvI7`,w=`biKmzi`,T=`_4-sIS7`,E=`lbdoyi`,D=`WvAC9I`,O=`LN4Ak-`,k=`XC0FuJ`,A=`_6b9wZI`,j=`KevE4M`,M=`Sn-je4`,N=`Wnx9iF`,P=`RAoqm2`,F=`nUjbmv`,I=`TjTsA7`,L=`VdpzYk`,R=`peszxb`,z=`E98bqx`,B=`CdaBbu`,V=`leVL0N`,H=`_6mOZVj`,se=`XHgjM3`,U=`wtrn5A`,W=`LkIh-N`,G=`Vhdvpo`,K=`cyg2du`,ce=`Ptd1ad`,le=`Z22Yty`,ue=`gycEgN`,de=`s69iy2`,fe=`pKEJ9k`,pe=`qWkZVw`,me=`gUbUDY`,he=`S0HulN`,ge=`K2fFKT`,q={grid:a,inline:o,row:s,column:c,dense:l,gapNone:u,gapRowXs:d,gapRowSm:f,gapRowMd:p,gapRowLg:m,gapRowXl:h,gapColumnXs:g,gapColumnSm:_,gapColumnMd:v,gapColumnLg:te,gapColumnXl:ne,gapXs:re,gapSm:ie,gapMd:ae,gapLg:oe,gapXl:y,alignStart:b,alignCenter:x,alignEnd:S,alignStretch:C,alignBaseline:w,justifyStart:T,justifyCenter:E,justifyEnd:D,justifyStretch:O,alignContentStart:k,alignContentCenter:A,alignContentEnd:j,alignContentStretch:M,alignContentBetween:N,alignContentAround:P,alignContentEvenly:F,justifyContentStart:I,justifyContentCenter:L,justifyContentEnd:R,justifyContentStretch:z,justifyContentBetween:B,justifyContentAround:V,justifyContentEvenly:H,item:se,areaAuto:U,alignSelfStart:W,alignSelfCenter:G,alignSelfEnd:K,alignSelfStretch:ce,alignSelfBaseline:le,justifySelfStart:ue,justifySelfCenter:de,justifySelfEnd:fe,justifySelfStretch:pe,autoRows1fr:me,columnsAuto1fr:he,singleColumn:ge}})),J,ve,ye,be,xe,Se=t((()=>{J=e(n(),1),_e(),ve=e=>(0,J.useMemo)(()=>{let t=[q.grid];return e.inline&&t.push(q.inline),e.column?t.push(q.column):e.dense?t.push(q.dense):e.row&&t.push(q.row),e.align&&t.push(q[`align${e.align.charAt(0).toUpperCase()+e.align.slice(1)}`]),e.justify&&t.push(q[`justify${e.justify.charAt(0).toUpperCase()+e.justify.slice(1)}`]),e.justifyContent&&t.push(q[`justifyContent${e.justifyContent.charAt(0).toUpperCase()+e.justifyContent.slice(1)}`]),e.alignContent&&t.push(q[`alignContent${e.alignContent.charAt(0).toUpperCase()+e.alignContent.slice(1)}`]),e.gap===`none`?t.push(q.gapNone):e.gap&&t.push(q[`gap${e.gap.charAt(0).toUpperCase()+e.gap.slice(1)}`]),e.gapRow&&t.push(q[`gapRow${e.gapRow.charAt(0).toUpperCase()+e.gapRow.slice(1)}`]),e.gapColumn&&t.push(q[`gapColumn${e.gapColumn.charAt(0).toUpperCase()+e.gapColumn.slice(1)}`]),e.variant===`single-column`?t.push(q.singleColumn):e.variant===`auto-1fr`?t.push(q.autoRows1fr):e.variant===`auto1fr-rows-auto`&&t.push(q.columnsAuto1fr),t.filter(Boolean).join(` `)},[e]),ye=e=>(0,J.useMemo)(()=>{let t={};return e.templateColumns&&(t.gridTemplateColumns=e.templateColumns),e.templateRows&&(t.gridTemplateRows=e.templateRows),e.autoColumns&&(t.gridAutoColumns=e.autoColumns),e.autoRows&&(t.gridAutoRows=e.autoRows),e.areas&&(t.gridTemplateAreas=e.areas),t},[e.templateColumns,e.templateRows,e.autoColumns,e.autoRows,e.areas]),be=e=>(0,J.useMemo)(()=>{let t=[q.item];return e.alignSelf&&t.push(q[`alignSelf${e.alignSelf.charAt(0).toUpperCase()+e.alignSelf.slice(1)}`]),e.justifySelf&&t.push(q[`justifySelf${e.justifySelf.charAt(0).toUpperCase()+e.justifySelf.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),xe=e=>(0,J.useMemo)(()=>{let t={};return e.area&&(t.gridArea=e.area),e.column&&(t.gridColumn=e.column),e.row&&(t.gridRow=e.row),t},[e.area,e.column,e.row])})),Y,X,Z=t((()=>{Y=e(n(),1),i(),Se(),X=(0,Y.forwardRef)(({children:e,className:t=``,as:n,style:i,templateColumns:a,templateRows:o,autoColumns:s,autoRows:c,areas:l,...u},d)=>{let{activeBreakpoint:f}=ee(),p=(0,Y.useMemo)(()=>({...u,inline:r(u.inline,f),row:r(u.row,f),column:r(u.column,f),dense:r(u.dense,f),gap:r(u.gap,f),gapRow:r(u.gapRow,f),gapColumn:r(u.gapColumn,f),align:r(u.align,f),justify:r(u.justify,f),alignContent:r(u.alignContent,f),justifyContent:r(u.justifyContent,f),variant:r(u.variant,f)}),[f,u]),m=(0,Y.useMemo)(()=>({templateColumns:r(a,f),templateRows:r(o,f),autoColumns:r(s,f),autoRows:r(c,f),areas:r(l,f)}),[f,a,o,s,c,l]),h=ve(p),g=ye(m),_=[h,t].filter(Boolean).join(` `),v={...g,...i};return(0,Y.createElement)(n||`div`,{ref:d,className:_,style:v},e)}),X.displayName=`GridContainer`,X.__docgenInfo={description:``,methods:[],displayName:`GridContainer`,props:{id:{required:!1,tsType:{name:`string`},description:``},inline:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Включение inline-grid вместо обычного grid
+
+Позволяет grid-контейнеру вести себя как строчный элемент,
+обтекаясь текстом и другими элементами. Полезно для встраивания grid-раскладки
+в текстовый поток или рядом с другими inline-элементами.
+
+Пример использования: кнопки с иконками и текстом, inline-формы, элементы навигации.
+
+@default false`},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Автоматическое размещение элементов по строкам (grid-auto-flow: row)
+
+Элементы заполняют каждую строку по порядку, переходя на новую строку при необходимости.
+Стандартное поведение CSS Grid.
+
+@default false`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Автоматическое размещение элементов по колонкам (grid-auto-flow: column)
+
+Элементы заполняют каждую колонку по порядку, переходя на новую колонку при необходимости.
+Полезно для вертикальных списков или когда важно сохранять порядок по вертикали.
+
+@default false`},dense:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Плотное размещение элементов (grid-auto-flow: dense)
+
+Система пытается заполнить все пустые ячейки, даже если это нарушает порядок элементов.
+Особенно полезно при использовании grid-column/grid-row span, чтобы избежать "дыр" в раскладке.
+
+@default false`},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<"none" | "xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы между grid-элементами
+
+Управляет расстоянием между строками и колонками одновременно.
+Использует предопределенные значения из дизайн-системы для согласованности интерфейсов.`},gapRow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы только между строками
+
+Позволяет установить разные расстояния для строк и колонок.
+Полезно когда вертикальные и горизонтальные отступы должны отличаться.
+
+Пример: карточки товаров где между рядами нужно больше места чем между колонками.`},gapColumn:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы только между колонками
+
+Устанавливает расстояние только между колонками grid-сетки.
+Используется вместе с gapRow для тонкого контроля над отступами.`},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<"start" | "center" | "end" | "stretch" | "baseline">`},description:`Выравнивание элементов по вертикальной оси (align-items)
+
+Определяет как элементы выравниваются внутри своих ячеек по вертикали.
+Применяется ко всем элементам grid-контейнера.`},justify:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch">`},description:`Выравнивание элементов по горизонтальной оси (justify-items)
+
+Определяет как элементы выравниваются внутри своих ячеек по горизонтали.
+Влияет на позиционирование контента внутри каждой grid-ячейки.`},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<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">`},description:`Выравнивание всего grid-контента по вертикали (align-content)
+
+Работает когда общая высота grid-элементов меньше высоты контейнера.
+Определяет распределение свободного вертикального пространства.`},justifyContent:{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<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">`},description:`Выравнивание всего grid-контента по горизонтали (justify-content)
+
+Работает когда общая ширина grid-элементов меньше ширины контейнера.
+Определяет распределение свободного горизонтального пространства.`},templateColumns:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`ResponsiveValue<GridTemplate>`},description:`Определение колонок сетки (grid-template-columns)
+
+Строка с CSS значениями для создания структуры колонок.
+Поддерживает все CSS-значения: фиксированные размеры, fr-единицы, repeat(), minmax(), auto-fit, auto-fill.
+
+Примеры:
+- "1fr 1fr 1fr" - 3 равные колонки
+- "15em 1fr" - фиксированный сайдбар + гибкое содержимое
+- "repeat(auto-fit, minmax(20em, 1fr))" - адаптивные карточки
+- "auto 1fr auto" - хедер-контент-футер`},templateRows:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`ResponsiveValue<GridTemplate>`},description:`Определение строк сетки (grid-template-rows)
+
+Строка с CSS значениями для создания структуры строк.
+Используется когда нужно явно контролировать высоту строк.
+
+Примеры:
+- "auto 1fr auto" - классический макет (хедер-контент-футер)
+- "10em 20em" - фиксированные высоты строк
+- "minmax(10em, auto)" - минимальная высота с возможностью роста`},autoColumns:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"auto" | "min-content" | "max-content" | "1fr" | string`,elements:[{name:`literal`,value:`"auto"`},{name:`literal`,value:`"min-content"`},{name:`literal`,value:`"max-content"`},{name:`literal`,value:`"1fr"`},{name:`string`}]}],raw:`ResponsiveValue<GridAuto>`},description:`Размер автоматически создаваемых колонок (grid-auto-columns)
+
+Определяет размер колонок которые создаются автоматически
+когда элементов больше чем явно объявленных колонок в templateColumns.
+
+Пример: если templateColumns="1fr 1fr", но элементов 5,
+autoColumns определит размер для 3-й и последующих колонок.`},autoRows:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"auto" | "min-content" | "max-content" | "1fr" | string`,elements:[{name:`literal`,value:`"auto"`},{name:`literal`,value:`"min-content"`},{name:`literal`,value:`"max-content"`},{name:`literal`,value:`"1fr"`},{name:`string`}]}],raw:`ResponsiveValue<GridAuto>`},description:`Размер автоматически создаваемых строк (grid-auto-rows)
+
+Определяет размер строк которые создаются автоматически
+когда элементов больше чем явно объявленных строк в templateRows.
+Часто используется с значениями minmax() для адаптивных высот.
+
+Пример: "minmax(10em, auto)" - минимальная высота 100px, растет по контенту.`},areas:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Именованные области сетки (grid-template-areas)
+
+Создает именованные области для семантической разметки.
+Позволяет легко создавать сложные макеты с понятной структурой.
+
+Формат: строки в кавычках, имена областей через пробелы.
+Пример:
+\`
+"header header"
+"sidebar content"
+"footer footer"
+\`
+Затем используйте <GridItem area="header"> для размещения.`},variant:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"single-column" | "auto-1fr" | "auto1fr-rows-auto"`,elements:[{name:`literal`,value:`"single-column"`},{name:`literal`,value:`"auto-1fr"`},{name:`literal`,value:`"auto1fr-rows-auto"`}]}],raw:`ResponsiveValue<"single-column" | "auto-1fr" | "auto1fr-rows-auto">`},description:`Предопределенные варианты раскладки
+
+Готовые решения для частых сценариев использования.
+Упрощают создание стандартных макетов без ручного указания templateColumns/templateRows.`},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы grid-контейнера
+
+Любые React-элементы которые будут отображаться внутри grid-раскладки.
+Рекомендуется использовать Grid.Item для лучшего контроля над позиционированием.`},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML-тег для рендеринга
+
+Позволяет изменить HTML-тег контейнера для семантической разметки.
+
+Примеры:
+- as="main" для основного контента
+- as="nav" для навигации
+- as="section" для секций контента
+- as="ul" для списков с grid-раскладкой
+
+@default "div"`},className:{required:!1,tsType:{name:`string`},description:`Дополнительные CSS-классы
+
+Позволяет добавить кастомные стили к grid-контейнеру.
+Используется для специфических случаев которые не покрываются пропсами компонента.`,defaultValue:{value:`""`,computed:!1}},style:{required:!1,tsType:{name:`CSSProperties`},description:`Инлайн-стили
+
+JavaScript-объект с CSS-свойствами для тонкого контроля над стилями.
+Используется когда нужно динамически вычислять стили или для свойств не покрытых пропсами.
+
+Важно: инлайн-стили имеют высший приоритет, переопределяя CSS-классы.`}}}})),Q,$,Ce=t((()=>{Q=e(n(),1),i(),Se(),$=(0,Q.forwardRef)(({children:e,className:t=``,as:n,style:i,area:a,column:o,row:s,...c},l)=>{let{activeBreakpoint:u}=ee(),d=(0,Q.useMemo)(()=>({...c,alignSelf:r(c.alignSelf,u),justifySelf:r(c.justifySelf,u)}),[u,c]),f=(0,Q.useMemo)(()=>({area:r(a,u),column:r(o,u),row:r(s,u)}),[u,a,o,s]),p=be(d),m=xe(f),h=[p,t].filter(Boolean).join(` `),g={...m,...i};return(0,Q.createElement)(n||`div`,{ref:l,className:h,style:g},e)}),$.displayName=`GridItem`,$.__docgenInfo={description:``,methods:[],displayName:`GridItem`,props:{area:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Именованная область для размещения элемента
+
+Связывает элемент с областью объявленной в GridContainer areas.
+Самый простой способ позиционирования в сложных макетах.
+
+Пример: если в контейнере areas включает "header", то area="header"
+разместит элемент в этой области.`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Позиционирование элемента в колонках
+
+CSS-значение для grid-column: начало / конец.
+Позволяет тонко контролировать размещение элемента в колонках.
+
+Примеры:
+- "1" - разместить в первой колонке
+- "1 / 3" - растянуть с первой по третью колонку
+- "span 2" - занять 2 колонки
+- "2 / span 3" - начать со второй, занять 3 колонки`},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Позиционирование элемента в строках
+
+CSS-значение для grid-row: начало / конец.
+Позволяет тонко контролировать размещение элемента в строках.
+
+Примеры:
+- "2" - разместить во второй строке
+- "1 / 4" - растянуть с первой по четвертую строку
+- "span 3" - занять 3 строки`},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<"start" | "center" | "end" | "stretch" | "baseline">`},description:`Индивидуальное вертикальное выравнивание элемента (align-self)
+
+Переопределяет выравнивание установленное в GridContainer align.
+Позволяет конкретному элементу иметь отличное от остальных выравнивание.
+
+Пример: в контейнере align="center", но для одного элемента alignSelf="start".`},justifySelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch">`},description:`Индивидуальное горизонтальное выравнивание элемента (justify-self)
+
+Переопределяет выравнивание установленное в GridContainer justify.
+Позволяет конкретному элементу иметь отличное от остальных выравнивание.
+
+Пример: в контейнере justify="stretch", но для кнопки justifySelf="center".`},children:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Контент внутри grid-элемента
+
+Любые React-элементы которые будут отображаться внутри ячейки grid.
+Может содержать текст, изображения, другие компоненты.`},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML-тег для рендеринга
+
+Позволяет изменить HTML-тег элемента для семантической разметки.
+
+Примеры:
+- as="li" для элементов списка
+- as="article" для карточек контента
+- as="header" для шапки области
+
+@default "div"`},className:{required:!1,tsType:{name:`string`},description:`Дополнительные CSS-классы
+
+Позволяет добавить кастомные стили к grid-элементу.
+Используется для специфического оформления конкретных ячеек сетки.`,defaultValue:{value:`""`,computed:!1}},style:{required:!1,tsType:{name:`CSSProperties`},description:`Инлайн-стили
+
+JavaScript-объект с CSS-свойствами для тонкого контроля над стилями элемента.
+Особенно полезно для динамических расчетов позиционирования или анимаций.`}}}})),we,Te=t((()=>{Z(),Ce(),we={Container:X,Item:$}}));export{Z as a,X as i,Te as n,Ce as r,we as t};