@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.4

package/storybook-static/assets/{Grid-G88y3oB_.js → Grid-BkKqSMfk.js}

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

package/storybook-static/assets/{Grid.stories-BV7zL-6n.js → Grid.stories-828arrPi.js}

@@ -1,4 +1,4 @@
-import{a as e,i as t}from"./preload-helper-B45gAKPr.js";import{pn as n,t as r}from"./iframe-BJGIOdSH.js";import{n as i,t as a}from"./Grid-Bb0gH6CX.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:`
+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-DaN-XFub.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:`
           "header header"
           "nav main"
           "footer footer"
@@ -492,4 +492,4 @@ import{a as e,i as t}from"./preload-helper-B45gAKPr.js";import{pn as n,t as r}fr
   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};
+}`,...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};

package/storybook-static/assets/{Grid-Bb0gH6CX.js → GridContainer-qDguE1HS.js}

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

package/storybook-static/assets/ImageCropper.stories-CrIWrKKR.js

@@ -0,0 +1,115 @@
+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-DaN-XFub.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;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+  cursor: move;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.reactEasyCrop_Image,
+.reactEasyCrop_Video {
+  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */
+  max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */
+}
+
+.reactEasyCrop_Contain {
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.reactEasyCrop_Cover_Horizontal {
+  width: 100%;
+  height: auto;
+}
+.reactEasyCrop_Cover_Vertical {
+  width: auto;
+  height: 100%;
+}
+
+.reactEasyCrop_CropArea {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-sizing: border-box;
+  box-shadow: 0 0 0 9999em;
+  color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.reactEasyCrop_CropAreaRound {
+  border-radius: 50%;
+}
+
+.reactEasyCrop_CropAreaGrid::before {
+  content: ' ';
+  box-sizing: border-box;
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 33.33%;
+  right: 33.33%;
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.reactEasyCrop_CropAreaGrid::after {
+  content: ' ';
+  box-sizing: border-box;
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  top: 33.33%;
+  bottom: 33.33%;
+  left: 0;
+  right: 0;
+  border-left: 0;
+  border-right: 0;
+}
+`,P=250,F=1,I=3,L=1,R=class e extends j.Component{constructor(...t){super(...t),this.cropperRef=j.createRef(),this.imageRef=j.createRef(),this.videoRef=j.createRef(),this.containerPosition={x:0,y:0},this.containerRef=null,this.styleRef=null,this.containerRect=null,this.mediaSize={width:0,height:0,naturalWidth:0,naturalHeight:0},this.dragStartPosition={x:0,y:0},this.dragStartCrop={x:0,y:0},this.gestureZoomStart=0,this.gestureRotationStart=0,this.isTouching=!1,this.lastPinchDistance=0,this.lastPinchRotation=0,this.rafDragTimeout=null,this.rafPinchTimeout=null,this.wheelTimer=null,this.resizeEmitTimer=null,this.currentDoc=typeof document<`u`?document:null,this.currentWindow=typeof window<`u`?window:null,this.resizeObserver=null,this.previousCropSize=null,this.isInitialized=!1,this.dragInteractionSource=null,this.state={cropSize:null,hasWheelJustStarted:!1,mediaObjectFit:void 0},this.initResizeObserver=()=>{if(window.ResizeObserver===void 0||!this.containerRef)return;let e=!0;this.resizeObserver=new window.ResizeObserver(t=>{if(e){e=!1;return}this.computeSizes({isResizeTriggered:!0})}),this.resizeObserver.observe(this.containerRef)},this.onWindowResize=()=>{this.computeSizes({isResizeTriggered:!0})},this.preventZoomSafari=e=>e.preventDefault(),this.cleanEvents=()=>{this.currentDoc&&(this.currentDoc.removeEventListener(`mousemove`,this.onMouseMove),this.currentDoc.removeEventListener(`mouseup`,this.onDragStopped),this.currentDoc.removeEventListener(`touchmove`,this.onTouchMove),this.currentDoc.removeEventListener(`touchend`,this.onDragStopped),this.currentDoc.removeEventListener(`gesturechange`,this.onGestureChange),this.currentDoc.removeEventListener(`gestureend`,this.onGestureEnd),this.currentDoc.removeEventListener(`scroll`,this.onScroll))},this.clearScrollEvent=()=>{this.containerRef&&this.containerRef.removeEventListener(`wheel`,this.onWheel),this.wheelTimer&&clearTimeout(this.wheelTimer)},this.onMediaLoad=()=>{let e=this.computeSizes();e&&(this.previousCropSize=e,this.emitCropData(),this.setInitialCrop(e),this.isInitialized=!0),this.props.onMediaLoaded&&this.props.onMediaLoaded(this.mediaSize)},this.setInitialCrop=e=>{if(this.props.initialCroppedAreaPercentages){let{crop:t,zoom:n}=T(this.props.initialCroppedAreaPercentages,this.mediaSize,this.props.rotation,e,this.props.minZoom,this.props.maxZoom);this.props.onCropChange(t),this.props.onZoomChange&&this.props.onZoomChange(n)}else if(this.props.initialCroppedAreaPixels){let{crop:t,zoom:n}=ee(this.props.initialCroppedAreaPixels,this.mediaSize,this.props.rotation,e,this.props.minZoom,this.props.maxZoom);this.props.onCropChange(t),this.props.onZoomChange&&this.props.onZoomChange(n)}},this.computeSizes=({isResizeTriggered:e=!1}={})=>{let t=this.imageRef.current||this.videoRef.current;if(t&&this.containerRef){this.containerRect=this.containerRef.getBoundingClientRect(),this.saveContainerPosition();let n=this.containerRect.width/this.containerRect.height,r=this.imageRef.current?.naturalWidth||this.videoRef.current?.videoWidth||0,i=this.imageRef.current?.naturalHeight||this.videoRef.current?.videoHeight||0,a=t.offsetWidth<r||t.offsetHeight<i,o=r/i,s;if(a)switch(this.state.mediaObjectFit){default:case`contain`:s=n>o?{width:this.containerRect.height*o,height:this.containerRect.height}:{width:this.containerRect.width,height:this.containerRect.width/o};break;case`horizontal-cover`:s={width:this.containerRect.width,height:this.containerRect.width/o};break;case`vertical-cover`:s={width:this.containerRect.height*o,height:this.containerRect.height};break}else s={width:t.offsetWidth,height:t.offsetHeight};this.mediaSize=h(h({},s),{},{naturalWidth:r,naturalHeight:i}),this.props.setMediaSize&&this.props.setMediaSize(this.mediaSize);let c=this.props.cropSize?this.props.cropSize:g(this.mediaSize.width,this.mediaSize.height,this.containerRect.width,this.containerRect.height,this.props.aspect,this.props.rotation);return(this.state.cropSize?.height!==c.height||this.state.cropSize?.width!==c.width)&&this.props.onCropSizeChange&&this.props.onCropSizeChange(c),this.setState({cropSize:c},()=>this.recomputeCropPosition({isResizeTriggered:e})),this.props.setCropSize&&this.props.setCropSize(c),c}},this.saveContainerPosition=()=>{if(this.containerRef){let e=this.containerRef.getBoundingClientRect();this.containerPosition={x:e.left,y:e.top}}},this.onMouseDown=t=>{this.currentDoc&&(t.preventDefault(),this.currentDoc.addEventListener(`mousemove`,this.onMouseMove),this.currentDoc.addEventListener(`mouseup`,this.onDragStopped),this.saveContainerPosition(),this.onDragStart(e.getMousePoint(t),`mouse`))},this.onMouseMove=t=>this.onDrag(e.getMousePoint(t)),this.onScroll=e=>{this.currentDoc&&(e.preventDefault(),this.saveContainerPosition())},this.onTouchStart=t=>{this.currentDoc&&(this.isTouching=!0,!(this.props.onTouchRequest&&!this.props.onTouchRequest(t))&&(this.currentDoc.addEventListener(`touchmove`,this.onTouchMove,{passive:!1}),this.currentDoc.addEventListener(`touchend`,this.onDragStopped),this.saveContainerPosition(),t.touches.length===2?this.onPinchStart(t):t.touches.length===1&&this.onDragStart(e.getTouchPoint(t.touches[0]),`touch`)))},this.onTouchMove=t=>{t.preventDefault(),t.touches.length===2?this.onPinchMove(t):t.touches.length===1&&this.onDrag(e.getTouchPoint(t.touches[0]))},this.onGestureStart=e=>{this.currentDoc&&(e.preventDefault(),this.currentDoc.addEventListener(`gesturechange`,this.onGestureChange),this.currentDoc.addEventListener(`gestureend`,this.onGestureEnd),this.gestureZoomStart=this.props.zoom,this.gestureRotationStart=this.props.rotation)},this.onGestureChange=t=>{if(t.preventDefault(),this.isTouching)return;let n=e.getMousePoint(t),r=this.gestureZoomStart-1+t.scale;if(this.setNewZoom(r,n,{shouldUpdatePosition:!0}),this.props.onRotationChange){let e=this.gestureRotationStart+t.rotation;this.props.onRotationChange(e)}},this.onGestureEnd=e=>{this.cleanEvents()},this.onDragStart=({x:e,y:t},n)=>{var r,i;this.dragStartPosition={x:e,y:t},this.dragStartCrop=h({},this.props.crop),this.dragInteractionSource=n,(r=(i=this.props).onInteractionStart)==null||r.call(i,{source:n})},this.onDrag=({x:e,y:t})=>{this.currentWindow&&(this.rafDragTimeout&&this.currentWindow.cancelAnimationFrame(this.rafDragTimeout),this.rafDragTimeout=this.currentWindow.requestAnimationFrame(()=>{if(!this.state.cropSize||e===void 0||t===void 0)return;let n=e-this.dragStartPosition.x,r=t-this.dragStartPosition.y,i={x:this.dragStartCrop.x+n,y:this.dragStartCrop.y+r},a=this.props.restrictPosition?v(i,this.mediaSize,this.state.cropSize,this.props.zoom,this.props.rotation):i;this.props.onCropChange(a)}))},this.onDragStopped=()=>{var e,t;this.isTouching=!1,this.cleanEvents(),this.emitCropData(),(e=(t=this.props).onInteractionEnd)==null||e.call(t,{source:this.dragInteractionSource??`mouse`}),this.dragInteractionSource=null},this.onWheel=t=>{if(!this.currentWindow||this.props.onWheelRequest&&!this.props.onWheelRequest(t))return;t.preventDefault();let n=e.getMousePoint(t),{pixelY:r}=(0,M.default)(t),i=this.props.zoom-r*this.props.zoomSpeed/200;this.setNewZoom(i,n,{shouldUpdatePosition:!0}),this.state.hasWheelJustStarted||this.setState({hasWheelJustStarted:!0},()=>{var e;return(e=this.props).onInteractionStart?.call(e,{source:`wheel`})}),this.wheelTimer&&clearTimeout(this.wheelTimer),this.wheelTimer=this.currentWindow.setTimeout(()=>this.setState({hasWheelJustStarted:!1},()=>{var e;return(e=this.props).onInteractionEnd?.call(e,{source:`wheel`})}),250)},this.getPointOnContainer=({x:e,y:t},n)=>{if(!this.containerRect)throw Error(`The Cropper is not mounted`);return{x:this.containerRect.width/2-(e-n.x),y:this.containerRect.height/2-(t-n.y)}},this.getPointOnMedia=({x:e,y:t})=>{let{crop:n,zoom:r}=this.props;return{x:(e+n.x)/r,y:(t+n.y)/r}},this.setNewZoom=(e,t,{shouldUpdatePosition:n=!0}={})=>{if(!this.state.cropSize||!this.props.onZoomChange)return;let r=k(e,this.props.minZoom,this.props.maxZoom);if(n){let e=this.getPointOnContainer(t,this.containerPosition),n=this.getPointOnMedia(e),i={x:n.x*r-e.x,y:n.y*r-e.y},a=this.props.restrictPosition?v(i,this.mediaSize,this.state.cropSize,r,this.props.rotation):i;this.props.onCropChange(a)}this.props.onZoomChange(r)},this.getCropData=()=>this.state.cropSize?S(this.props.restrictPosition?v(this.props.crop,this.mediaSize,this.state.cropSize,this.props.zoom,this.props.rotation):this.props.crop,this.mediaSize,this.state.cropSize,this.getAspect(),this.props.zoom,this.props.rotation,this.props.restrictPosition):null,this.emitCropData=()=>{this.resizeEmitTimer&&=(clearTimeout(this.resizeEmitTimer),null);let e=this.getCropData();if(!e)return;let{croppedAreaPercentages:t,croppedAreaPixels:n}=e;this.props.onCropComplete&&this.props.onCropComplete(t,n),this.props.onCropAreaChange&&this.props.onCropAreaChange(t,n)},this.emitCropAreaChange=()=>{let e=this.getCropData();if(!e)return;let{croppedAreaPercentages:t,croppedAreaPixels:n}=e;this.props.onCropAreaChange&&this.props.onCropAreaChange(t,n)},this.recomputeCropPosition=({isResizeTriggered:e=!1}={})=>{if(!this.state.cropSize)return;let t=this.props.crop;if(this.isInitialized&&this.previousCropSize?.width&&this.previousCropSize?.height&&(Math.abs(this.previousCropSize.width-this.state.cropSize.width)>1e-6||Math.abs(this.previousCropSize.height-this.state.cropSize.height)>1e-6)){let e=this.state.cropSize.width/this.previousCropSize.width,n=this.state.cropSize.height/this.previousCropSize.height;t={x:this.props.crop.x*e,y:this.props.crop.y*n}}let n=this.props.restrictPosition?v(t,this.mediaSize,this.state.cropSize,this.props.zoom,this.props.rotation):t;this.previousCropSize=this.state.cropSize,this.props.onCropChange(n),e?this.debouncedEmitCropData():this.emitCropData()},this.debouncedEmitCropData=()=>{this.currentWindow&&(this.resizeEmitTimer&&clearTimeout(this.resizeEmitTimer),this.resizeEmitTimer=this.currentWindow.setTimeout(()=>{this.emitCropData()},P))},this.onKeyDown=e=>{let{crop:t,onCropChange:n,keyboardStep:r,zoom:i,rotation:a}=this.props,o=r;if(!this.state.cropSize)return;e.shiftKey&&(o*=.2);let s=h({},t);switch(e.key){case`ArrowUp`:s.y-=o,e.preventDefault();break;case`ArrowDown`:s.y+=o,e.preventDefault();break;case`ArrowLeft`:s.x-=o,e.preventDefault();break;case`ArrowRight`:s.x+=o,e.preventDefault();break;default:return}if(this.props.restrictPosition&&(s=v(s,this.mediaSize,this.state.cropSize,i,a)),!e.repeat){var c,l;(c=(l=this.props).onInteractionStart)==null||c.call(l,{source:`keyboard`})}n(s)},this.onKeyUp=e=>{var t,n;switch(e.key){case`ArrowUp`:case`ArrowDown`:case`ArrowLeft`:case`ArrowRight`:e.preventDefault();break;default:return}this.emitCropData(),(t=(n=this.props).onInteractionEnd)==null||t.call(n,{source:`keyboard`})}}componentDidMount(){!this.currentDoc||!this.currentWindow||(this.containerRef&&(this.containerRef.ownerDocument&&(this.currentDoc=this.containerRef.ownerDocument),this.currentDoc.defaultView&&(this.currentWindow=this.currentDoc.defaultView),this.initResizeObserver(),window.ResizeObserver===void 0&&this.currentWindow.addEventListener(`resize`,this.onWindowResize),this.props.zoomWithScroll&&this.containerRef.addEventListener(`wheel`,this.onWheel,{passive:!1}),this.containerRef.addEventListener(`gesturestart`,this.onGestureStart)),this.currentDoc.addEventListener(`scroll`,this.onScroll),this.props.disableAutomaticStylesInjection||(this.styleRef=this.currentDoc.createElement(`style`),this.styleRef.setAttribute(`type`,`text/css`),this.props.nonce&&this.styleRef.setAttribute(`nonce`,this.props.nonce),this.styleRef.innerHTML=N,this.currentDoc.head.appendChild(this.styleRef)),this.imageRef.current&&this.imageRef.current.complete&&this.onMediaLoad(),this.props.setImageRef&&this.props.setImageRef(this.imageRef),this.props.setVideoRef&&this.props.setVideoRef(this.videoRef),this.props.setCropperRef&&this.props.setCropperRef(this.cropperRef))}componentWillUnmount(){var e;if(!(!this.currentDoc||!this.currentWindow)){if(window.ResizeObserver===void 0&&this.currentWindow.removeEventListener(`resize`,this.onWindowResize),(e=this.resizeObserver)==null||e.disconnect(),this.resizeEmitTimer&&clearTimeout(this.resizeEmitTimer),this.containerRef&&this.containerRef.removeEventListener(`gesturestart`,this.preventZoomSafari),this.styleRef){var t;(t=this.styleRef.parentNode)==null||t.removeChild(this.styleRef)}this.cleanEvents(),this.props.zoomWithScroll&&this.clearScrollEvent()}}componentDidUpdate(e){if(e.rotation===this.props.rotation?e.aspect===this.props.aspect&&e.objectFit===this.props.objectFit?e.zoom===this.props.zoom?e.cropSize?.height!==this.props.cropSize?.height||e.cropSize?.width!==this.props.cropSize?.width?this.computeSizes():(e.crop?.x!==this.props.crop?.x||e.crop?.y!==this.props.crop?.y)&&this.emitCropAreaChange():this.recomputeCropPosition():this.computeSizes():(this.computeSizes(),this.recomputeCropPosition()),e.zoomWithScroll!==this.props.zoomWithScroll&&this.containerRef&&(this.props.zoomWithScroll?this.containerRef.addEventListener(`wheel`,this.onWheel,{passive:!1}):this.clearScrollEvent()),e.video!==this.props.video){var t;(t=this.videoRef.current)==null||t.load()}let n=this.getObjectFit();n!==this.state.mediaObjectFit&&this.setState({mediaObjectFit:n},this.computeSizes)}getAspect(){let{cropSize:e,aspect:t}=this.props;return e?e.width/e.height:t}getObjectFit(){if(this.props.objectFit===`cover`){if((this.imageRef.current||this.videoRef.current)&&this.containerRef){this.containerRect=this.containerRef.getBoundingClientRect();let e=this.containerRect.width/this.containerRect.height;return(this.imageRef.current?.naturalWidth||this.videoRef.current?.videoWidth||0)/(this.imageRef.current?.naturalHeight||this.videoRef.current?.videoHeight||0)<e?`horizontal-cover`:`vertical-cover`}return`horizontal-cover`}return this.props.objectFit}onPinchStart(t){let n=e.getTouchPoint(t.touches[0]),r=e.getTouchPoint(t.touches[1]);this.lastPinchDistance=b(n,r),this.lastPinchRotation=x(n,r),this.onDragStart(D(n,r),`touch`)}onPinchMove(t){if(!this.currentDoc||!this.currentWindow)return;let n=e.getTouchPoint(t.touches[0]),r=e.getTouchPoint(t.touches[1]),i=D(n,r);this.onDrag(i),this.rafPinchTimeout&&this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout),this.rafPinchTimeout=this.currentWindow.requestAnimationFrame(()=>{let e=b(n,r),t=this.props.zoom*(e/this.lastPinchDistance);this.setNewZoom(t,i,{shouldUpdatePosition:!1}),this.lastPinchDistance=e;let a=x(n,r),o=this.props.rotation+(a-this.lastPinchRotation);this.props.onRotationChange&&this.props.onRotationChange(o),this.lastPinchRotation=a})}render(){let{image:e,video:t,mediaProps:n,cropperProps:r,transform:i,crop:{x:a,y:o},rotation:s,zoom:c,cropShape:l,showGrid:u,roundCropAreaPixels:d,style:{containerStyle:f,cropAreaStyle:p,mediaStyle:m},classes:{containerClassName:g,cropAreaClassName:_,mediaClassName:v}}=this.props,y=this.state.mediaObjectFit??this.getObjectFit();return j.createElement(`div`,{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,ref:e=>this.containerRef=e,"data-testid":`container`,style:f,className:A(`reactEasyCrop_Container`,g)},e?j.createElement(`img`,h(h({alt:``,className:A(`reactEasyCrop_Image`,y===`contain`&&`reactEasyCrop_Contain`,y===`horizontal-cover`&&`reactEasyCrop_Cover_Horizontal`,y===`vertical-cover`&&`reactEasyCrop_Cover_Vertical`,v)},n),{},{src:e,ref:this.imageRef,style:h(h({},m),{},{transform:i||`translate(${a}px, ${o}px) rotate(${s}deg) scale(${c})`}),onLoad:this.onMediaLoad})):t&&j.createElement(`video`,h(h({autoPlay:!0,playsInline:!0,loop:!0,muted:!0,className:A(`reactEasyCrop_Video`,y===`contain`&&`reactEasyCrop_Contain`,y===`horizontal-cover`&&`reactEasyCrop_Cover_Horizontal`,y===`vertical-cover`&&`reactEasyCrop_Cover_Vertical`,v)},n),{},{ref:this.videoRef,onLoadedMetadata:this.onMediaLoad,style:h(h({},m),{},{transform:i||`translate(${a}px, ${o}px) rotate(${s}deg) scale(${c})`}),controls:!1}),(Array.isArray(t)?t:[{src:t}]).map(e=>j.createElement(`source`,h({key:e.src},e)))),this.state.cropSize&&j.createElement(`div`,h({ref:this.cropperRef,style:h(h({},p),{},{width:d?Math.round(this.state.cropSize.width):this.state.cropSize.width,height:d?Math.round(this.state.cropSize.height):this.state.cropSize.height}),tabIndex:0,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp,"data-testid":`cropper`,className:A(`reactEasyCrop_CropArea`,l===`round`&&`reactEasyCrop_CropAreaRound`,u&&`reactEasyCrop_CropAreaGrid`,_)},r)))}},R.defaultProps={zoom:1,rotation:0,aspect:4/3,maxZoom:I,minZoom:F,cropShape:`rect`,objectFit:`contain`,showGrid:!0,style:{},classes:{},mediaProps:{},cropperProps:{},zoomSpeed:1,restrictPosition:!0,zoomWithScroll:!0,keyboardStep:L},R.getMousePoint=e=>({x:Number(e.clientX),y:Number(e.clientY)}),R.getTouchPoint=e=>({x:Number(e.clientX),y:Number(e.clientY)}),z=R})))()}function V({image:e,aspect:t=16/9,width:n=`100%`,className:r,style:i,crop:a,defaultCrop:o=W,zoom:s,defaultZoom:c=1,minZoom:l=1,maxZoom:u=3,zoomSpeed:d=.1,objectFit:f=`contain`,disabled:p=!1,onCropChange:m,onZoomChange:h,onCropComplete:g}){let[_,v]=(0,H.useState)(o),[y,b]=(0,H.useState)(c),x=a??_,S=s??y,C=(0,H.useCallback)(e=>{p||(a===void 0&&v(e),m?.(e))},[a,p,m]),w=(0,H.useCallback)(e=>{p||(s===void 0&&b(e),h?.(e))},[p,h,s]),T=(0,H.useCallback)((e,t)=>{p||g?.(t,e)},[p,g]);return(0,U.jsx)(`div`,{className:r,style:{position:`relative`,width:n,aspectRatio:t,pointerEvents:p?`none`:void 0,...i},children:(0,U.jsx)(z,{image:e,crop:x,zoom:S,aspect:t,minZoom:l,maxZoom:u,zoomSpeed:d,objectFit:f,onCropChange:C,onZoomChange:w,onCropComplete:T,cropperProps:{"aria-disabled":p||void 0}})})}var H,U,W;function G(){return(G=e((()=>{H=r(),B(),U=i(),W={x:0,y:0},V.__docgenInfo={description:`Управляемая или автономная область обрезки изображения.
+Числовой aspect задаётся вызывающим кодом и не связан с назначением изображения.`,methods:[],displayName:`ImageCropper`,props:{image:{required:!0,tsType:{name:`string`},description:``},aspect:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`16 / 9`,computed:!1}},width:{required:!1,tsType:{name:`CSSProperties["width"]`,raw:`CSSProperties["width"]`},description:``,defaultValue:{value:`"100%"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},style:{required:!1,tsType:{name:`CSSProperties`},description:``},crop:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
+	x: number;
+	y: number;
+}`,signature:{properties:[{key:`x`,value:{name:`number`,required:!0}},{key:`y`,value:{name:`number`,required:!0}}]}},description:``},defaultCrop:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
+	x: number;
+	y: number;
+}`,signature:{properties:[{key:`x`,value:{name:`number`,required:!0}},{key:`y`,value:{name:`number`,required:!0}}]}},description:``,defaultValue:{value:`{ x: 0, y: 0 }`,computed:!1}},zoom:{required:!1,tsType:{name:`number`},description:``},defaultZoom:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`1`,computed:!1}},minZoom:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`1`,computed:!1}},maxZoom:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`3`,computed:!1}},zoomSpeed:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0.1`,computed:!1}},objectFit:{required:!1,tsType:{name:`union`,raw:`"contain" | "cover" | "horizontal-cover" | "vertical-cover"`,elements:[{name:`literal`,value:`"contain"`},{name:`literal`,value:`"cover"`},{name:`literal`,value:`"horizontal-cover"`},{name:`literal`,value:`"vertical-cover"`}]},description:``,defaultValue:{value:`"contain"`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},onCropChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(crop: ImageCropPoint) => void`,signature:{arguments:[{type:{name:`signature`,type:`object`,raw:`{
+	x: number;
+	y: number;
+}`,signature:{properties:[{key:`x`,value:{name:`number`,required:!0}},{key:`y`,value:{name:`number`,required:!0}}]}},name:`crop`}],return:{name:`void`}}},description:``},onZoomChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(zoom: number) => void`,signature:{arguments:[{type:{name:`number`},name:`zoom`}],return:{name:`void`}}},description:``},onCropComplete:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(croppedAreaPixels: ImageCropArea, croppedAreaPercentages: ImageCropArea) => void`,signature:{arguments:[{type:{name:`signature`,type:`object`,raw:`{
+	x: number;
+	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:`croppedAreaPixels`},{type:{name:`signature`,type:`object`,raw:`{
+	x: number;
+	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>({
+      x: 0,
+      y: 0
+    });
+    const [zoom, setZoom] = useState(1);
+    return <ImageCropper {...args} crop={crop} zoom={zoom} onCropChange={setCrop} onZoomChange={setZoom} />;
+  }
+}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  args: {
+    aspect: 1
+  }
+}`,...Z.parameters?.docs?.source}}},Q=[`Uncontrolled`,`Controlled`,`Square`]})))()}$();export{X as Controlled,Z as Square,Y as Uncontrolled,Q as __namedExportsOrder,J as default};

package/storybook-static/assets/ImageRenderer-F3AaZx-K.js

@@ -0,0 +1,2 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n}from"./iframe-DaN-XFub.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-l3PnRYxy.js

@@ -0,0 +1,22 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t,t as n}from"./ImageRenderer-F3AaZx-K.js";var r,i,a,o,s;function c(){return(c=e((()=>{t(),r={title:`Shared/UI/Image/ImageRenderer`,component:n,args:{src:`https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80`,alt:`Горный пейзаж`},parameters:{layout:`padded`},argTypes:{layout:{control:`inline-radio`,options:[`cover`,`contain`,`intrinsic`]}}},i={args:{layout:`cover`,width:`min(100%, 48rem)`,height:`24rem`}},a={args:{layout:`contain`,width:`min(100%, 48rem)`,height:`24rem`,wrapperStyle:{background:`var(--surface-1)`}}},o={args:{layout:`intrinsic`,intrinsicWidth:1600,intrinsicHeight:1067}},i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    layout: "cover",
+    width: "min(100%, 48rem)",
+    height: "24rem"
+  }
+}`,...i.parameters?.docs?.source}}},a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    layout: "contain",
+    width: "min(100%, 48rem)",
+    height: "24rem",
+    wrapperStyle: {
+      background: "var(--surface-1)"
+    }
+  }
+}`,...a.parameters?.docs?.source}}},o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    layout: "intrinsic",
+    intrinsicWidth: 1600,
+    intrinsicHeight: 1067
+  }
+}`,...o.parameters?.docs?.source}}},s=[`FixedCover`,`FixedContain`,`IntrinsicFullWidth`]})))()}c();export{a as FixedContain,i as FixedCover,o as IntrinsicFullWidth,s as __namedExportsOrder,r as default};

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

@@ -0,0 +1,9 @@
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.js";import{n,t as r}from"./ImageRenderer-F3AaZx-K.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;function h(){return(h=e((()=>{l(),u=`photo-1500530855697-b586d89ba3ee`,d=(e,t)=>`https://images.unsplash.com/${u}?auto=format&fit=crop&w=${e}&fm=${t}&q=80`,f={title:`Shared/UI/Image/ImageView`,component:s,args:{layout:`intrinsic`,sizes:`(min-width: 64rem) 64rem, 100vw`,image:{src:d(1600,`jpg`),alt:`Responsive-пейзаж`,intrinsicWidth:1600,intrinsicHeight:1067,candidates:[{src:d(640,`jpg`),width:640},{src:d(1280,`jpg`),width:1280},{src:d(1600,`jpg`),width:1600}],sources:[{type:`image/avif`,candidates:[{src:d(640,`avif`),width:640},{src:d(1280,`avif`),width:1280},{src:d(1600,`avif`),width:1600}]},{type:`image/webp`,candidates:[{src:d(640,`webp`),width:640},{src:d(1280,`webp`),width:1280},{src:d(1600,`webp`),width:1600}]}]}},parameters:{layout:`padded`}},p={},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{}`,...p.parameters?.docs?.source}}},m=[`ResponsiveCandidates`]})))()}h();export{p as ResponsiveCandidates,m as __namedExportsOrder,f as default};

package/storybook-static/assets/{ImageViewer.stories-PlFXSB5n.js → ImageViewer.stories-BSPiv5lU.js}

@@ -1,5 +1,5 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./ImageViewerRuntime-D8wFAKx5.js","./preload-helper-B45gAKPr.js","./iframe-BJGIOdSH.js","./iframe-CJQlmNUm.css","./react-dom-BC7xZNHy.js","./utils-DzbSigQl.js","./ImageViewerRuntime-CRmlrtpL.css"])))=>i.map(i=>d[i]);
-import{c as e,i as t,n,t as r}from"./preload-helper-B45gAKPr.js";import{pn as i,t as a}from"./iframe-BJGIOdSH.js";import{t as o}from"./Button-MoWVKehO.js";import{t as s}from"./button-DZpTIXz2.js";var c=t((()=>{})),l=t((()=>{})),u=t((()=>{})),d=t((()=>{}));function f(e){let[t,n]=(0,p.useState)(!1),r=(0,p.useCallback)(()=>n(!0),[]);return typeof document<`u`&&(e.open||t)?(0,m.jsx)(p.Suspense,{fallback:null,children:(0,m.jsx)(h,{...e,onRuntimeMounted:r})}):null}var p,m,h,g=t((()=>{p=e(i(),1),c(),l(),u(),d(),m=a(),n(),h=(0,p.lazy)(()=>r(()=>import(`./ImageViewerRuntime-D8wFAKx5.js`),__vite__mapDeps([0,1,2,3,4,5,6]),import.meta.url)),f.__docgenInfo={description:`Управляемый полноэкранный viewer с ленивой границей vendor runtime.
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./ImageViewerRuntime-BOpMGgz6.js","./rolldown-runtime-C0FnF6B9.js","./react-C21x__mS.js","./chevron-left-DjbyJeHO.js","./iframe-DaN-XFub.js","./preload-helper-BHmFeTtP.js","./chunk-KJHJLCBK-D-yQfkOi.js","./chunk-IMSF75WX-yvVUwIQZ.js","./iframe-CJQlmNUm.css","./chevron-right-D29uf09I.js","./download-CyVhTbv6.js","./x-Dh43gJN9.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-DaN-XFub.js";import{n as a,t as o}from"./Button-mjF9HSg0.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-BOpMGgz6.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,7 +50,7 @@ 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 _(e,t,n=`webp`){return`https://images.unsplash.com/${e}?auto=format&fit=crop&w=${t}&fm=${n}&q=80`}var v,y,b,x,S,C,w,T,E;t((()=>{v=e(i(),1),s(),g(),y=a(),b=[`photo-1500530855697-b586d89ba3ee`,`photo-1441974231531-c6227db76b6e`,`photo-1470252649378-9c29740c9fa8`],x=b.map((e,t)=>({src:_(e,1600),alt:`Природный пейзаж ${t+1}`,title:`Изображение ${t+1}`,description:`Responsive slide с миниатюрой, zoom, fullscreen и доступной русской навигацией.`,thumbnail:_(e,240),intrinsicWidth:1600,intrinsicHeight:900,candidates:[640,1280,1600].map(t=>({src:_(e,t),width:t})),sources:[{type:`image/avif`,candidates:[640,1280,1600].map(t=>({src:_(e,t,`avif`),width:t}))}],download:{url:_(e,2e3,`jpg`),filename:`landscape-${t+1}.jpg`}})),S={"--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%)`},C={title:`Shared/UI/Image/ImageViewer`,component:f,args:{open:!1,images:x,onClose:()=>void 0},parameters:{layout:`centered`}},w={render:e=>{let[t,n]=(0,v.useState)(!1),[r,i]=(0,v.useState)(0);return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(o,{onClick:()=>n(!0),children:`Открыть галерею`}),(0,y.jsx)(f,{...e,open:t,index:r,onClose:()=>n(!1),onIndexChange:i,features:{download:!0},style:S})]})}},T={render:e=>{let[t,n]=(0,v.useState)(!1);return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(o,{onClick:()=>n(!0),children:`Открыть одно изображение`}),(0,y.jsx)(f,{...e,open:t,images:x.slice(0,1),onClose:()=>n(!1)})]})}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+| "--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);
@@ -61,7 +61,7 @@ YARL и его плагины загружаются только при пер
       }} style={CUSTOM_STYLE} />
             </>;
   }
-}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: args => {
     const [open, setOpen] = useState(false);
     return <>
@@ -69,4 +69,4 @@ YARL и его плагины загружаются только при пер
                 <ImageViewer {...args} open={open} images={IMAGES.slice(0, 1)} onClose={() => setOpen(false)} />
             </>;
   }
-}`,...T.parameters?.docs?.source}}},E=[`ResponsiveGallery`,`SingleImage`]}))();export{w as ResponsiveGallery,T as SingleImage,E as __namedExportsOrder,C as default};
+}`,...b.parameters?.docs?.source}}},x=[`ResponsiveGallery`,`SingleImage`]})))()}S();export{y as ResponsiveGallery,b as SingleImage,x as __namedExportsOrder,v as default};