import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{i as n,r,t as i}from"./media-BycWpjAl.js";import{a,i as o,n as s,r as c,t as l}from"./GridContainer-qDguE1HS.js";var u,d;function f(){return(f=e((()=>{u=t(),r(),c(),d=(0,u.forwardRef)(({children:e,className:t=``,as:r,style:s,area:c,column:l,row:d,alignSelf:f,justifySelf:p,...m},h)=>{let{activeBreakpoint:g}=i(),_=(0,u.useMemo)(()=>({alignSelf:n(f,g),justifySelf:n(p,g)}),[g,f,p]),v=(0,u.useMemo)(()=>({area:n(c,g),column:n(l,g),row:n(d,g)}),[g,c,l,d]),y=o(_),b=a(v),x=[y,t].filter(Boolean).join(` `),S={...b,...s};return(0,u.createElement)(r||`div`,{...m,ref:h,className:x,style:S},e)}),d.displayName=`GridItem`,d.__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`]}})))()}var p;function m(){return(m=e((()=>{s(),f(),p={Container:l,Item:d}})))()}export{m as n,p as t};