@ryuzaki13/react-foundation-ui 1.5.6 → 1.5.7

package/storybook-static/assets/{Grid.stories-CpCGadoX.js → Grid.stories-DijrLN9C.js}

@@ -1,17 +1,17 @@
-import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-DBSrNt2a.js";import{n as i,t as a}from"./Grid-BCzygAqy.js";var o=t({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;function w(){return(w=e((()=>{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:`
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-CZ0KI0zu.js";import{n as i,t as a}from"./Grid-BCzygAqy.js";var o=t({Alignment:()=>h,AutoFlow:()=>m,BasicGrid:()=>p,ComplexTemplates:()=>v,Gaps:()=>g,GridAreas:()=>y,InlineGrid:()=>x,ItemPlacement:()=>b,PredefinedVariants:()=>_,RealWorld:()=>S,Responsive:()=>C,__namedExportsOrder:()=>w,default:()=>f}),s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w;function T(){return(T=e((()=>{n(),i(),s=r(),{useArgs:c}=__STORYBOOK_MODULE_PREVIEW_API__,l={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`]},u=e=>l.itemColors[e%l.itemColors.length],d=({children:e,index:t=0,style:n})=>(0,s.jsx)(a.Item,{style:{...l.item,backgroundColor:u(t),...n},children:e}),f={title:`Shared/Layout/Grid`,component:a.Container,args:{gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=c();return(0,s.jsx)(e,{args:t})}],argTypes:{inline:{description:`Использует inline-grid вместо grid.`,control:`boolean`},row:{description:`Автоматически размещает элементы по строкам.`,control:`boolean`},column:{description:`Автоматически размещает элементы по колонкам.`,control:`boolean`},dense:{description:`Заполняет свободные ячейки плотным auto-flow.`,control:`boolean`},gap:{description:`Общий интервал между ячейками.`,control:`select`,options:[`none`,`xs`,`sm`,`md`,`lg`,`xl`]},gapRow:{description:`Интервал между строками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},gapColumn:{description:`Интервал между колонками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},align:{description:`Выравнивание содержимого ячеек по вертикали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`baseline`]},justify:{description:`Выравнивание содержимого ячеек по горизонтали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`]},alignContent:{description:`Распределение всей сетки по вертикали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},justifyContent:{description:`Распределение всей сетки по горизонтали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},templateColumns:{description:`Шаблон колонок CSS Grid.`,control:`text`},templateRows:{description:`Шаблон строк CSS Grid.`,control:`text`},autoColumns:{description:`Размер автоматически созданных колонок.`,control:`text`},autoRows:{description:`Размер автоматически созданных строк.`,control:`text`},areas:{description:`Именованные области grid-template-areas.`,control:`text`},variant:{description:`Готовый вариант раскладки.`,control:`select`,options:[`single-column`,`auto-1fr`,`auto1fr-rows-auto`]},as:{description:`Семантический HTML-тег контейнера.`,control:`select`,options:[`div`,`section`,`main`,`nav`,`ul`]},children:{description:`Содержимое grid-контейнера.`,control:!1}}},p={render:({children:e,...t})=>(0,s.jsx)(a.Container,{...t,templateColumns:`1fr 1fr 1fr`,style:l.container,children:e}),args:{children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(d,{index:0,children:`1`}),(0,s.jsx)(d,{index:1,children:`2`}),(0,s.jsx)(d,{index:2,children:`3`}),(0,s.jsx)(d,{index:3,children:`4`}),(0,s.jsx)(d,{index:4,children:`5`}),(0,s.jsx)(d,{index:5,children:`6`})]})}},m={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:l.container,children:[(0,s.jsx)(d,{index:0,children:`1`}),(0,s.jsx)(d,{index:1,children:`2`}),(0,s.jsx)(d,{index:2,children:`3`}),(0,s.jsx)(d,{index:3,children:`4`}),(0,s.jsx)(d,{index:4,children:`5`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,children:`1`}),(0,s.jsx)(d,{index:1,children:`2`}),(0,s.jsx)(d,{index:2,children:`3`}),(0,s.jsx)(d,{index:3,children:`4`}),(0,s.jsx)(d,{index:4,children:`5`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,style:{gridColumn:`span 2`},children:`Span 2`}),(0,s.jsx)(d,{index:1,children:`2`}),(0,s.jsx)(d,{index:2,style:{gridRow:`span 2`},children:`Span 2`}),(0,s.jsx)(d,{index:3,children:`4`}),(0,s.jsx)(d,{index:4,children:`5`}),(0,s.jsx)(d,{index:5,children:`6`}),(0,s.jsx)(d,{index:6,children:`7`})]})]}),args:{children:void 0}},h={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:l.container,children:[(0,s.jsx)(d,{index:0,style:{height:e===`stretch`?`auto`:`5em`},children:`Short`}),(0,s.jsx)(d,{index:1,style:{height:e===`stretch`?`auto`:`10em`},children:`Tall`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,s.jsx)(d,{index:1,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,s.jsx)(d,{index:2,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`})]})]},e))]}),args:{children:void 0}},g={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:l.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(d,{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:l.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(d,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},_={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:{...l.container,height:`200px`},children:[(0,s.jsx)(d,{index:0,children:`Header (auto)`}),(0,s.jsx)(d,{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:{...l.container,height:`150px`},children:[(0,s.jsx)(d,{index:0,children:`Equal`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,children:`Label`}),(0,s.jsx)(d,{index:1,children:`Content that takes remaining space`}),(0,s.jsx)(d,{index:2,children:`Another`}),(0,s.jsx)(d,{index:3,children:`More content here`})]})]}),args:{children:void 0}},v={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:l.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,children:`Sidebar`}),(0,s.jsx)(d,{index:1,children:`Main Content`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(d,{index:0,style:{gridRow:`span 2`},children:`Tall`}),(0,s.jsx)(d,{index:1,children:`Normal`}),(0,s.jsx)(d,{index:2,children:`Normal`}),(0,s.jsx)(d,{index:3,style:{gridRow:`span 3`},children:`Very Tall`}),(0,s.jsx)(d,{index:4,children:`Normal`}),(0,s.jsx)(d,{index:5,style:{gridRow:`span 2`},children:`Tall`}),(0,s.jsx)(d,{index:6,children:`Normal`}),(0,s.jsx)(d,{index:7,children:`Normal`})]})]}),args:{children:void 0}},y={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:`
+        `,templateColumns:`200px 1fr`,templateRows:`auto 1fr auto`,gap:`md`,style:{...l.container,height:`300px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(d,{index:0,children:`Header`})}),(0,s.jsx)(a.Item,{area:`nav`,children:(0,s.jsx)(d,{index:1,children:`Navigation`})}),(0,s.jsx)(a.Item,{area:`main`,children:(0,s.jsx)(d,{index:2,children:`Main Content`})}),(0,s.jsx)(a.Item,{area:`footer`,children:(0,s.jsx)(d,{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:`
+        `,templateColumns:`150px 1fr 120px`,templateRows:`60px 1fr 60px`,gap:`sm`,style:{...l.container,height:`350px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(d,{index:0,children:`Header`})}),(0,s.jsx)(a.Item,{area:`sidebar`,children:(0,s.jsx)(d,{index:1,children:`Sidebar`})}),(0,s.jsx)(a.Item,{area:`content`,children:(0,s.jsx)(d,{index:2,children:`Content`})}),(0,s.jsx)(a.Item,{area:`ads`,children:(0,s.jsx)(d,{index:3,children:`Ads`})}),(0,s.jsx)(a.Item,{area:`footer`,children:(0,s.jsx)(d,{index:4,children:`Footer`})})]})]}),args:{children:void 0}},b={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:l.container,children:[(0,s.jsx)(d,{index:0,style:{gridColumn:`span 2`},children:`Span 2 Columns`}),(0,s.jsx)(d,{index:1,children:`Normal`}),(0,s.jsx)(d,{index:2,children:`Normal`}),(0,s.jsx)(d,{index:3,style:{gridRow:`span 2`},children:`Span 2 Rows`}),(0,s.jsx)(d,{index:4,children:`Normal`}),(0,s.jsx)(d,{index:5,children:`Normal`}),(0,s.jsx)(d,{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:l.container,children:[(0,s.jsx)(a.Item,{alignSelf:`start`,children:(0,s.jsx)(d,{index:0,children:`Start`})}),(0,s.jsx)(a.Item,{alignSelf:`center`,children:(0,s.jsx)(d,{index:1,children:`Center`})}),(0,s.jsx)(a.Item,{alignSelf:`end`,children:(0,s.jsx)(d,{index:2,children:`End`})}),(0,s.jsx)(a.Item,{justifySelf:`start`,children:(0,s.jsx)(d,{index:3,style:{width:`80px`},children:`Start`})}),(0,s.jsx)(a.Item,{justifySelf:`center`,children:(0,s.jsx)(d,{index:4,style:{width:`80px`},children:`Center`})}),(0,s.jsx)(a.Item,{justifySelf:`end`,children:(0,s.jsx)(d,{index:5,style:{width:`80px`},children:`End`})})]})]}),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,templateColumns:`repeat(2, auto)`,gap:`xs`,style:{margin:`0 8px`},children:[(0,s.jsx)(d,{index:0,children:`inline`}),(0,s.jsx)(d,{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)(d,{index:2,style:{fontSize:`12px`,padding:`4px 8px`},children:`Small`}),(0,s.jsx)(d,{index:3,style:{fontSize:`12px`,padding:`4px 8px`},children:`Items`})]}),`in text flow.`]})]}),args:{children:void 0}},S={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:`{
+        `,templateColumns:`1fr 1fr 300px`,templateRows:`auto auto 1fr auto`,gap:`lg`,style:{...l.container,minHeight:`500px`},children:[(0,s.jsx)(a.Item,{area:`header`,children:(0,s.jsx)(d,{index:0,children:`Dashboard Header`})}),(0,s.jsx)(a.Item,{area:`stats`,children:(0,s.jsx)(d,{index:1,children:`Statistics Cards`})}),(0,s.jsx)(a.Item,{area:`chart`,children:(0,s.jsx)(d,{index:2,children:`Main Chart`})}),(0,s.jsx)(a.Item,{area:`table`,children:(0,s.jsx)(d,{index:3,children:`Data Table`})}),(0,s.jsx)(a.Item,{area:`sidebar`,children:(0,s.jsx)(d,{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:l.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:u(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:l.container,children:[(0,s.jsx)(d,{index:0,style:{justifySelf:`end`},children:`Name:`}),(0,s.jsx)(d,{index:1,children:`Input Field`}),(0,s.jsx)(d,{index:2,style:{justifySelf:`end`},children:`Email:`}),(0,s.jsx)(d,{index:3,children:`Input Field`}),(0,s.jsx)(d,{index:4,style:{justifySelf:`end`},children:`Message:`}),(0,s.jsx)(a.Item,{style:{gridColumn:`2`,alignSelf:`stretch`},children:(0,s.jsx)(d,{index:5,style:{height:`100%`},children:`Textarea`})})]})]}),args:{children:void 0}},C={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:l.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(d,{index:e,children:[`Adaptive Card `,e]},e))})]}),args:{children:void 0}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: ({
     children,
     ...args
@@ -28,7 +28,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
                 <DemoItem index={5}>6</DemoItem>
             </>
   }
-}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.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}>
@@ -72,7 +72,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             <h3 style={{
       marginBlock: "1em"
@@ -125,7 +125,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
                     <h3>Gap: {gap}</h3>
@@ -146,7 +146,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.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={{
@@ -177,7 +177,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.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}>
@@ -220,7 +220,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             <h3>Basic Layout with Areas</h3>
             <Grid.Container areas={\`
@@ -274,7 +274,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.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}>
@@ -337,7 +337,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             <p>
                 This is text with
@@ -374,7 +374,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             <h3>Dashboard Layout</h3>
             <Grid.Container areas={\`
@@ -464,7 +464,7 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
   render: () => <div>
             {/* <h3>Responsive Columns</h3>
              <Grid.Container
@@ -492,4 +492,4 @@ import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./r
   args: {
     children: undefined
   }
-}`,...S.parameters?.docs?.source}}},C=[`BasicGrid`,`AutoFlow`,`Alignment`,`Gaps`,`PredefinedVariants`,`ComplexTemplates`,`GridAreas`,`ItemPlacement`,`InlineGrid`,`RealWorld`,`Responsive`]})))()}export{h as a,b as c,x as d,S as f,_ as i,y as l,p as n,v as o,w as p,f as r,o as s,m as t,g as u};
+}`,...C.parameters?.docs?.source}}},w=[`BasicGrid`,`AutoFlow`,`Alignment`,`Gaps`,`PredefinedVariants`,`ComplexTemplates`,`GridAreas`,`ItemPlacement`,`InlineGrid`,`RealWorld`,`Responsive`]})))()}export{g as a,x as c,S as d,C as f,v as i,b as l,m as n,y as o,T as p,p as r,o as s,h as t,_ as u};

package/storybook-static/assets/{ImageCropper.stories-CQZ6x_Ob.js → ImageCropper.stories-BeJRCTBT.js}

@@ -1,4 +1,4 @@
-import{n as e,o as t,t as n}from"./rolldown-runtime-C0FnF6B9.js";import{t as r}from"./react-C21x__mS.js";import{n as i}from"./iframe-DBSrNt2a.js";var a=n(((e,t)=>{var n=!1,r,i,a,o,s,c,l,u,d,f,p,m,h,g,_;function v(){if(!n){n=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),v=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(m=/\b(iPhone|iP[ao]d)/.exec(e),h=/\b(iP[ao]d)/.exec(e),f=/Android/i.exec(e),g=/FBAN\/\w+;/i.exec(e),_=/Mobile/i.exec(e),p=!!/Win64/.exec(e),t){r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN,r&&document&&document.documentMode&&(r=document.documentMode);var y=/(?:Trident\/(\d+.\d+))/.exec(e);c=y?parseFloat(y[1])+4:r,i=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,o=t[4]?parseFloat(t[4]):NaN,o?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e),s=t&&t[1]?parseFloat(t[1]):NaN):s=NaN}else r=i=a=s=o=NaN;if(v){if(v[1]){var b=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);l=!b||parseFloat(b[1].replace(`_`,`.`))}else l=!1;u=!!v[2],d=!!v[3]}else l=u=d=!1}}var y={ie:function(){return v()||r},ieCompatibilityMode:function(){return v()||c>r},ie64:function(){return y.ie()&&p},firefox:function(){return v()||i},opera:function(){return v()||a},webkit:function(){return v()||o},safari:function(){return y.webkit()},chrome:function(){return v()||s},windows:function(){return v()||u},osx:function(){return v()||l},linux:function(){return v()||d},iphone:function(){return v()||m},mobile:function(){return v()||m||h||f||_},nativeApp:function(){return v()||g},android:function(){return v()||f},ipad:function(){return v()||h}};t.exports=y})),o=n(((e,t)=>{var n=!!(typeof window<`u`&&window.document&&window.document.createElement);t.exports={canUseDOM:n,canUseWorkers:typeof Worker<`u`,canUseEventListeners:n&&!!(window.addEventListener||window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n}})),s=n(((e,t)=>{var n=o(),r;n.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature(``,``)!==!0);function i(e,t){if(!n.canUseDOM||t&&!(`addEventListener`in document))return!1;var i=`on`+e,a=i in document;if(!a){var o=document.createElement(`div`);o.setAttribute(i,`return;`),a=typeof o[i]==`function`}return!a&&r&&e===`wheel`&&(a=document.implementation.hasFeature(`Events.wheel`,`3.0`)),a}t.exports=i})),c=n(((e,t)=>{var n=a(),r=s(),i=10,o=40,c=800;function l(e){var t=0,n=0,r=0,a=0;return`detail`in e&&(n=e.detail),`wheelDelta`in e&&(n=-e.wheelDelta/120),`wheelDeltaY`in e&&(n=-e.wheelDeltaY/120),`wheelDeltaX`in e&&(t=-e.wheelDeltaX/120),`axis`in e&&e.axis===e.HORIZONTAL_AXIS&&(t=n,n=0),r=t*i,a=n*i,`deltaY`in e&&(a=e.deltaY),`deltaX`in e&&(r=e.deltaX),(r||a)&&e.deltaMode&&(e.deltaMode==1?(r*=o,a*=o):(r*=c,a*=c)),r&&!t&&(t=r<1?-1:1),a&&!n&&(n=a<1?-1:1),{spinX:t,spinY:n,pixelX:r,pixelY:a}}l.getEventType=function(){return n.firefox()?`DOMMouseScroll`:r(`wheel`)?`wheel`:`mousewheel`},t.exports=l})),l=n(((e,t)=>{t.exports=c()}));function u(e){"@babel/helpers - typeof";return u=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},u(e)}function d(e,t){if(u(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(u(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function f(e){var t=d(e,`string`);return u(t)==`symbol`?t:t+``}function p(e,t,n){return(t=f(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?m(Object(n),!0).forEach(function(t){p(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function g(e,t,n,r,i,a=0){let{width:o,height:s}=O(e,t,a),c=Math.min(o,n),l=Math.min(s,r);return c>l*i?{width:l*i,height:l}:{width:c,height:c/i}}function _(e){return e.width>e.height?e.width/e.naturalWidth:e.height/e.naturalHeight}function v(e,t,n,r,i=0){let{width:a,height:o}=O(t.width,t.height,i);return{x:y(e.x,a,n.width,r),y:y(e.y,o,n.height,r)}}function y(e,t,n,r){let i=Math.abs(t*r/2-n/2);return k(e,-i,i)}function b(e,t){return Math.sqrt((e.y-t.y)**2+(e.x-t.x)**2)}function x(e,t){return Math.atan2(t.y-e.y,t.x-e.x)*180/Math.PI}function S(e,t,n,r,i,a=0,o=!0){let s=o?C:w,c=O(t.width,t.height,a),l=O(t.naturalWidth,t.naturalHeight,a),u={x:s(100,((c.width-n.width/i)/2-e.x/i)/c.width*100),y:s(100,((c.height-n.height/i)/2-e.y/i)/c.height*100),width:s(100,n.width/c.width*100/i),height:s(100,n.height/c.height*100/i)},d=Math.round(s(l.width,u.width*l.width/100)),f=Math.round(s(l.height,u.height*l.height/100)),p=l.width>=l.height*r?{width:Math.round(f*r),height:f}:{width:d,height:Math.round(d/r)};return{croppedAreaPercentages:u,croppedAreaPixels:h(h({},p),{},{x:Math.round(s(l.width-p.width,u.x*l.width/100)),y:Math.round(s(l.height-p.height,u.y*l.height/100))})}}function C(e,t){return Math.min(e,Math.max(0,t))}function w(e,t){return t}function T(e,t,n,r,i,a){let o=O(t.width,t.height,n),s=k(r.width/o.width*(100/e.width),i,a);return{crop:{x:s*o.width/2-r.width/2-o.width*s*(e.x/100),y:s*o.height/2-r.height/2-o.height*s*(e.y/100)},zoom:s}}function E(e,t,n){let r=_(t);return n.height>n.width?n.height/(e.height*r):n.width/(e.width*r)}function ee(e,t,n=0,r,i,a){let o=O(t.naturalWidth,t.naturalHeight,n),s=k(E(e,t,r),i,a),c=r.height>r.width?r.height/e.height:r.width/e.width;return{crop:{x:((o.width-e.width)/2-e.x)*c,y:((o.height-e.height)/2-e.y)*c},zoom:s}}function D(e,t){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function te(e){return e*Math.PI/180}function O(e,t,n){let r=te(n);return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function k(e,t,n){return Math.min(Math.max(e,t),n)}function A(...e){return e.filter(e=>typeof e==`string`&&e.length>0).join(` `).trim()}var j,M,N,P,F,I,L,R,z;function B(){return(B=e((()=>{j=t(r(),1),M=t(l(),1),N=`.reactEasyCrop_Container {
+import{n as e,o as t,t as n}from"./rolldown-runtime-C0FnF6B9.js";import{t as r}from"./react-C21x__mS.js";import{n as i}from"./iframe-CZ0KI0zu.js";var a=n(((e,t)=>{var n=!1,r,i,a,o,s,c,l,u,d,f,p,m,h,g,_;function v(){if(!n){n=!0;var e=navigator.userAgent,t=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),v=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(m=/\b(iPhone|iP[ao]d)/.exec(e),h=/\b(iP[ao]d)/.exec(e),f=/Android/i.exec(e),g=/FBAN\/\w+;/i.exec(e),_=/Mobile/i.exec(e),p=!!/Win64/.exec(e),t){r=t[1]?parseFloat(t[1]):t[5]?parseFloat(t[5]):NaN,r&&document&&document.documentMode&&(r=document.documentMode);var y=/(?:Trident\/(\d+.\d+))/.exec(e);c=y?parseFloat(y[1])+4:r,i=t[2]?parseFloat(t[2]):NaN,a=t[3]?parseFloat(t[3]):NaN,o=t[4]?parseFloat(t[4]):NaN,o?(t=/(?:Chrome\/(\d+\.\d+))/.exec(e),s=t&&t[1]?parseFloat(t[1]):NaN):s=NaN}else r=i=a=s=o=NaN;if(v){if(v[1]){var b=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);l=!b||parseFloat(b[1].replace(`_`,`.`))}else l=!1;u=!!v[2],d=!!v[3]}else l=u=d=!1}}var y={ie:function(){return v()||r},ieCompatibilityMode:function(){return v()||c>r},ie64:function(){return y.ie()&&p},firefox:function(){return v()||i},opera:function(){return v()||a},webkit:function(){return v()||o},safari:function(){return y.webkit()},chrome:function(){return v()||s},windows:function(){return v()||u},osx:function(){return v()||l},linux:function(){return v()||d},iphone:function(){return v()||m},mobile:function(){return v()||m||h||f||_},nativeApp:function(){return v()||g},android:function(){return v()||f},ipad:function(){return v()||h}};t.exports=y})),o=n(((e,t)=>{var n=!!(typeof window<`u`&&window.document&&window.document.createElement);t.exports={canUseDOM:n,canUseWorkers:typeof Worker<`u`,canUseEventListeners:n&&!!(window.addEventListener||window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n}})),s=n(((e,t)=>{var n=o(),r;n.canUseDOM&&(r=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature(``,``)!==!0);function i(e,t){if(!n.canUseDOM||t&&!(`addEventListener`in document))return!1;var i=`on`+e,a=i in document;if(!a){var o=document.createElement(`div`);o.setAttribute(i,`return;`),a=typeof o[i]==`function`}return!a&&r&&e===`wheel`&&(a=document.implementation.hasFeature(`Events.wheel`,`3.0`)),a}t.exports=i})),c=n(((e,t)=>{var n=a(),r=s(),i=10,o=40,c=800;function l(e){var t=0,n=0,r=0,a=0;return`detail`in e&&(n=e.detail),`wheelDelta`in e&&(n=-e.wheelDelta/120),`wheelDeltaY`in e&&(n=-e.wheelDeltaY/120),`wheelDeltaX`in e&&(t=-e.wheelDeltaX/120),`axis`in e&&e.axis===e.HORIZONTAL_AXIS&&(t=n,n=0),r=t*i,a=n*i,`deltaY`in e&&(a=e.deltaY),`deltaX`in e&&(r=e.deltaX),(r||a)&&e.deltaMode&&(e.deltaMode==1?(r*=o,a*=o):(r*=c,a*=c)),r&&!t&&(t=r<1?-1:1),a&&!n&&(n=a<1?-1:1),{spinX:t,spinY:n,pixelX:r,pixelY:a}}l.getEventType=function(){return n.firefox()?`DOMMouseScroll`:r(`wheel`)?`wheel`:`mousewheel`},t.exports=l})),l=n(((e,t)=>{t.exports=c()}));function u(e){"@babel/helpers - typeof";return u=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},u(e)}function d(e,t){if(u(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(u(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function f(e){var t=d(e,`string`);return u(t)==`symbol`?t:t+``}function p(e,t,n){return(t=f(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?m(Object(n),!0).forEach(function(t){p(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function g(e,t,n,r,i,a=0){let{width:o,height:s}=O(e,t,a),c=Math.min(o,n),l=Math.min(s,r);return c>l*i?{width:l*i,height:l}:{width:c,height:c/i}}function _(e){return e.width>e.height?e.width/e.naturalWidth:e.height/e.naturalHeight}function v(e,t,n,r,i=0){let{width:a,height:o}=O(t.width,t.height,i);return{x:y(e.x,a,n.width,r),y:y(e.y,o,n.height,r)}}function y(e,t,n,r){let i=Math.abs(t*r/2-n/2);return k(e,-i,i)}function b(e,t){return Math.sqrt((e.y-t.y)**2+(e.x-t.x)**2)}function x(e,t){return Math.atan2(t.y-e.y,t.x-e.x)*180/Math.PI}function S(e,t,n,r,i,a=0,o=!0){let s=o?C:w,c=O(t.width,t.height,a),l=O(t.naturalWidth,t.naturalHeight,a),u={x:s(100,((c.width-n.width/i)/2-e.x/i)/c.width*100),y:s(100,((c.height-n.height/i)/2-e.y/i)/c.height*100),width:s(100,n.width/c.width*100/i),height:s(100,n.height/c.height*100/i)},d=Math.round(s(l.width,u.width*l.width/100)),f=Math.round(s(l.height,u.height*l.height/100)),p=l.width>=l.height*r?{width:Math.round(f*r),height:f}:{width:d,height:Math.round(d/r)};return{croppedAreaPercentages:u,croppedAreaPixels:h(h({},p),{},{x:Math.round(s(l.width-p.width,u.x*l.width/100)),y:Math.round(s(l.height-p.height,u.y*l.height/100))})}}function C(e,t){return Math.min(e,Math.max(0,t))}function w(e,t){return t}function T(e,t,n,r,i,a){let o=O(t.width,t.height,n),s=k(r.width/o.width*(100/e.width),i,a);return{crop:{x:s*o.width/2-r.width/2-o.width*s*(e.x/100),y:s*o.height/2-r.height/2-o.height*s*(e.y/100)},zoom:s}}function E(e,t,n){let r=_(t);return n.height>n.width?n.height/(e.height*r):n.width/(e.width*r)}function ee(e,t,n=0,r,i,a){let o=O(t.naturalWidth,t.naturalHeight,n),s=k(E(e,t,r),i,a),c=r.height>r.width?r.height/e.height:r.width/e.width;return{crop:{x:((o.width-e.width)/2-e.x)*c,y:((o.height-e.height)/2-e.y)*c},zoom:s}}function D(e,t){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function te(e){return e*Math.PI/180}function O(e,t,n){let r=te(n);return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function k(e,t,n){return Math.min(Math.max(e,t),n)}function A(...e){return e.filter(e=>typeof e==`string`&&e.length>0).join(` `).trim()}var j,M,N,P,F,I,L,R,z;function B(){return(B=e((()=>{j=t(r(),1),M=t(l(),1),N=`.reactEasyCrop_Container {
   position: absolute;
   top: 0;
   left: 0;
@@ -99,14 +99,30 @@ import{n as e,o as t,t as n}from"./rolldown-runtime-C0FnF6B9.js";import{t as r}f
 	y: number;
 	width: number;
 	height: number;
-}`,signature:{properties:[{key:`x`,value:{name:`number`,required:!0}},{key:`y`,value:{name:`number`,required:!0}},{key:`width`,value:{name:`number`,required:!0}},{key:`height`,value:{name:`number`,required:!0}}]}},name:`croppedAreaPercentages`}],return:{name:`void`}}},description:``}}}})))()}var K,q,J,Y,X,Z,Q;function $(){return($=e((()=>{K=r(),G(),q=i(),J={title:`Shared/UI/Image/ImageCropper`,component:V,args:{image:`https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80`,aspect:16/9},parameters:{layout:`padded`},argTypes:{aspect:{control:`number`}}},Y={},X={render:e=>{let[t,n]=(0,K.useState)({x:0,y:0}),[r,i]=(0,K.useState)(1);return(0,q.jsx)(V,{...e,crop:t,zoom:r,onCropChange:n,onZoomChange:i})}},Z={args:{aspect:1}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const [crop, setCrop] = useState<ImageCropPoint>({
+}`,signature:{properties:[{key:`x`,value:{name:`number`,required:!0}},{key:`y`,value:{name:`number`,required:!0}},{key:`width`,value:{name:`number`,required:!0}},{key:`height`,value:{name:`number`,required:!0}}]}},name:`croppedAreaPercentages`}],return:{name:`void`}}},description:``}}}})))()}var K,q,J,Y,X,Z,Q;function $(){return($=e((()=>{G(),K=i(),{useArgs:q}=__STORYBOOK_MODULE_PREVIEW_API__,J={title:`Shared/UI/Image/ImageCropper`,component:V,args:{image:`https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80`,aspect:16/9},parameters:{layout:`padded`},argTypes:{image:{description:`URL исходного изображения.`,control:`text`},aspect:{description:`Соотношение сторон области обрезки.`,control:`number`},width:{description:`Ширина контейнера cropper.`,control:`text`},crop:{description:`Контролируемое смещение изображения.`,control:!1},defaultCrop:{description:`Начальное смещение в uncontrolled-режиме.`,control:!1},zoom:{description:`Контролируемый масштаб изображения.`,control:{type:`number`,min:1,step:.1}},defaultZoom:{description:`Начальный масштаб в uncontrolled-режиме.`,control:{type:`number`,min:1,step:.1}},minZoom:{description:`Минимально доступный масштаб.`,control:{type:`number`,min:1,step:.1}},maxZoom:{description:`Максимально доступный масштаб.`,control:{type:`number`,min:1,step:.1}},zoomSpeed:{description:`Шаг изменения масштаба.`,control:{type:`number`,min:.01,step:.01}},objectFit:{description:`Способ начального вписывания изображения.`,control:`select`,options:[`contain`,`cover`,`horizontal-cover`,`vertical-cover`]},disabled:{description:`Блокирует перемещение и масштабирование.`,control:`boolean`},onCropChange:{description:`Вызывается при перемещении области обрезки.`,control:!1},onZoomChange:{description:`Вызывается при изменении масштаба.`,control:!1},onCropComplete:{description:`Вызывается после завершения изменения crop.`,control:!1}}},Y={},X={render:function(e){let[,t]=q();return(0,K.jsx)(V,{...e,crop:e.crop??{x:0,y:0},zoom:e.zoom??1,onCropChange:n=>{e.onCropChange?.(n),t({crop:n})},onZoomChange:n=>{e.onZoomChange?.(n),t({zoom:n})}})},args:{crop:{x:0,y:0},zoom:1}},Z={args:{aspect:1}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  render: function Render(args) {
+    const [, updateArgs] = useArgs<ImageCropperProps>();
+    return <ImageCropper {...args} crop={args.crop ?? {
       x: 0,
       y: 0
-    });
-    const [zoom, setZoom] = useState(1);
-    return <ImageCropper {...args} crop={crop} zoom={zoom} onCropChange={setCrop} onZoomChange={setZoom} />;
+    }} zoom={args.zoom ?? 1} onCropChange={crop => {
+      args.onCropChange?.(crop);
+      updateArgs({
+        crop
+      });
+    }} onZoomChange={zoom => {
+      args.onZoomChange?.(zoom);
+      updateArgs({
+        zoom
+      });
+    }} />;
+  },
+  args: {
+    crop: {
+      x: 0,
+      y: 0
+    },
+    zoom: 1
   }
 }`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
   args: {

package/storybook-static/assets/{ImageRenderer-CQSICbwz.js → ImageRenderer-DJPFz9-n.js}

@@ -1,2 +1,2 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n}from"./iframe-DBSrNt2a.js";function r({width:e=`100%`,height:t=`100%`,aspectRatio:n=`16 / 9`,className:r}){return(0,i.jsx)(`div`,{style:{width:e,height:t,aspectRatio:n},className:r,children:(0,i.jsx)(`svg`,{width:e,height:t,viewBox:`0 0 200 200`,xmlns:`http://www.w3.org/2000/svg`,role:`img`,fill:`none`,rx:`10`,ry:`10`,style:{display:`block`},"aria-label":`Изображение недоступно`,children:(0,i.jsxs)(`g`,{fill:`var(--surface-0)`,children:[(0,i.jsx)(`rect`,{x:`40`,y:`50`,width:`120`,height:`100`,rx:`10`}),(0,i.jsx)(`circle`,{cx:`60`,cy:`70`,r:`8`,fill:`var(--surface-2)`}),(0,i.jsx)(`path`,{d:`M50 130 L75 100 L100 130 Z`,fill:`var(--surface-2)`}),(0,i.jsx)(`path`,{d:`M90 130 L120 90 L150 130 Z`,fill:`var(--surface-2)`}),(0,i.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-0)`,strokeWidth:`15`,strokeLinecap:`round`}),(0,i.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-2)`,strokeWidth:`5`,strokeLinecap:`round`})]})})})}var i;function a(){return(a=e((()=>{i=n(),r.__docgenInfo={description:``,methods:[],displayName:`ImagePlaceholder`,props:{width:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},height:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},aspectRatio:{required:!1,tsType:{name:`union`,raw:`string | "unset"`,elements:[{name:`string`},{name:`literal`,value:`"unset"`}]},description:``,defaultValue:{value:`"16 / 9"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``}}}})))()}function o({src:e,sources:t,alt:n,role:i,ariaLabel:a,caption:o,fallback:l,useFigure:u=!1,layout:d=`cover`,width:f=`100%`,height:p=`100%`,aspectRatio:m,intrinsicWidth:h,intrinsicHeight:g,onLoad:_,onError:v,style:y,wrapperStyle:b,...x}){let S=(0,s.useRef)(null),[C,w]=(0,s.useState)(0),[T,E]=(0,s.useState)(!1),[D,O]=(0,s.useState)(!1),[k,A]=(0,s.useState)(!1);(0,s.useEffect)(()=>{if(typeof IntersectionObserver>`u`){let e=window.setTimeout(()=>E(!0),0);return()=>window.clearTimeout(e)}let e=new IntersectionObserver(([t])=>{if(t.isIntersecting){let n=Math.round(t.boundingClientRect.width);w(n),E(!0),e.disconnect()}},{rootMargin:`100px`,threshold:.01});return S.current&&e.observe(S.current),()=>e.disconnect()},[]);let j=d===`intrinsic`,M=j?`auto`:p,N=h&&g?`${h} / ${g}`:void 0,P=j?N??m??`auto`:m??`16 / 9`,F=j&&P!==`auto`&&P!==`unset`?`100%`:M,I=C?`${C}px`:`100vw`,L=(0,c.jsx)(r,{width:f,height:F,aspectRatio:P}),R=j?{...y,display:`block`,width:`100%`,height:`auto`,objectFit:void 0}:{display:`block`,width:`100%`,height:`100%`,objectFit:d,...y},z=(0,c.jsxs)(c.Fragment,{children:[!D&&!k&&(l||L),T&&!k&&(0,c.jsxs)(`picture`,{children:[t?.map(e=>(0,c.jsx)(`source`,{srcSet:e.srcSet,type:e.type,sizes:e.sizes??I},`${e.type??`source`}-${e.srcSet}`)),(0,c.jsx)(`img`,{src:e,alt:n,role:i,"aria-label":a,onLoad:e=>{O(!0),_?.(e)},onError:e=>{A(!0),v?.(e)},style:D?R:{display:`none`},"aria-busy":!D,width:h,height:g,...x})]}),k&&L]}),B=(0,c.jsx)(`div`,{ref:S,style:{width:f,height:M,aspectRatio:P,...b},children:z});return u?(0,c.jsxs)(`figure`,{className:`relative`,children:[B,o&&(0,c.jsx)(`figcaption`,{style:{bottom:2,right:2,maxWidth:`calc(100% - 4px)`},className:`absolute paddingInlineMd textRight radiusSm fontSizeSm`,children:o})]}):B}var s,c;function l(){return(l=e((()=>{s=t(),a(),c=n(),o.__docgenInfo={description:`Базовый рендер изображения: lazy-появление, placeholder, обработка ошибки и figure/caption.
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n}from"./iframe-CZ0KI0zu.js";function r({width:e=`100%`,height:t=`100%`,aspectRatio:n=`16 / 9`,className:r}){return(0,i.jsx)(`div`,{style:{width:e,height:t,aspectRatio:n},className:r,children:(0,i.jsx)(`svg`,{width:e,height:t,viewBox:`0 0 200 200`,xmlns:`http://www.w3.org/2000/svg`,role:`img`,fill:`none`,rx:`10`,ry:`10`,style:{display:`block`},"aria-label":`Изображение недоступно`,children:(0,i.jsxs)(`g`,{fill:`var(--surface-0)`,children:[(0,i.jsx)(`rect`,{x:`40`,y:`50`,width:`120`,height:`100`,rx:`10`}),(0,i.jsx)(`circle`,{cx:`60`,cy:`70`,r:`8`,fill:`var(--surface-2)`}),(0,i.jsx)(`path`,{d:`M50 130 L75 100 L100 130 Z`,fill:`var(--surface-2)`}),(0,i.jsx)(`path`,{d:`M90 130 L120 90 L150 130 Z`,fill:`var(--surface-2)`}),(0,i.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-0)`,strokeWidth:`15`,strokeLinecap:`round`}),(0,i.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-2)`,strokeWidth:`5`,strokeLinecap:`round`})]})})})}var i;function a(){return(a=e((()=>{i=n(),r.__docgenInfo={description:``,methods:[],displayName:`ImagePlaceholder`,props:{width:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},height:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},aspectRatio:{required:!1,tsType:{name:`union`,raw:`string | "unset"`,elements:[{name:`string`},{name:`literal`,value:`"unset"`}]},description:``,defaultValue:{value:`"16 / 9"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``}}}})))()}function o({src:e,sources:t,alt:n,role:i,ariaLabel:a,caption:o,fallback:l,useFigure:u=!1,layout:d=`cover`,width:f=`100%`,height:p=`100%`,aspectRatio:m,intrinsicWidth:h,intrinsicHeight:g,onLoad:_,onError:v,style:y,wrapperStyle:b,...x}){let S=(0,s.useRef)(null),[C,w]=(0,s.useState)(0),[T,E]=(0,s.useState)(!1),[D,O]=(0,s.useState)(!1),[k,A]=(0,s.useState)(!1);(0,s.useEffect)(()=>{if(typeof IntersectionObserver>`u`){let e=window.setTimeout(()=>E(!0),0);return()=>window.clearTimeout(e)}let e=new IntersectionObserver(([t])=>{if(t.isIntersecting){let n=Math.round(t.boundingClientRect.width);w(n),E(!0),e.disconnect()}},{rootMargin:`100px`,threshold:.01});return S.current&&e.observe(S.current),()=>e.disconnect()},[]);let j=d===`intrinsic`,M=j?`auto`:p,N=h&&g?`${h} / ${g}`:void 0,P=j?N??m??`auto`:m??`16 / 9`,F=j&&P!==`auto`&&P!==`unset`?`100%`:M,I=C?`${C}px`:`100vw`,L=(0,c.jsx)(r,{width:f,height:F,aspectRatio:P}),R=j?{...y,display:`block`,width:`100%`,height:`auto`,objectFit:void 0}:{display:`block`,width:`100%`,height:`100%`,objectFit:d,...y},z=(0,c.jsxs)(c.Fragment,{children:[!D&&!k&&(l||L),T&&!k&&(0,c.jsxs)(`picture`,{children:[t?.map(e=>(0,c.jsx)(`source`,{srcSet:e.srcSet,type:e.type,sizes:e.sizes??I},`${e.type??`source`}-${e.srcSet}`)),(0,c.jsx)(`img`,{src:e,alt:n,role:i,"aria-label":a,onLoad:e=>{O(!0),_?.(e)},onError:e=>{A(!0),v?.(e)},style:D?R:{display:`none`},"aria-busy":!D,width:h,height:g,...x})]}),k&&L]}),B=(0,c.jsx)(`div`,{ref:S,style:{width:f,height:M,aspectRatio:P,...b},children:z});return u?(0,c.jsxs)(`figure`,{className:`relative`,children:[B,o&&(0,c.jsx)(`figcaption`,{style:{bottom:2,right:2,maxWidth:`calc(100% - 4px)`},className:`absolute paddingInlineMd textRight radiusSm fontSizeSm`,children:o})]}):B}var s,c;function l(){return(l=e((()=>{s=t(),a(),c=n(),o.__docgenInfo={description:`Базовый рендер изображения: lazy-появление, placeholder, обработка ошибки и figure/caption.
 Компонент не знает, как устроено хранилище и какие форматы/размеры доступны.`,methods:[],displayName:`ImageRenderer`,props:{src:{required:!0,tsType:{name:`string`},description:``},sources:{required:!1,tsType:{name:`unknown`},description:``},layout:{required:!1,tsType:{name:`union`,raw:`"cover" | "contain" | "intrinsic"`,elements:[{name:`literal`,value:`"cover"`},{name:`literal`,value:`"contain"`},{name:`literal`,value:`"intrinsic"`}]},description:``,defaultValue:{value:`"cover"`,computed:!1}},alt:{required:!1,tsType:{name:`string`},description:``},role:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``},caption:{required:!1,tsType:{name:`string`},description:``},fallback:{required:!1,tsType:{name:`ReactNode`},description:``},useFigure:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},aspectRatio:{required:!1,tsType:{name:`union`,raw:`string | "unset"`,elements:[{name:`string`},{name:`literal`,value:`"unset"`}]},description:``},width:{required:!1,tsType:{name:`CSSProperties["width"]`,raw:`CSSProperties["width"]`},description:``,defaultValue:{value:`"100%"`,computed:!1}},height:{required:!1,tsType:{name:`CSSProperties["height"]`,raw:`CSSProperties["height"]`},description:``,defaultValue:{value:`"100%"`,computed:!1}},intrinsicWidth:{required:!1,tsType:{name:`number`},description:``},intrinsicHeight:{required:!1,tsType:{name:`number`},description:``},wrapperStyle:{required:!1,tsType:{name:`CSSProperties`},description:``}},composes:[`Omit`]}})))()}export{l as n,o as t};

package/storybook-static/assets/ImageRenderer.stories--ai66HWP.js

@@ -0,0 +1,34 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CZ0KI0zu.js";import{n,t as r}from"./ImageRenderer-DJPFz9-n.js";var i,a,o,s,c,l,u;function d(){return(d=e((()=>{n(),i=t(),{useArgs:a}=__STORYBOOK_MODULE_PREVIEW_API__,o={title:`Shared/UI/Image/ImageRenderer`,component:r,args:{src:`https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80`,alt:`Горный пейзаж`},parameters:{layout:`padded`},argTypes:{src:{description:`URL основного изображения.`,control:`text`},sources:{description:`Дополнительные responsive picture-источники.`,control:!1},layout:{description:`Режим расположения изображения внутри контейнера.`,control:`inline-radio`,options:[`cover`,`contain`,`intrinsic`]},alt:{description:`Альтернативный текст изображения.`,control:`text`},role:{description:`Семантическая роль тега изображения.`,control:`text`},ariaLabel:{description:`Явное доступное имя изображения.`,control:`text`},caption:{description:`Подпись изображения в режиме figure.`,control:`text`},fallback:{description:`Кастомный placeholder до загрузки.`,control:!1},useFigure:{description:`Оборачивает изображение в figure/figcaption.`,control:`boolean`},aspectRatio:{description:`Соотношение сторон контейнера.`,control:`text`},width:{description:`Ширина контейнера.`,control:`text`},height:{description:`Высота контейнера.`,control:`text`},intrinsicWidth:{description:`Исходная ширина изображения.`,control:`number`},intrinsicHeight:{description:`Исходная высота изображения.`,control:`number`},wrapperStyle:{description:`Inline-стили контейнера изображения.`,control:!1}}},s={render:function(){let[e]=a();return(0,i.jsx)(r,{...e})},args:{layout:`cover`,width:`min(100%, 48rem)`,height:`24rem`}},c={render:function(){let[e]=a();return(0,i.jsx)(r,{...e})},args:{layout:`contain`,width:`min(100%, 48rem)`,height:`24rem`,wrapperStyle:{background:`var(--surface-1)`}}},l={render:function(){let[e]=a();return(0,i.jsx)(r,{...e})},args:{layout:`intrinsic`,intrinsicWidth:1600,intrinsicHeight:1067}},s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: function Render() {
+    const [args] = useArgs<ImageRendererProps>();
+    return <ImageRenderer {...args} />;
+  },
+  args: {
+    layout: "cover",
+    width: "min(100%, 48rem)",
+    height: "24rem"
+  }
+}`,...s.parameters?.docs?.source}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: function Render() {
+    const [args] = useArgs<ImageRendererProps>();
+    return <ImageRenderer {...args} />;
+  },
+  args: {
+    layout: "contain",
+    width: "min(100%, 48rem)",
+    height: "24rem",
+    wrapperStyle: {
+      background: "var(--surface-1)"
+    }
+  }
+}`,...c.parameters?.docs?.source}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: function Render() {
+    const [args] = useArgs<ImageRendererProps>();
+    return <ImageRenderer {...args} />;
+  },
+  args: {
+    layout: "intrinsic",
+    intrinsicWidth: 1600,
+    intrinsicHeight: 1067
+  }
+}`,...l.parameters?.docs?.source}}},u=[`FixedCover`,`FixedContain`,`IntrinsicFullWidth`]})))()}d();export{c as FixedContain,s as FixedCover,l as IntrinsicFullWidth,u as __namedExportsOrder,o as default};

package/storybook-static/assets/ImageView.stories-khEGxQEm.js

@@ -0,0 +1,14 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-CZ0KI0zu.js";import{n,t as r}from"./ImageRenderer-DJPFz9-n.js";function i(e){return e.map(e=>`width`in e?`${e.src} ${e.width}w`:`${e.src} ${e.density}x`).join(`, `)}function a(e,t){return(e??[]).map(e=>({srcSet:i(e.candidates),type:e.type,sizes:e.sizes??t})).filter(e=>e.srcSet.length>0)}function o(){return(o=e((()=>{})))()}function s({image:e,alt:t,sizes:n,aspectRatio:o,...s}){let l=a(e.sources,n),u=e.candidates?i(e.candidates):void 0,d=o??(e.intrinsicWidth&&e.intrinsicHeight?`${e.intrinsicWidth} / ${e.intrinsicHeight}`:void 0);return(0,c.jsx)(r,{...s,src:e.src,srcSet:u||void 0,sources:l,sizes:n,alt:t??e.alt,intrinsicWidth:e.intrinsicWidth,intrinsicHeight:e.intrinsicHeight,aspectRatio:d})}var c;function l(){return(l=e((()=>{o(),n(),c=t(),s.__docgenInfo={description:`Собирает picture/srcset из готовых URL и делегирует отображение ImageRenderer.
+Компонент не формирует имена файлов и не знает о форматах или размерах хранилища.`,methods:[],displayName:`ImageView`,props:{image:{required:!0,tsType:{name:`signature`,type:`object`,raw:`{
+	src: string;
+	alt?: string;
+	intrinsicWidth?: number;
+	intrinsicHeight?: number;
+	candidates?: readonly ImageCandidate[];
+	sources?: readonly ResponsiveImageSource[];
+}`,signature:{properties:[{key:`src`,value:{name:`string`,required:!0}},{key:`alt`,value:{name:`string`,required:!1}},{key:`intrinsicWidth`,value:{name:`number`,required:!1}},{key:`intrinsicHeight`,value:{name:`number`,required:!1}},{key:`candidates`,value:{name:`unknown`,required:!1}},{key:`sources`,value:{name:`unknown`,required:!1}}]}},description:``},alt:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`,`Pick`]}})))()}var u,d,f,p,m,h,g;function _(){return(_=e((()=>{l(),u=t(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f=`photo-1500530855697-b586d89ba3ee`,p=(e,t)=>`https://images.unsplash.com/${f}?auto=format&fit=crop&w=${e}&fm=${t}&q=80`,m={title:`Shared/UI/Image/ImageView`,component:s,args:{layout:`intrinsic`,sizes:`(min-width: 64rem) 64rem, 100vw`,image:{src:p(1600,`jpg`),alt:`Responsive-пейзаж`,intrinsicWidth:1600,intrinsicHeight:1067,candidates:[{src:p(640,`jpg`),width:640},{src:p(1280,`jpg`),width:1280},{src:p(1600,`jpg`),width:1600}],sources:[{type:`image/avif`,candidates:[{src:p(640,`avif`),width:640},{src:p(1280,`avif`),width:1280},{src:p(1600,`avif`),width:1600}]},{type:`image/webp`,candidates:[{src:p(640,`webp`),width:640},{src:p(1280,`webp`),width:1280},{src:p(1600,`webp`),width:1600}]}]}},parameters:{layout:`padded`},argTypes:{image:{description:`Исходные responsive-данные изображения.`,control:!1},alt:{description:`Явный альтернативный текст поверх image.alt.`,control:`text`},sizes:{description:`Атрибут sizes для responsive-кандидатов.`,control:`text`},layout:{description:`Режим расположения изображения внутри контейнера.`,control:`inline-radio`,options:[`cover`,`contain`,`intrinsic`]},role:{description:`Семантическая роль тега изображения.`,control:`text`},ariaLabel:{description:`Явное доступное имя изображения.`,control:`text`},caption:{description:`Подпись изображения в режиме figure.`,control:`text`},fallback:{description:`Кастомный placeholder до загрузки.`,control:!1},useFigure:{description:`Оборачивает изображение в figure/figcaption.`,control:`boolean`},aspectRatio:{description:`Соотношение сторон контейнера.`,control:`text`},width:{description:`Ширина контейнера.`,control:`text`},height:{description:`Высота контейнера.`,control:`text`},wrapperStyle:{description:`Inline-стили контейнера изображения.`,control:!1}}},h={render:function(){let[e]=d();return(0,u.jsx)(s,{...e})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: function Render() {
+    const [args] = useArgs<ImageViewProps>();
+    return <ImageView {...args} />;
+  }
+}`,...h.parameters?.docs?.source}}},g=[`ResponsiveCandidates`]})))()}_();export{h as ResponsiveCandidates,g as __namedExportsOrder,m as default};

package/storybook-static/assets/{ImageViewer.stories-B2zHeVgq.js → ImageViewer.stories-DF6RRs2D.js}

@@ -1,5 +1,5 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./ImageViewerRuntime-CQBT2XUj.js","./rolldown-runtime-C0FnF6B9.js","./react-C21x__mS.js","./chevron-left-CGk7Zpej.js","./iframe-DBSrNt2a.js","./preload-helper-BHmFeTtP.js","./chunk-KJHJLCBK-D-yQfkOi.js","./chunk-IMSF75WX-yvVUwIQZ.js","./iframe-wwpu8YXD.css","./chevron-right-CT64vlCm.js","./download-RGyJzMcA.js","./x-CdBCVC44.js","./react-dom-2o2phaJG.js","./utils-DUM89eIj.js","./ImageViewerRuntime-CRmlrtpL.css"])))=>i.map(i=>d[i]);
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t,t as n}from"./preload-helper-BHmFeTtP.js";import{t as r}from"./react-C21x__mS.js";import{n as i}from"./iframe-DBSrNt2a.js";import{n as a,t as o}from"./Button-DMlznmSQ.js";function s(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useCallback)(()=>n(!0),[]);return typeof document<`u`&&(e.open||t)?(0,l.jsx)(c.Suspense,{fallback:null,children:(0,l.jsx)(u,{...e,onRuntimeMounted:r})}):null}var c,l,u;function d(){return(d=e((()=>{c=r(),l=i(),t(),u=(0,c.lazy)(()=>n(()=>import(`./ImageViewerRuntime-CQBT2XUj.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]),import.meta.url)),s.__docgenInfo={description:`Управляемый полноэкранный viewer с ленивой границей vendor runtime.
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./ImageViewerRuntime-DBwCIibL.js","./rolldown-runtime-C0FnF6B9.js","./react-C21x__mS.js","./chevron-left-C9_RRcAe.js","./iframe-CZ0KI0zu.js","./preload-helper-BHmFeTtP.js","./chunk-KJHJLCBK-D-yQfkOi.js","./chunk-IMSF75WX-yvVUwIQZ.js","./iframe-_EkhDToa.css","./chevron-right-K8IWV8l8.js","./download-D12Nvnyu.js","./x-B3ccJTtF.js","./react-dom-2o2phaJG.js","./utils-DUM89eIj.js","./ImageViewerRuntime-CRmlrtpL.css"])))=>i.map(i=>d[i]);
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t,t as n}from"./preload-helper-BHmFeTtP.js";import{t as r}from"./react-C21x__mS.js";import{n as i}from"./iframe-CZ0KI0zu.js";import{n as a,t as o}from"./Button-BUAFSG7a.js";function s(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useCallback)(()=>n(!0),[]);return typeof document<`u`&&(e.open||t)?(0,l.jsx)(c.Suspense,{fallback:null,children:(0,l.jsx)(u,{...e,onRuntimeMounted:r})}):null}var c,l,u;function d(){return(d=e((()=>{c=r(),l=i(),t(),u=(0,c.lazy)(()=>n(()=>import(`./ImageViewerRuntime-DBwCIibL.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]),import.meta.url)),s.__docgenInfo={description:`Управляемый полноэкранный viewer с ленивой границей vendor runtime.
 YARL и его плагины загружаются только при первом открытии, а после mount runtime остаётся в React-дереве,
 чтобы закрытие успело завершить анимацию, снять inert и вернуть focus исходному trigger.`,methods:[],displayName:`ImageViewer`,props:{open:{required:!0,tsType:{name:`boolean`},description:``},images:{required:!0,tsType:{name:`unknown`},description:``},index:{required:!1,tsType:{name:`number`},description:``},onClose:{required:!0,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},onIndexChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(index: number) => void`,signature:{arguments:[{type:{name:`number`},name:`index`}],return:{name:`void`}}},description:``},features:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
 	readonly captions?: boolean;
@@ -50,23 +50,41 @@ YARL и его плагины загружаются только при пер
 | "--image-viewer-thumbnail-border-color"
 | "--image-viewer-thumbnail-active-border-color"
 | "--image-viewer-loading-color"
-| "--image-viewer-error-color"`,elements:[{name:`literal`,value:`"--image-viewer-z-index"`},{name:`literal`,value:`"--image-viewer-backdrop"`},{name:`literal`,value:`"--image-viewer-control-color"`},{name:`literal`,value:`"--image-viewer-control-active-color"`},{name:`literal`,value:`"--image-viewer-control-disabled-color"`},{name:`literal`,value:`"--image-viewer-control-background"`},{name:`literal`,value:`"--image-viewer-control-border"`},{name:`literal`,value:`"--image-viewer-control-radius"`},{name:`literal`,value:`"--image-viewer-control-filter"`},{name:`literal`,value:`"--image-viewer-icon-size"`},{name:`literal`,value:`"--image-viewer-icon-stroke-width"`},{name:`literal`,value:`"--image-viewer-toolbar-padding"`},{name:`literal`,value:`"--image-viewer-focus"`},{name:`literal`,value:`"--image-viewer-focus-offset"`},{name:`literal`,value:`"--image-viewer-image-radius"`},{name:`literal`,value:`"--image-viewer-caption-background"`},{name:`literal`,value:`"--image-viewer-caption-color"`},{name:`literal`,value:`"--image-viewer-counter-color"`},{name:`literal`,value:`"--image-viewer-thumbnail-background"`},{name:`literal`,value:`"--image-viewer-thumbnail-border-color"`},{name:`literal`,value:`"--image-viewer-thumbnail-active-border-color"`},{name:`literal`,value:`"--image-viewer-loading-color"`},{name:`literal`,value:`"--image-viewer-error-color"`}]},{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`Record<ImageViewerCssVariable, string | number>`}],raw:`Partial<Record<ImageViewerCssVariable, string | number>>`}]},description:``}}}})))()}function f(e,t,n=`webp`){return`https://images.unsplash.com/${e}?auto=format&fit=crop&w=${t}&fm=${n}&q=80`}var p,m,h,g,_,v,y,b,x;function S(){return(S=e((()=>{p=r(),a(),d(),m=i(),h=[`photo-1500530855697-b586d89ba3ee`,`photo-1441974231531-c6227db76b6e`,`photo-1470252649378-9c29740c9fa8`],g=h.map((e,t)=>({src:f(e,1600),alt:`Природный пейзаж ${t+1}`,title:`Изображение ${t+1}`,description:`Responsive slide с миниатюрой, zoom, fullscreen и доступной русской навигацией.`,thumbnail:f(e,240),intrinsicWidth:1600,intrinsicHeight:900,candidates:[640,1280,1600].map(t=>({src:f(e,t),width:t})),sources:[{type:`image/avif`,candidates:[640,1280,1600].map(t=>({src:f(e,t,`avif`),width:t}))}],download:{url:f(e,2e3,`jpg`),filename:`landscape-${t+1}.jpg`}})),_={"--image-viewer-backdrop":`rgb(8 14 28 / 96%)`,"--image-viewer-control-active-color":`#7dd3fc`,"--image-viewer-thumbnail-active-border-color":`#7dd3fc`,"--image-viewer-caption-background":`rgb(8 14 28 / 72%)`},v={title:`Shared/UI/Image/ImageViewer`,component:s,args:{open:!1,images:g,onClose:()=>void 0},parameters:{layout:`centered`}},y={render:e=>{let[t,n]=(0,p.useState)(!1),[r,i]=(0,p.useState)(0);return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(o,{onClick:()=>n(!0),children:`Открыть галерею`}),(0,m.jsx)(s,{...e,open:t,index:r,onClose:()=>n(!1),onIndexChange:i,features:{download:!0},style:_})]})}},b={render:e=>{let[t,n]=(0,p.useState)(!1);return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(o,{onClick:()=>n(!0),children:`Открыть одно изображение`}),(0,m.jsx)(s,{...e,open:t,images:g.slice(0,1),onClose:()=>n(!1)})]})}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const [open, setOpen] = useState(false);
-    const [index, setIndex] = useState(0);
+| "--image-viewer-error-color"`,elements:[{name:`literal`,value:`"--image-viewer-z-index"`},{name:`literal`,value:`"--image-viewer-backdrop"`},{name:`literal`,value:`"--image-viewer-control-color"`},{name:`literal`,value:`"--image-viewer-control-active-color"`},{name:`literal`,value:`"--image-viewer-control-disabled-color"`},{name:`literal`,value:`"--image-viewer-control-background"`},{name:`literal`,value:`"--image-viewer-control-border"`},{name:`literal`,value:`"--image-viewer-control-radius"`},{name:`literal`,value:`"--image-viewer-control-filter"`},{name:`literal`,value:`"--image-viewer-icon-size"`},{name:`literal`,value:`"--image-viewer-icon-stroke-width"`},{name:`literal`,value:`"--image-viewer-toolbar-padding"`},{name:`literal`,value:`"--image-viewer-focus"`},{name:`literal`,value:`"--image-viewer-focus-offset"`},{name:`literal`,value:`"--image-viewer-image-radius"`},{name:`literal`,value:`"--image-viewer-caption-background"`},{name:`literal`,value:`"--image-viewer-caption-color"`},{name:`literal`,value:`"--image-viewer-counter-color"`},{name:`literal`,value:`"--image-viewer-thumbnail-background"`},{name:`literal`,value:`"--image-viewer-thumbnail-border-color"`},{name:`literal`,value:`"--image-viewer-thumbnail-active-border-color"`},{name:`literal`,value:`"--image-viewer-loading-color"`},{name:`literal`,value:`"--image-viewer-error-color"`}]},{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`Record<ImageViewerCssVariable, string | number>`}],raw:`Partial<Record<ImageViewerCssVariable, string | number>>`}]},description:``}}}})))()}function f(e,t,n=`webp`){return`https://images.unsplash.com/${e}?auto=format&fit=crop&w=${t}&fm=${n}&q=80`}var p,m,h,g,_,v,y,b,x;function S(){return(S=e((()=>{a(),d(),p=i(),{useArgs:m}=__STORYBOOK_MODULE_PREVIEW_API__,h=[`photo-1500530855697-b586d89ba3ee`,`photo-1441974231531-c6227db76b6e`,`photo-1470252649378-9c29740c9fa8`],g=h.map((e,t)=>({src:f(e,1600),alt:`Природный пейзаж ${t+1}`,title:`Изображение ${t+1}`,description:`Responsive slide с миниатюрой, zoom, fullscreen и доступной русской навигацией.`,thumbnail:f(e,240),intrinsicWidth:1600,intrinsicHeight:900,candidates:[640,1280,1600].map(t=>({src:f(e,t),width:t})),sources:[{type:`image/avif`,candidates:[640,1280,1600].map(t=>({src:f(e,t,`avif`),width:t}))}],download:{url:f(e,2e3,`jpg`),filename:`landscape-${t+1}.jpg`}})),_={"--image-viewer-backdrop":`rgb(8 14 28 / 96%)`,"--image-viewer-control-active-color":`#7dd3fc`,"--image-viewer-thumbnail-active-border-color":`#7dd3fc`,"--image-viewer-caption-background":`rgb(8 14 28 / 72%)`},v={title:`Shared/UI/Image/ImageViewer`,component:s,args:{open:!1,images:g,onClose:()=>void 0},parameters:{layout:`centered`},argTypes:{open:{description:`Открывает полноэкранный viewer.`,control:`boolean`},images:{description:`Массив изображений и их responsive-источников.`,control:!1},index:{description:`Индекс активного изображения.`,control:{type:`number`,min:0,step:1}},onClose:{description:`Вызывается при запросе закрыть viewer.`,control:!1},onIndexChange:{description:`Вызывается при переходе к другому изображению.`,control:!1},features:{description:`Включает доступные функции viewer.`,control:!1},loop:{description:`Зацикливает навигацию между изображениями.`,control:`boolean`},closeOnBackdropClick:{description:`Закрывает viewer кликом по фону.`,control:`boolean`},closeOnPullDown:{description:`Закрывает viewer жестом pull-down.`,control:`boolean`},labels:{description:`Локализованные подписи действий viewer.`,control:!1}}},y={render:function(e){let[,t]=m();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{onClick:()=>t({open:!0}),children:`Открыть галерею`}),(0,p.jsx)(s,{...e,open:e.open,index:e.index??0,onClose:()=>{e.onClose(),t({open:!1})},onIndexChange:n=>{e.onIndexChange?.(n),t({index:n})},features:{download:!0},style:_})]})}},b={render:function(e){let[,t]=m();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{onClick:()=>t({open:!0}),children:`Открыть одно изображение`}),(0,p.jsx)(s,{...e,open:e.open,images:g.slice(0,1),onClose:()=>{e.onClose(),t({open:!1})}})]})}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: function Render(args) {
+    const [, updateArgs] = useArgs<ImageViewerProps>();
     return <>
-                <Button onClick={() => setOpen(true)}>Открыть галерею</Button>
-                <ImageViewer {...args} open={open} index={index} onClose={() => setOpen(false)} onIndexChange={setIndex} features={{
+                <Button onClick={() => updateArgs({
+        open: true
+      })}>Открыть галерею</Button>
+                <ImageViewer {...args} open={args.open} index={args.index ?? 0} onClose={() => {
+        args.onClose();
+        updateArgs({
+          open: false
+        });
+      }} onIndexChange={index => {
+        args.onIndexChange?.(index);
+        updateArgs({
+          index
+        });
+      }} features={{
         download: true
       }} style={CUSTOM_STYLE} />
             </>;
   }
 }`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const [open, setOpen] = useState(false);
+  render: function Render(args) {
+    const [, updateArgs] = useArgs<ImageViewerProps>();
     return <>
-                <Button onClick={() => setOpen(true)}>Открыть одно изображение</Button>
-                <ImageViewer {...args} open={open} images={IMAGES.slice(0, 1)} onClose={() => setOpen(false)} />
+                <Button onClick={() => updateArgs({
+        open: true
+      })}>Открыть одно изображение</Button>
+                <ImageViewer {...args} open={args.open} images={IMAGES.slice(0, 1)} onClose={() => {
+        args.onClose();
+        updateArgs({
+          open: false
+        });
+      }} />
             </>;
   }
 }`,...b.parameters?.docs?.source}}},x=[`ResponsiveGallery`,`SingleImage`]})))()}S();export{y as ResponsiveGallery,b as SingleImage,x as __namedExportsOrder,v as default};