import type { CSSProperties, HTMLAttributes, JSX } from "react";
import { ResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
export type GridTemplate = string | number;
export type GridAuto = "auto" | "min-content" | "max-content" | "1fr" | string;
export interface GridContainerProps extends HTMLAttributes<HTMLElement> {
    id?: string;
    /**
     * Включение inline-grid вместо обычного grid
     *
     * Позволяет grid-контейнеру вести себя как строчный элемент,
     * обтекаясь текстом и другими элементами. Полезно для встраивания grid-раскладки
     * в текстовый поток или рядом с другими inline-элементами.
     *
     * Пример использования: кнопки с иконками и текстом, inline-формы, элементы навигации.
     *
     * @default false
     */
    inline?: ResponsiveValue<boolean>;
    /**
     * Направление автоматического размещения элементов (grid-auto-flow)
     *
     * Группа взаимосключающих свойств для управления автоматическим потоком элементов.
     *
     * Если ни одно не указано, используется стандартное поведение grid.
     */
    /**
     * Автоматическое размещение элементов по строкам (grid-auto-flow: row)
     *
     * Элементы заполняют каждую строку по порядку, переходя на новую строку при необходимости.
     * Стандартное поведение CSS Grid.
     *
     * @default false
     */
    row?: ResponsiveValue<boolean>;
    /**
     * Автоматическое размещение элементов по колонкам (grid-auto-flow: column)
     *
     * Элементы заполняют каждую колонку по порядку, переходя на новую колонку при необходимости.
     * Полезно для вертикальных списков или когда важно сохранять порядок по вертикали.
     *
     * @default false
     */
    column?: ResponsiveValue<boolean>;
    /**
     * Плотное размещение элементов (grid-auto-flow: dense)
     *
     * Система пытается заполнить все пустые ячейки, даже если это нарушает порядок элементов.
     * Особенно полезно при использовании grid-column/grid-row span, чтобы избежать "дыр" в раскладке.
     *
     * @default false
     */
    dense?: ResponsiveValue<boolean>;
    /**
     * Отступы между grid-элементами
     *
     * Управляет расстоянием между строками и колонками одновременно.
     * Использует предопределенные значения из дизайн-системы для согласованности интерфейсов.
     */
    gap?: ResponsiveValue<"none" | "xs" | "sm" | "md" | "lg" | "xl">;
    /**
     * Отступы только между строками
     *
     * Позволяет установить разные расстояния для строк и колонок.
     * Полезно когда вертикальные и горизонтальные отступы должны отличаться.
     *
     * Пример: карточки товаров где между рядами нужно больше места чем между колонками.
     */
    gapRow?: ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">;
    /**
     * Отступы только между колонками
     *
     * Устанавливает расстояние только между колонками grid-сетки.
     * Используется вместе с gapRow для тонкого контроля над отступами.
     */
    gapColumn?: ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">;
    /**
     * Выравнивание элементов по вертикальной оси (align-items)
     *
     * Определяет как элементы выравниваются внутри своих ячеек по вертикали.
     * Применяется ко всем элементам grid-контейнера.
     */
    align?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
    /**
     * Выравнивание элементов по горизонтальной оси (justify-items)
     *
     * Определяет как элементы выравниваются внутри своих ячеек по горизонтали.
     * Влияет на позиционирование контента внутри каждой grid-ячейки.
     */
    justify?: ResponsiveValue<"start" | "center" | "end" | "stretch">;
    /**
     * Выравнивание всего grid-контента по вертикали (align-content)
     *
     * Работает когда общая высота grid-элементов меньше высоты контейнера.
     * Определяет распределение свободного вертикального пространства.
     */
    alignContent?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">;
    /**
     * Выравнивание всего grid-контента по горизонтали (justify-content)
     *
     * Работает когда общая ширина grid-элементов меньше ширины контейнера.
     * Определяет распределение свободного горизонтального пространства.
     */
    justifyContent?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">;
    /**
     * Определение колонок сетки (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" - хедер-контент-футер
     */
    templateColumns?: ResponsiveValue<GridTemplate>;
    /**
     * Определение строк сетки (grid-template-rows)
     *
     * Строка с CSS значениями для создания структуры строк.
     * Используется когда нужно явно контролировать высоту строк.
     *
     * Примеры:
     * - "auto 1fr auto" - классический макет (хедер-контент-футер)
     * - "10em 20em" - фиксированные высоты строк
     * - "minmax(10em, auto)" - минимальная высота с возможностью роста
     */
    templateRows?: ResponsiveValue<GridTemplate>;
    /**
     * Размер автоматически создаваемых колонок (grid-auto-columns)
     *
     * Определяет размер колонок которые создаются автоматически
     * когда элементов больше чем явно объявленных колонок в templateColumns.
     *
     * Пример: если templateColumns="1fr 1fr", но элементов 5,
     * autoColumns определит размер для 3-й и последующих колонок.
     */
    autoColumns?: ResponsiveValue<GridAuto>;
    /**
     * Размер автоматически создаваемых строк (grid-auto-rows)
     *
     * Определяет размер строк которые создаются автоматически
     * когда элементов больше чем явно объявленных строк в templateRows.
     * Часто используется с значениями minmax() для адаптивных высот.
     *
     * Пример: "minmax(10em, auto)" - минимальная высота 100px, растет по контенту.
     */
    autoRows?: ResponsiveValue<GridAuto>;
    /**
     * Именованные области сетки (grid-template-areas)
     *
     * Создает именованные области для семантической разметки.
     * Позволяет легко создавать сложные макеты с понятной структурой.
     *
     * Формат: строки в кавычках, имена областей через пробелы.
     * Пример:
     * `
     * "header header"
     * "sidebar content"
     * "footer footer"
     * `
     * Затем используйте <GridItem area="header"> для размещения.
     */
    areas?: ResponsiveValue<string>;
    /**
     * Предопределенные варианты раскладки
     *
     * Готовые решения для частых сценариев использования.
     * Упрощают создание стандартных макетов без ручного указания templateColumns/templateRows.
     */
    variant?: ResponsiveValue<"single-column" | "auto-1fr" | "auto1fr-rows-auto">;
    /**
     * Дочерние элементы grid-контейнера
     *
     * Любые React-элементы которые будут отображаться внутри grid-раскладки.
     * Рекомендуется использовать Grid.Item для лучшего контроля над позиционированием.
     */
    children: React.ReactNode;
    /**
     * HTML-тег для рендеринга
     *
     * Позволяет изменить HTML-тег контейнера для семантической разметки.
     *
     * Примеры:
     * - as="main" для основного контента
     * - as="nav" для навигации
     * - as="section" для секций контента
     * - as="ul" для списков с grid-раскладкой
     *
     * @default "div"
     */
    as?: keyof JSX.IntrinsicElements;
    /**
     * Дополнительные CSS-классы
     *
     * Позволяет добавить кастомные стили к grid-контейнеру.
     * Используется для специфических случаев которые не покрываются пропсами компонента.
     */
    className?: string;
    /**
     * Инлайн-стили
     *
     * JavaScript-объект с CSS-свойствами для тонкого контроля над стилями.
     * Используется когда нужно динамически вычислять стили или для свойств не покрытых пропсами.
     *
     * Важно: инлайн-стили имеют высший приоритет, переопределяя CSS-классы.
     */
    style?: CSSProperties;
}
export interface GridItemProps extends HTMLAttributes<HTMLElement> {
    /**
     * Именованная область для размещения элемента
     *
     * Связывает элемент с областью объявленной в GridContainer areas.
     * Самый простой способ позиционирования в сложных макетах.
     *
     * Пример: если в контейнере areas включает "header", то area="header"
     * разместит элемент в этой области.
     */
    area?: ResponsiveValue<string>;
    /**
     * Позиционирование элемента в колонках
     *
     * CSS-значение для grid-column: начало / конец.
     * Позволяет тонко контролировать размещение элемента в колонках.
     *
     * Примеры:
     * - "1" - разместить в первой колонке
     * - "1 / 3" - растянуть с первой по третью колонку
     * - "span 2" - занять 2 колонки
     * - "2 / span 3" - начать со второй, занять 3 колонки
     */
    column?: ResponsiveValue<string>;
    /**
     * Позиционирование элемента в строках
     *
     * CSS-значение для grid-row: начало / конец.
     * Позволяет тонко контролировать размещение элемента в строках.
     *
     * Примеры:
     * - "2" - разместить во второй строке
     * - "1 / 4" - растянуть с первой по четвертую строку
     * - "span 3" - занять 3 строки
     */
    row?: ResponsiveValue<string>;
    /**
     * Индивидуальное вертикальное выравнивание элемента (align-self)
     *
     * Переопределяет выравнивание установленное в GridContainer align.
     * Позволяет конкретному элементу иметь отличное от остальных выравнивание.
     *
     * Пример: в контейнере align="center", но для одного элемента alignSelf="start".
     */
    alignSelf?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
    /**
     * Индивидуальное горизонтальное выравнивание элемента (justify-self)
     *
     * Переопределяет выравнивание установленное в GridContainer justify.
     * Позволяет конкретному элементу иметь отличное от остальных выравнивание.
     *
     * Пример: в контейнере justify="stretch", но для кнопки justifySelf="center".
     */
    justifySelf?: ResponsiveValue<"start" | "center" | "end" | "stretch">;
    /**
     * Контент внутри grid-элемента
     *
     * Любые React-элементы которые будут отображаться внутри ячейки grid.
     * Может содержать текст, изображения, другие компоненты.
     */
    children?: React.ReactNode;
    /**
     * HTML-тег для рендеринга
     *
     * Позволяет изменить HTML-тег элемента для семантической разметки.
     *
     * Примеры:
     * - as="li" для элементов списка
     * - as="article" для карточек контента
     * - as="header" для шапки области
     *
     * @default "div"
     */
    as?: keyof JSX.IntrinsicElements;
    /**
     * Дополнительные CSS-классы
     *
     * Позволяет добавить кастомные стили к grid-элементу.
     * Используется для специфического оформления конкретных ячеек сетки.
     */
    className?: string;
    /**
     * Инлайн-стили
     *
     * JavaScript-объект с CSS-свойствами для тонкого контроля над стилями элемента.
     * Особенно полезно для динамических расчетов позиционирования или анимаций.
     */
    style?: CSSProperties;
}
export type GridContainerLayoutProps = Pick<GridContainerProps, "inline" | "row" | "column" | "dense" | "gap" | "gapRow" | "gapColumn" | "align" | "justify" | "alignContent" | "justifyContent" | "templateColumns" | "templateRows" | "autoColumns" | "autoRows" | "areas" | "variant">;
export type GridItemLayoutProps = Pick<GridItemProps, "area" | "column" | "row" | "alignSelf" | "justifySelf">;
//# sourceMappingURL=types.d.ts.map