@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.12

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

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