@ryuzaki13/react-foundation-ui 1.0.7 → 1.0.11

package/storybook-static/assets/Grid.stories-6WUp6Tof.js

@@ -0,0 +1,495 @@
+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"./Grid-y8wKyEwc.js";var o=e({Alignment:()=>m,AutoFlow:()=>p,BasicGrid:()=>f,ComplexTemplates:()=>_,Gaps:()=>h,GridAreas:()=>v,InlineGrid:()=>b,ItemPlacement:()=>y,PredefinedVariants:()=>g,RealWorld:()=>x,Responsive:()=>S,__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:{textAlign:`center`,fontWeight:`bold`,color:`white`,minHeight:`5em`,minWidth:`10em`,display:`flex`,alignItems:`center`,justifyContent:`center`},itemColors:[`#ff6b6b`,`#4ecdc4`,`#45b7d1`,`#96ceb4`,`#feca57`,`#ff9ff3`,`#54a0ff`,`#5f27cd`]},l=e=>c.itemColors[e%c.itemColors.length],u=({children:e,index:t=0,style:n})=>(0,s.jsx)(a.Item,{style:{...c.item,backgroundColor:l(t),...n},children:e}),d={title:`Shared/Layout/Grid`,component:a.Container,parameters:{layout:`padded`}},f={render:({children:e,...t})=>(0,s.jsx)(a.Container,{...t,templateColumns:`1fr 1fr 1fr`,style:c.container,children:e}),args:{children:(0,s.jsxs)(s.Fragment,{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)(u,{index:3,children:`4`}),(0,s.jsx)(u,{index:4,children:`5`}),(0,s.jsx)(u,{index:5,children:`6`})]})}},p={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Row (default)`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(3, 100px)`,templateRows:`repeat(2, 60px)`,gap:`sm`,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)(u,{index:3,children:`4`}),(0,s.jsx)(u,{index:4,children:`5`}),(0,s.jsx)(u,{index:5,children:`6`})]}),(0,s.jsx)(`h3`,{children:`Column`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(2, 100px)`,templateRows:`repeat(3, 60px)`,column:!0,gap:`sm`,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)(u,{index:3,children:`4`}),(0,s.jsx)(u,{index:4,children:`5`}),(0,s.jsx)(u,{index:5,children:`6`})]}),(0,s.jsx)(`h3`,{children:`Dense`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(4, 80px)`,templateRows:`repeat(3, 60px)`,dense:!0,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{gridColumn:`span 2`},children:`Span 2`}),(0,s.jsx)(u,{index:1,children:`2`}),(0,s.jsx)(u,{index:2,style:{gridRow:`span 2`},children:`Span 2`}),(0,s.jsx)(u,{index:3,children:`4`}),(0,s.jsx)(u,{index:4,children:`5`}),(0,s.jsx)(u,{index:5,children:`6`}),(0,s.jsx)(u,{index:6,children:`7`})]})]}),args:{children:void 0}},m={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Align Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h4`,{children:e}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,align:e,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{height:e===`stretch`?`auto`:`5em`},children:`Short`}),(0,s.jsx)(u,{index:1,style:{height:e===`stretch`?`auto`:`10em`},children:`Tall`}),(0,s.jsx)(u,{index:2,style:{height:e===`stretch`?`auto`:`8em`},children:`Medium`})]})]},e)),(0,s.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Justify Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h4`,{children:e}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(3, 20em)`,justify:e,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,s.jsx)(u,{index:1,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,s.jsx)(u,{index:2,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`})]})]},e))]}),args:{children:void 0}},h={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,{templateColumns:`repeat(3, 1fr)`,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,{templateColumns:`repeat(3, 1fr)`,gapRow:`lg`,gapColumn:`sm`,style:c.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},g={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)`}),(0,s.jsxs)(a.Container,{variant:`single-column`,style:{...c.container,height:`200px`},children:[(0,s.jsx)(u,{index:0,children:`Header (auto)`}),(0,s.jsx)(u,{index:1,children:`Content (1fr)`})]}),(0,s.jsx)(`h3`,{children:`Auto 1fr Rows (grid-auto-rows: 1fr)`}),(0,s.jsxs)(a.Container,{variant:`auto-1fr`,templateColumns:`1fr 1fr`,style:{...c.container,height:`150px`},children:[(0,s.jsx)(u,{index:0,children:`Equal`}),(0,s.jsx)(u,{index:1,children:`Height`})]}),(0,s.jsx)(`h3`,{children:`Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)`}),(0,s.jsxs)(a.Container,{variant:`auto1fr-rows-auto`,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`Label`}),(0,s.jsx)(u,{index:1,children:`Content that takes remaining space`}),(0,s.jsx)(u,{index:2,children:`Another`}),(0,s.jsx)(u,{index:3,children:`More content here`})]})]}),args:{children:void 0}},_={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Auto-fit with Minmax`}),(0,s.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(150px, 1fr))`,gap:`md`,style:c.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(u,{index:e,children:[`Card `,e]},e))}),(0,s.jsx)(`h3`,{children:`Fixed and Flexible Columns`}),(0,s.jsxs)(a.Container,{templateColumns:`200px 1fr 100px`,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`Sidebar`}),(0,s.jsx)(u,{index:1,children:`Main Content`}),(0,s.jsx)(u,{index:2,children:`Tools`})]}),(0,s.jsx)(`h3`,{children:`Masonry-like Layout`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,autoRows:`100px`,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{gridRow:`span 2`},children:`Tall`}),(0,s.jsx)(u,{index:1,children:`Normal`}),(0,s.jsx)(u,{index:2,children:`Normal`}),(0,s.jsx)(u,{index:3,style:{gridRow:`span 3`},children:`Very Tall`}),(0,s.jsx)(u,{index:4,children:`Normal`}),(0,s.jsx)(u,{index:5,style:{gridRow:`span 2`},children:`Tall`}),(0,s.jsx)(u,{index:6,children:`Normal`}),(0,s.jsx)(u,{index:7,children:`Normal`})]})]}),args:{children:void 0}},v={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Basic Layout with Areas`}),(0,s.jsxs)(a.Container,{areas:`
+          "header header"
+          "nav main"
+          "footer footer"
+        `,templateColumns:`200px 1fr`,templateRows:`auto 1fr auto`,gap:`md`,style:{...c.container,height:`300px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(u,{index:0,children:`Header`})}),(0,s.jsx)(a.Item,{area:`nav`,children:(0,s.jsx)(u,{index:1,children:`Navigation`})}),(0,s.jsx)(a.Item,{area:`main`,children:(0,s.jsx)(u,{index:2,children:`Main Content`})}),(0,s.jsx)(a.Item,{area:`footer`,children:(0,s.jsx)(u,{index:3,children:`Footer`})})]}),(0,s.jsx)(`h3`,{children:`Complex Areas Layout`}),(0,s.jsxs)(a.Container,{areas:`
+          "header header header"
+          "sidebar content ads"
+          "sidebar footer footer"
+        `,templateColumns:`150px 1fr 120px`,templateRows:`60px 1fr 60px`,gap:`sm`,style:{...c.container,height:`350px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(u,{index:0,children:`Header`})}),(0,s.jsx)(a.Item,{area:`sidebar`,children:(0,s.jsx)(u,{index:1,children:`Sidebar`})}),(0,s.jsx)(a.Item,{area:`content`,children:(0,s.jsx)(u,{index:2,children:`Content`})}),(0,s.jsx)(a.Item,{area:`ads`,children:(0,s.jsx)(u,{index:3,children:`Ads`})}),(0,s.jsx)(a.Item,{area:`footer`,children:(0,s.jsx)(u,{index:4,children:`Footer`})})]})]}),args:{children:void 0}},y={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Column and Row Span`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,templateRows:`repeat(3, 80px)`,gap:`sm`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{gridColumn:`span 2`},children:`Span 2 Columns`}),(0,s.jsx)(u,{index:1,children:`Normal`}),(0,s.jsx)(u,{index:2,children:`Normal`}),(0,s.jsx)(u,{index:3,style:{gridRow:`span 2`},children:`Span 2 Rows`}),(0,s.jsx)(u,{index:4,children:`Normal`}),(0,s.jsx)(u,{index:5,children:`Normal`}),(0,s.jsx)(u,{index:6,style:{gridColumn:`span 3`,gridRow:`span 2`},children:`Span 3 Columns & 2 Rows`})]}),(0,s.jsx)(`h3`,{children:`Self Alignment`}),(0,s.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,templateRows:`repeat(2, 100px)`,gap:`sm`,style:c.container,children:[(0,s.jsx)(a.Item,{alignSelf:`start`,children:(0,s.jsx)(u,{index:0,children:`Start`})}),(0,s.jsx)(a.Item,{alignSelf:`center`,children:(0,s.jsx)(u,{index:1,children:`Center`})}),(0,s.jsx)(a.Item,{alignSelf:`end`,children:(0,s.jsx)(u,{index:2,children:`End`})}),(0,s.jsx)(a.Item,{justifySelf:`start`,children:(0,s.jsx)(u,{index:3,style:{width:`80px`},children:`Start`})}),(0,s.jsx)(a.Item,{justifySelf:`center`,children:(0,s.jsx)(u,{index:4,style:{width:`80px`},children:`Center`})}),(0,s.jsx)(a.Item,{justifySelf:`end`,children:(0,s.jsx)(u,{index:5,style:{width:`80px`},children:`End`})})]})]}),args:{children:void 0}},b={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`p`,{children:[`This is text with`,(0,s.jsxs)(a.Container,{inline:!0,templateColumns:`repeat(2, auto)`,gap:`xs`,style:{margin:`0 8px`},children:[(0,s.jsx)(u,{index:0,children:`inline`}),(0,s.jsx)(u,{index:1,children:`grid`})]}),`elements inside.`]}),(0,s.jsxs)(`p`,{children:[`Another inline grid example:`,(0,s.jsxs)(a.Container,{inline:!0,templateColumns:`auto auto`,gap:`sm`,align:`center`,style:{margin:`0 8px`},children:[(0,s.jsx)(u,{index:2,style:{fontSize:`12px`,padding:`4px 8px`},children:`Small`}),(0,s.jsx)(u,{index:3,style:{fontSize:`12px`,padding:`4px 8px`},children:`Items`})]}),`in text flow.`]})]}),args:{children:void 0}},x={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Dashboard Layout`}),(0,s.jsxs)(a.Container,{areas:`
+          "header header header"
+          "stats stats sidebar"
+          "chart chart sidebar"
+          "table table sidebar"
+        `,templateColumns:`1fr 1fr 300px`,templateRows:`auto auto 1fr auto`,gap:`lg`,style:{...c.container,minHeight:`500px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(u,{index:0,children:`Dashboard Header`})}),(0,s.jsx)(a.Item,{area:`stats`,children:(0,s.jsx)(u,{index:1,children:`Statistics Cards`})}),(0,s.jsx)(a.Item,{area:`chart`,children:(0,s.jsx)(u,{index:2,children:`Main Chart`})}),(0,s.jsx)(a.Item,{area:`table`,children:(0,s.jsx)(u,{index:3,children:`Data Table`})}),(0,s.jsx)(a.Item,{area:`sidebar`,children:(0,s.jsx)(u,{index:4,children:`Sidebar Widgets`})})]}),(0,s.jsx)(`h3`,{children:`Product Grid`}),(0,s.jsx)(a.Container,{templateColumns:`repeat(auto-fill, minmax(200px, 1fr))`,autoRows:`minmax(250px, auto)`,gap:`md`,style:c.container,children:[1,2,3,4,5,6,7,8].map(e=>(0,s.jsx)(a.Item,{children:(0,s.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,height:`100%`,backgroundColor:l(e),display:`flex`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,color:`white`},children:[(0,s.jsxs)(`h4`,{children:[`Product `,e]}),(0,s.jsx)(`p`,{children:`Description`}),(0,s.jsx)(`button`,{style:{marginTop:`8px`,padding:`8px 16px`},children:`Buy Now`})]})},e))}),(0,s.jsx)(`h3`,{children:`Form Layout`}),(0,s.jsxs)(a.Container,{templateColumns:`auto 1fr`,autoRows:`auto`,gap:`md`,align:`center`,style:c.container,children:[(0,s.jsx)(u,{index:0,style:{justifySelf:`end`},children:`Name:`}),(0,s.jsx)(u,{index:1,children:`Input Field`}),(0,s.jsx)(u,{index:2,style:{justifySelf:`end`},children:`Email:`}),(0,s.jsx)(u,{index:3,children:`Input Field`}),(0,s.jsx)(u,{index:4,style:{justifySelf:`end`},children:`Message:`}),(0,s.jsx)(a.Item,{style:{gridColumn:`2`,alignSelf:`stretch`},children:(0,s.jsx)(u,{index:5,style:{height:`100%`},children:`Textarea`})})]})]}),args:{children:void 0}},S={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Adaptive Layout`}),(0,s.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(min(100%, 300px), 1fr))`,gap:`lg`,style:c.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(u,{index:e,children:[`Adaptive Card `,e]},e))})]}),args:{children:void 0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: ({
+    children,
+    ...args
+  }) => <Grid.Container {...args} templateColumns="1fr 1fr 1fr" style={demoStyles.container}>
+            {children}
+        </Grid.Container>,
+  args: {
+    children: <>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+                <DemoItem index={3}>4</DemoItem>
+                <DemoItem index={4}>5</DemoItem>
+                <DemoItem index={5}>6</DemoItem>
+            </>
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Row (default)</h3>
+            <Grid.Container templateColumns="repeat(3, 100px)" templateRows="repeat(2, 60px)" gap="sm" style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+                <DemoItem index={3}>4</DemoItem>
+                <DemoItem index={4}>5</DemoItem>
+                <DemoItem index={5}>6</DemoItem>
+            </Grid.Container>
+
+            <h3>Column</h3>
+            <Grid.Container templateColumns="repeat(2, 100px)" templateRows="repeat(3, 60px)" column gap="sm" style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+                <DemoItem index={3}>4</DemoItem>
+                <DemoItem index={4}>5</DemoItem>
+                <DemoItem index={5}>6</DemoItem>
+            </Grid.Container>
+
+            <h3>Dense</h3>
+            <Grid.Container templateColumns="repeat(4, 80px)" templateRows="repeat(3, 60px)" dense gap="sm" style={demoStyles.container}>
+                <DemoItem index={0} style={{
+        gridColumn: "span 2"
+      }}>
+                    Span 2
+                </DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2} style={{
+        gridRow: "span 2"
+      }}>
+                    Span 2
+                </DemoItem>
+                <DemoItem index={3}>4</DemoItem>
+                <DemoItem index={4}>5</DemoItem>
+                <DemoItem index={5}>6</DemoItem>
+                <DemoItem index={6}>7</DemoItem>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3 style={{
+      marginBlock: "1em"
+    }}>Align Items</h3>
+            {(["start", "center", "end", "stretch"] as const).map(align => <div key={align}>
+                    <h4>{align}</h4>
+                    <Grid.Container templateColumns="repeat(3, 1fr)" align={align} gap="sm" style={demoStyles.container}>
+                        <DemoItem index={0} style={{
+          height: align === "stretch" ? "auto" : "5em"
+        }}>
+                            Short
+                        </DemoItem>
+                        <DemoItem index={1} style={{
+          height: align === "stretch" ? "auto" : "10em"
+        }}>
+                            Tall
+                        </DemoItem>
+                        <DemoItem index={2} style={{
+          height: align === "stretch" ? "auto" : "8em"
+        }}>
+                            Medium
+                        </DemoItem>
+                    </Grid.Container>
+                </div>)}
+
+            <h3 style={{
+      marginBlock: "1em"
+    }}>Justify Items</h3>
+            {(["start", "center", "end", "stretch"] as const).map(justify => <div key={justify}>
+                    <h4>{justify}</h4>
+                    <Grid.Container templateColumns="repeat(3, 20em)" justify={justify} gap="sm" style={demoStyles.container}>
+                        <DemoItem index={0} style={{
+          width: justify === "stretch" ? "auto" : "10em"
+        }}>
+                            Item
+                        </DemoItem>
+                        <DemoItem index={1} style={{
+          width: justify === "stretch" ? "auto" : "10em"
+        }}>
+                            Item
+                        </DemoItem>
+                        <DemoItem index={2} style={{
+          width: justify === "stretch" ? "auto" : "10em"
+        }}>
+                            Item
+                        </DemoItem>
+                    </Grid.Container>
+                </div>)}
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
+                    <h3>Gap: {gap}</h3>
+                    <Grid.Container templateColumns="repeat(3, 1fr)" gap={gap} style={demoStyles.container}>
+                        {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                                Item {i}
+                            </DemoItem>)}
+                    </Grid.Container>
+                </div>)}
+
+            <h3>Different Row and Column Gaps</h3>
+            <Grid.Container templateColumns="repeat(3, 1fr)" gapRow="lg" gapColumn="sm" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)</h3>
+            <Grid.Container variant="single-column" style={{
+      ...demoStyles.container,
+      height: "200px"
+    }}>
+                <DemoItem index={0}>Header (auto)</DemoItem>
+                <DemoItem index={1}>Content (1fr)</DemoItem>
+            </Grid.Container>
+
+            <h3>Auto 1fr Rows (grid-auto-rows: 1fr)</h3>
+            <Grid.Container variant="auto-1fr" templateColumns="1fr 1fr" style={{
+      ...demoStyles.container,
+      height: "150px"
+    }}>
+                <DemoItem index={0}>Equal</DemoItem>
+                <DemoItem index={1}>Height</DemoItem>
+            </Grid.Container>
+
+            <h3>Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)</h3>
+            <Grid.Container variant="auto1fr-rows-auto" gap="sm" style={demoStyles.container}>
+                <DemoItem index={0}>Label</DemoItem>
+                <DemoItem index={1}>Content that takes remaining space</DemoItem>
+                <DemoItem index={2}>Another</DemoItem>
+                <DemoItem index={3}>More content here</DemoItem>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Auto-fit with Minmax</h3>
+            <Grid.Container templateColumns="repeat(auto-fit, minmax(150px, 1fr))" gap="md" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                        Card {i}
+                    </DemoItem>)}
+            </Grid.Container>
+
+            <h3>Fixed and Flexible Columns</h3>
+            <Grid.Container templateColumns="200px 1fr 100px" gap="sm" style={demoStyles.container}>
+                <DemoItem index={0}>Sidebar</DemoItem>
+                <DemoItem index={1}>Main Content</DemoItem>
+                <DemoItem index={2}>Tools</DemoItem>
+            </Grid.Container>
+
+            <h3>Masonry-like Layout</h3>
+            <Grid.Container templateColumns="repeat(4, 1fr)" autoRows="100px" gap="sm" style={demoStyles.container}>
+                <DemoItem index={0} style={{
+        gridRow: "span 2"
+      }}>
+                    Tall
+                </DemoItem>
+                <DemoItem index={1}>Normal</DemoItem>
+                <DemoItem index={2}>Normal</DemoItem>
+                <DemoItem index={3} style={{
+        gridRow: "span 3"
+      }}>
+                    Very Tall
+                </DemoItem>
+                <DemoItem index={4}>Normal</DemoItem>
+                <DemoItem index={5} style={{
+        gridRow: "span 2"
+      }}>
+                    Tall
+                </DemoItem>
+                <DemoItem index={6}>Normal</DemoItem>
+                <DemoItem index={7}>Normal</DemoItem>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Basic Layout with Areas</h3>
+            <Grid.Container areas={\`
+          "header header"
+          "nav main"
+          "footer footer"
+        \`} templateColumns="200px 1fr" templateRows="auto 1fr auto" gap="md" style={{
+      ...demoStyles.container,
+      height: "300px"
+    }}>
+                <Grid.Item area="header">
+                    <DemoItem index={0}>Header</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="nav">
+                    <DemoItem index={1}>Navigation</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="main">
+                    <DemoItem index={2}>Main Content</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="footer">
+                    <DemoItem index={3}>Footer</DemoItem>
+                </Grid.Item>
+            </Grid.Container>
+
+            <h3>Complex Areas Layout</h3>
+            <Grid.Container areas={\`
+          "header header header"
+          "sidebar content ads"
+          "sidebar footer footer"
+        \`} templateColumns="150px 1fr 120px" templateRows="60px 1fr 60px" gap="sm" style={{
+      ...demoStyles.container,
+      height: "350px"
+    }}>
+                <Grid.Item area="header">
+                    <DemoItem index={0}>Header</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="sidebar">
+                    <DemoItem index={1}>Sidebar</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="content">
+                    <DemoItem index={2}>Content</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="ads">
+                    <DemoItem index={3}>Ads</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="footer">
+                    <DemoItem index={4}>Footer</DemoItem>
+                </Grid.Item>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Column and Row Span</h3>
+            <Grid.Container templateColumns="repeat(4, 1fr)" templateRows="repeat(3, 80px)" gap="sm" style={demoStyles.container}>
+                <DemoItem index={0} style={{
+        gridColumn: "span 2"
+      }}>
+                    Span 2 Columns
+                </DemoItem>
+                <DemoItem index={1}>Normal</DemoItem>
+                <DemoItem index={2}>Normal</DemoItem>
+                <DemoItem index={3} style={{
+        gridRow: "span 2"
+      }}>
+                    Span 2 Rows
+                </DemoItem>
+                <DemoItem index={4}>Normal</DemoItem>
+                <DemoItem index={5}>Normal</DemoItem>
+                <DemoItem index={6} style={{
+        gridColumn: "span 3",
+        gridRow: "span 2"
+      }}>
+                    Span 3 Columns & 2 Rows
+                </DemoItem>
+            </Grid.Container>
+
+            <h3>Self Alignment</h3>
+            <Grid.Container templateColumns="repeat(3, 1fr)" templateRows="repeat(2, 100px)" gap="sm" style={demoStyles.container}>
+                <Grid.Item alignSelf="start">
+                    <DemoItem index={0}>Start</DemoItem>
+                </Grid.Item>
+                <Grid.Item alignSelf="center">
+                    <DemoItem index={1}>Center</DemoItem>
+                </Grid.Item>
+                <Grid.Item alignSelf="end">
+                    <DemoItem index={2}>End</DemoItem>
+                </Grid.Item>
+                <Grid.Item justifySelf="start">
+                    <DemoItem index={3} style={{
+          width: "80px"
+        }}>
+                        Start
+                    </DemoItem>
+                </Grid.Item>
+                <Grid.Item justifySelf="center">
+                    <DemoItem index={4} style={{
+          width: "80px"
+        }}>
+                        Center
+                    </DemoItem>
+                </Grid.Item>
+                <Grid.Item justifySelf="end">
+                    <DemoItem index={5} style={{
+          width: "80px"
+        }}>
+                        End
+                    </DemoItem>
+                </Grid.Item>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <p>
+                This is text with
+                <Grid.Container inline templateColumns="repeat(2, auto)" gap="xs" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={0}>inline</DemoItem>
+                    <DemoItem index={1}>grid</DemoItem>
+                </Grid.Container>
+                elements inside.
+            </p>
+
+            <p>
+                Another inline grid example:
+                <Grid.Container inline templateColumns="auto auto" gap="sm" align="center" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={2} style={{
+          fontSize: "12px",
+          padding: "4px 8px"
+        }}>
+                        Small
+                    </DemoItem>
+                    <DemoItem index={3} style={{
+          fontSize: "12px",
+          padding: "4px 8px"
+        }}>
+                        Items
+                    </DemoItem>
+                </Grid.Container>
+                in text flow.
+            </p>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Dashboard Layout</h3>
+            <Grid.Container areas={\`
+          "header header header"
+          "stats stats sidebar"
+          "chart chart sidebar"
+          "table table sidebar"
+        \`} templateColumns="1fr 1fr 300px" templateRows="auto auto 1fr auto" gap="lg" style={{
+      ...demoStyles.container,
+      minHeight: "500px"
+    }}>
+                <Grid.Item area="header">
+                    <DemoItem index={0}>Dashboard Header</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="stats">
+                    <DemoItem index={1}>Statistics Cards</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="chart">
+                    <DemoItem index={2}>Main Chart</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="table">
+                    <DemoItem index={3}>Data Table</DemoItem>
+                </Grid.Item>
+                <Grid.Item area="sidebar">
+                    <DemoItem index={4}>Sidebar Widgets</DemoItem>
+                </Grid.Item>
+            </Grid.Container>
+
+            <h3>Product Grid</h3>
+            <Grid.Container templateColumns="repeat(auto-fill, minmax(200px, 1fr))" autoRows="minmax(250px, auto)" gap="md" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8].map(i => <Grid.Item key={i}>
+                        <div style={{
+          border: "1px solid #ddd",
+          borderRadius: "8px",
+          padding: "16px",
+          height: "100%",
+          backgroundColor: getItemColor(i),
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          color: "white"
+        }}>
+                            <h4>Product {i}</h4>
+                            <p>Description</p>
+                            <button style={{
+            marginTop: "8px",
+            padding: "8px 16px"
+          }}>Buy Now</button>
+                        </div>
+                    </Grid.Item>)}
+            </Grid.Container>
+
+            <h3>Form Layout</h3>
+            <Grid.Container templateColumns="auto 1fr" autoRows="auto" gap="md" align="center" style={demoStyles.container}>
+                <DemoItem index={0} style={{
+        justifySelf: "end"
+      }}>
+                    Name:
+                </DemoItem>
+                <DemoItem index={1}>Input Field</DemoItem>
+
+                <DemoItem index={2} style={{
+        justifySelf: "end"
+      }}>
+                    Email:
+                </DemoItem>
+                <DemoItem index={3}>Input Field</DemoItem>
+
+                <DemoItem index={4} style={{
+        justifySelf: "end"
+      }}>
+                    Message:
+                </DemoItem>
+                <Grid.Item style={{
+        gridColumn: "2",
+        alignSelf: "stretch"
+      }}>
+                    <DemoItem index={5} style={{
+          height: "100%"
+        }}>
+                        Textarea
+                    </DemoItem>
+                </Grid.Item>
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {/* <h3>Responsive Columns</h3>
+             <Grid.Container
+                templateColumns={{
+                    mobile: "1fr",
+                    tablet: "repeat(2, 1fr)",
+                    desktop: "repeat(4, 1fr)"
+                }}
+                gap="md"
+                style={demoStyles.container}>
+                {[1, 2, 3, 4].map((i) => (
+                    <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>
+                ))}
+             </Grid.Container> */}
+
+            <h3>Adaptive Layout</h3>
+            <Grid.Container templateColumns="repeat(auto-fit, minmax(min(100%, 300px), 1fr))" gap="lg" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                        Adaptive Card {i}
+                    </DemoItem>)}
+            </Grid.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...S.parameters?.docs?.source}}},C=[`BasicGrid`,`AutoFlow`,`Alignment`,`Gaps`,`PredefinedVariants`,`ComplexTemplates`,`GridAreas`,`ItemPlacement`,`InlineGrid`,`RealWorld`,`Responsive`]}));w();export{m as Alignment,p as AutoFlow,f as BasicGrid,_ as ComplexTemplates,h as Gaps,v as GridAreas,b as InlineGrid,y as ItemPlacement,g as PredefinedVariants,x as RealWorld,S as Responsive,C as __namedExportsOrder,d as default,w as n,o as t};

package/storybook-static/assets/Input-B7DWcGCL.js

@@ -0,0 +1,3 @@
+import{c 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{a as i,i as a}from"./utils-CReRlw17.js";import{n as o,t as s}from"./lucide-react-CK2oyDtF.js";import{M as c,t as l}from"./formatters-yIBztcem.js";import{n as u,t as d}from"./ui.module-DS2qtZts.js";var f,p,m,h,g,_,v,y,b,x=t((()=>{f=`lRn5ye`,p=`ce5HAY`,m=`_8TObqB`,h=`Gx3Wbd`,g=`cpwaYo`,_=`itlmix`,v=`aITEGl`,y=`ekyJIt`,b={controlLayout:f,input:p,inputNumber:m,controlWithEndAdornment:h,controlEndAdornment:g,endAdornmentGroup:_,clearButton:v,error:y}}));function S({id:e,hasLabel:t,hasDescription:n,hasError:r}){let i=(0,C.useId)(),a=e??i,o=t?`${a}-label`:void 0,s=n?`${a}-description`:void 0,c=r?`${a}-error`:void 0;return{controlId:a,labelId:o,descriptionId:s,errorId:c,describedBy:[s,c].filter(Boolean).join(` `)||void 0}}var C,w=t((()=>{C=e(n(),1)}));function T({label:e,controlId:t,labelId:n}){return(0,F.jsx)(`label`,{id:n,htmlFor:t,className:u.uiLabel,children:e})}function E({label:e,description:t,size:n,disabled:r,className:a}){let{controlId:o,labelId:s,descriptionId:c}=S({hasLabel:e!=null,hasDescription:!!t});return(0,F.jsxs)(`div`,{className:i(u.uiElement,u.uiSizable,n&&u[n],u.disabled,a),"aria-disabled":r||void 0,children:[e&&(0,F.jsx)(T,{label:e,controlId:o,labelId:s}),t&&(0,F.jsx)(`p`,{id:c,className:u.uiDescription,children:t}),(0,F.jsx)(`div`,{className:i(u.uiInputControlFake,`skeletonLine`)})]})}function D({label:e,description:t,disabled:n,className:r,error:a,size:o,controlId:s,labelId:c,descriptionId:l,errorId:d,children:f}){return(0,F.jsxs)(`div`,{className:i(u.uiElement,u.uiSizable,o&&u[o],n&&u.disabled,r),"aria-disabled":n||void 0,children:[e&&(0,F.jsx)(T,{label:e,controlId:s,labelId:c}),t&&(0,F.jsx)(`p`,{id:l,className:u.uiDescription,children:t}),(0,F.jsxs)(`div`,{className:b.controlLayout,children:[f,a&&(0,F.jsx)(`p`,{id:d,className:b.error,role:`alert`,children:a})]})]})}function O({className:e,endAdornment:t,endAdornmentClassName:n,endAdornmentWidth:r,children:a}){let o=t!=null,s=o&&r?{"--input-end-adornment-width":r}:void 0;return(0,F.jsxs)(`div`,{className:i(b.controlLayout,e),style:s,children:[a({controlClassName:o?b.controlWithEndAdornment:void 0}),o&&(0,F.jsx)(`div`,{className:i(b.controlEndAdornment,n),children:t})]})}function k({onClick:e,disabled:t,className:n,ariaLabel:r=`Очистить значение`}){return(0,F.jsx)(`button`,{type:`button`,disabled:t||!e,className:i(b.clearButton,`flexCenter radiusSm`,n),onClick:e,"aria-label":r,children:(0,F.jsx)(o,{})})}function A(e,t,n){if(n)return n;if(e&&t)return`calc((var(--control-height) * 2) + var(--space-xs))`;if(e||t)return`var(--control-height)`}function j({endAdornment:e,onClear:t,disabled:n}){if(!(e==null&&!t))return(0,F.jsxs)(`div`,{className:b.endAdornmentGroup,children:[e,t&&(0,F.jsx)(k,{onClick:t,disabled:n})]})}function M({label:e,description:t,disabled:n,className:r,onClear:a,error:o,onClearError:s,onChange:c,value:l,size:d,allowedPattern:f,endAdornment:p,endAdornmentClassName:m,endAdornmentWidth:h,type:g=`text`,..._}){let[v,y]=(0,P.useState)(!1),x=e=>{let t=e.target.value;f!==void 0&&y(t!==``&&!f.test(t)),c(t),o&&s&&s()},C=!!(l&&l.length>0),w=C?o:void 0,{controlId:T,labelId:E,descriptionId:k,errorId:M,describedBy:N}=S({id:_.id,hasLabel:e!=null,hasDescription:!!t,hasError:!!w}),I=C&&(!!o||v);return(0,F.jsx)(D,{label:e,description:t,disabled:n,className:r,size:d,error:w,controlId:T,labelId:E,descriptionId:k,errorId:M,children:(0,F.jsx)(O,{endAdornment:j({endAdornment:p,onClear:a,disabled:n}),endAdornmentClassName:m,endAdornmentWidth:A(p!=null,!!a,h),children:({controlClassName:e})=>(0,F.jsx)(`input`,{..._,id:T,type:g,disabled:n,value:l,"aria-invalid":I||void 0,"aria-labelledby":E,"aria-describedby":N,"data-invalid":I?``:void 0,className:i(u.uiInputControl,b.input,e),onChange:x})})})}function N({label:e,description:t,disabled:n,className:r,onClear:a,error:o,onClearError:s,onChange:l,value:d,size:f,endAdornment:p,endAdornmentClassName:m,endAdornmentWidth:h,...g}){let _=g,{controlId:v,labelId:y,descriptionId:x,errorId:C,describedBy:w}=S({id:g.id,hasLabel:e!=null,hasDescription:!!t,hasError:!!o}),[T,E]=(0,P.useState)(()=>String(d)),k=(0,P.useEffectEvent)(e=>{E(e)});(0,P.useEffect)(()=>{k(d!==void 0&&typeof d==`number`&&!isNaN(d)?String(d):``)},[d]);let M=a?()=>{E(``),a()}:void 0,N=e=>{let t=e.target.value;E(t),l(c(t)),o&&s&&s()};return(0,F.jsx)(D,{label:e,description:t,disabled:n,className:r,size:f,error:o,controlId:v,labelId:y,descriptionId:x,errorId:C,children:(0,F.jsx)(O,{endAdornment:j({endAdornment:p,onClear:M,disabled:n}),endAdornmentClassName:m,endAdornmentWidth:A(p!=null,!!M,h),children:({controlClassName:e})=>(0,F.jsx)(`input`,{..._,id:v,type:`number`,inputMode:`decimal`,disabled:n,value:T,"aria-labelledby":y,"aria-describedby":w,className:i(u.uiInputControl,b.input,b.inputNumber,e),onChange:N})})})}var P,F,I,L=t((()=>{P=e(n(),1),l(),a(),s(),d(),x(),w(),F=r(),I=M,E.__docgenInfo={description:``,methods:[],displayName:`InputUILoading`},D.__docgenInfo={description:`Низкоуровневая оболочка поля ввода с общими элементами оформления.`,methods:[],displayName:`InputUI`,props:{className:{required:!1,tsType:{name:`string`},description:``},error:{required:!1,tsType:{name:`string`},description:``},controlId:{required:!1,tsType:{name:`string`},description:``},labelId:{required:!1,tsType:{name:`string`},description:``},descriptionId:{required:!1,tsType:{name:`string`},description:``},errorId:{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}},composes:[`Omit`]},O.__docgenInfo={description:``,methods:[],displayName:`InputControl`,props:{className:{required:!1,tsType:{name:`string`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(props: InputControlRenderProps) => ReactNode`,signature:{arguments:[{type:{name:`InputControlRenderProps`},name:`props`}],return:{name:`ReactNode`}}},description:``}}},k.__docgenInfo={description:``,methods:[],displayName:`InputClearButton`,props:{onClick:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Очистить значение"`,computed:!1}}}},M.__docgenInfo={description:`Базовое текстовое поле ввода для строковых значений.`,methods:[],displayName:`InputText`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`T`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``},type:{required:!1,tsType:{name:`union`,raw:`"email" | "password" | "search" | "tel" | "text" | "url"`,elements:[{name:`literal`,value:`"email"`},{name:`literal`,value:`"password"`},{name:`literal`,value:`"search"`},{name:`literal`,value:`"tel"`},{name:`literal`,value:`"text"`},{name:`literal`,value:`"url"`}]},description:``,defaultValue:{value:`"text"`,computed:!1}},allowedPattern:{required:!1,tsType:{name:`RegExp`},description:`Регулярное выражение для валидации всего введённого значения.
+При несоответствии поле подсвечивается как невалидное, но текст не удаляется.
+Пример: \`/^\\d*$/\``}},composes:[`Omit`]},N.__docgenInfo={description:`Числовое поле ввода с нормализацией значения и защитой от промежуточного невалидного ввода.`,methods:[],displayName:`InputNumber`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},defaultValue:{required:!1,tsType:{name:`T`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`]}}));export{M as a,L as c,N as i,w as l,k as n,D as o,O as r,E as s,I as t,S as u};

package/storybook-static/assets/Input-BioMOZju.css

@@ -0,0 +1 @@
+.lRn5ye{width:100%;position:relative}.ce5HAY{height:var(--control-height);width:100%;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-md);--ui-color:var(--content-0);--ui-color-hover:var(--content-0);--ui-color-active:var(--content-0)}._8TObqB{appearance:textfield}._8TObqB::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._8TObqB::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.Gx3Wbd{padding-right:calc(var(--input-end-adornment-width,var(--control-height)) + var(--space-sm))}.cpwaYo{height:100%;max-width:calc(100% - var(--space-md));justify-content:flex-end;align-items:center;display:flex;position:absolute;top:0;right:0}.itlmix{align-items:center;gap:var(--space-xs);display:flex}.aITEGl{width:1.75em;height:1.75em;color:var(--content-1);transition:color var(--transition-fast) ease, background-color var(--transition-fast) ease;background:0 0;border:none}.aITEGl:hover{color:var(--content-accent);background-color:var(--status-info-soft)}.aITEGl:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}.aITEGl:disabled{pointer-events:none;opacity:.25}.ekyJIt{z-index:11;bottom:calc(var(--space-xs) * -1);color:var(--status-error-on-fill);background:var(--status-error-fill);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);box-shadow:var(--shadow-sm);opacity:.9;position:absolute;left:0;right:0;transform:translateY(100%)}

package/storybook-static/assets/Input-yly8wxYE.js

@@ -0,0 +1,39 @@
+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{NumberControlled as p,PatternValidation as m,TextControlled as h,WithError as g,n as _,t as v}from"./Input.stories-CkVqvY-C.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(c,{children:`Input`}),`
+`,(0,x.jsx)(i,{children:`Базовое текстовое и числовое поле для форм, фильтров и служебных панелей`}),`
+`,(0,x.jsx)(o.p,{children:`Input уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(u,{}),`
+`,(0,x.jsx)(n,{of:h}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Input } from "@/shared/ui";
+
+export function Example() {
+	const [value, setValue] = useState("");
+
+	return <Input label="Название" value={value} onChange={setValue} placeholder="Введите значение" />;
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,x.jsx)(o.h3,{id:`контролируемое-текстовое-поле`,children:`Контролируемое текстовое поле`}),`
+`,(0,x.jsx)(o.p,{children:`Контролируемое текстовое поле.`}),`
+`,(0,x.jsx)(l,{of:h}),`
+`,(0,x.jsx)(o.h3,{id:`контролируемое-числовое-поле`,children:`Контролируемое числовое поле`}),`
+`,(0,x.jsx)(o.p,{children:`Контролируемое числовое поле.`}),`
+`,(0,x.jsx)(l,{of:p}),`
+`,(0,x.jsx)(o.h3,{id:`сценарий-с-валидацией-формата`,children:`Сценарий с валидацией формата`}),`
+`,(0,x.jsx)(o.p,{children:`Сценарий с валидацией формата.`}),`
+`,(0,x.jsx)(l,{of:m}),`
+`,(0,x.jsx)(o.h3,{id:`состояние-с-ошибкой`,children:`Состояние с ошибкой`}),`
+`,(0,x.jsx)(o.p,{children:`Состояние с ошибкой.`}),`
+`,(0,x.jsx)(l,{of:g}),`
+`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(s,{of:v}),`
+`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};

package/storybook-static/assets/Input.stories-CkVqvY-C.js

@@ -0,0 +1,38 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,c as o,i as s}from"./Input-B7DWcGCL.js";var c=e({NumberControlled:()=>p,PatternValidation:()=>m,TextControlled:()=>f,WithError:()=>h,__namedExportsOrder:()=>g,default:()=>d}),l,u,d,f,p,m,h,g,_=n((()=>{l=t(r(),1),o(),u=i(),d={title:`Shared/UI/Input`,component:a,args:{value:``,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Плейсхолдер нативного поля ввода.`,control:`text`},value:{description:`Текущее значение поля.`,control:`text`},onChange:{description:`Вызывается при изменении значения.`,control:!1},onClear:{description:`Callback кнопки очистки справа.`,control:!1},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Вызывается при вводе для сброса внешней ошибки.`,control:!1},disabled:{description:`Блокирует редактирование.`,control:`boolean`},size:{description:`Размер поля и подписи.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},allowedPattern:{description:`Регулярное выражение для валидации введенной строки.`,control:!1}}},f={render:e=>{let[t,n]=(0,l.useState)(e.value??``);return(0,u.jsx)(a,{...e,value:t,onChange:n,onClear:()=>n(``)})},args:{label:`Наименование`,description:`Пример обычного текстового поля.`,placeholder:`Введите значение`,value:``,size:`md`}},p={render:()=>{let[e,t]=(0,l.useState)(25);return(0,u.jsx)(s,{label:`Количество`,description:`Числовой ввод с min/max.`,placeholder:`0`,value:e,min:0,max:100,onChange:t,onClear:()=>t(0)})},args:{value:void 0}},m={render:()=>{let[e,t]=(0,l.useState)(``);return(0,u.jsx)(a,{label:`Только цифры`,description:"`allowedPattern` подсвечивает невалидный ввод.",placeholder:`12345`,value:e,onChange:t,allowedPattern:/^\d*$/})},args:{value:void 0}},h={render:()=>{let[e,t]=(0,l.useState)(`admin`),[n,r]=(0,l.useState)(`Логин уже занят`);return(0,u.jsx)(a,{label:`Логин`,value:e,error:n,onChange:t,onClear:()=>t(``),onClearError:()=>r(``)})},args:{value:void 0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [value, setValue] = useState(args.value ?? "");
+    return <InputText {...args} value={value} onChange={setValue} onClear={() => setValue("")} />;
+  },
+  args: {
+    label: "Наименование",
+    description: "Пример обычного текстового поля.",
+    placeholder: "Введите значение",
+    value: "",
+    size: "md"
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<number | undefined>(25);
+    return <InputNumber label="Количество" description="Числовой ввод с min/max." placeholder="0" value={value} min={0} max={100} onChange={setValue} onClear={() => setValue(0)} />;
+  },
+  args: {
+    value: undefined
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState("");
+    return <InputText label="Только цифры" description="\`allowedPattern\` подсвечивает невалидный ввод." placeholder="12345" value={value} onChange={setValue} allowedPattern={/^\\d*$/} />;
+  },
+  args: {
+    value: undefined
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState("admin");
+    const [error, setError] = useState("Логин уже занят");
+    return <InputText label="Логин" value={value} error={error} onChange={setValue} onClear={() => setValue("")} onClearError={() => setError("")} />;
+  },
+  args: {
+    value: undefined
+  }
+}`,...h.parameters?.docs?.source}}},g=[`TextControlled`,`NumberControlled`,`PatternValidation`,`WithError`]}));_();export{p as NumberControlled,m as PatternValidation,f as TextControlled,h as WithError,g as __namedExportsOrder,d as default,_ as n,c as t};

package/storybook-static/assets/InputDateTime-Cv8gmBe0.css

@@ -0,0 +1 @@
+.t1iysX{font-family:var(--font-family-mono);color:inherit;text-align:center;caret-color:var(--content-0);font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;margin:0;padding:0}.t1iysX::placeholder{color:var(--content-2)}.t1iysX::selection{background-color:var(--focus-ring);color:var(--surface-0)}.t1iysX::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.t1iysX::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.t1iysX:disabled{opacity:.25}._-4oX-p{-webkit-user-select:none;user-select:none;color:var(--content-2);flex-shrink:0}._-4oX-p[data-disabled]{opacity:.25}