"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridArea = exports.Grid = exports.GridColumn = exports.GridRow = exports.GridContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const prop_types_1 = __importDefault(require("prop-types"));
/**
 * GridContainer component - main container for the grid system
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {number|string} props.gap - Grid gap size (default: '1rem')
 * @param {string} props.maxWidth - Maximum container width (default: '1280px')
 * @param {boolean} props.fluid - Whether the container should be fluid width (default: false)
 * @param {string} props.padding - Container padding (default: '1rem')
 * @returns {React.ReactElement} GridContainer component
 */
const GridContainer = ({ children, className = '', style = {}, gap = '1rem', maxWidth = '1280px', fluid = false, padding = '1rem', ...rest }) => {
    const containerStyle = {
        width: '100%',
        maxWidth: fluid ? 'none' : maxWidth,
        marginLeft: 'auto',
        marginRight: 'auto',
        padding,
        ...style
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-grid-container ${className}`, style: containerStyle, ...rest, children: children }));
};
exports.GridContainer = GridContainer;
exports.GridContainer.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    gap: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    maxWidth: prop_types_1.default.string,
    fluid: prop_types_1.default.bool,
    padding: prop_types_1.default.string
};
/**
 * GridRow component - a flex row for the grid system
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {number|string} props.gap - Grid gap size (default: '1rem')
 * @param {string} props.justifyContent - Justify content property (default: 'flex-start')
 * @param {string} props.alignItems - Align items property (default: 'stretch')
 * @param {boolean} props.noWrap - Whether to disable wrapping (default: false)
 * @returns {React.ReactElement} GridRow component
 */
const GridRow = ({ children, className = '', style = {}, gap = '1rem', justifyContent = 'flex-start', alignItems = 'stretch', noWrap = false, ...rest }) => {
    const rowStyle = {
        display: 'flex',
        flexWrap: noWrap ? 'nowrap' : 'wrap',
        gap,
        justifyContent,
        alignItems,
        width: '100%',
        ...style
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-grid-row ${className}`, style: rowStyle, ...rest, children: children }));
};
exports.GridRow = GridRow;
exports.GridRow.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    gap: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    justifyContent: prop_types_1.default.string,
    alignItems: prop_types_1.default.string,
    noWrap: prop_types_1.default.bool
};
/**
 * GridColumn component - a flex column for the grid system
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {number|string} props.width - Column width (1-12 or CSS value)
 * @param {number|string} props.sm - Width for small screens
 * @param {number|string} props.md - Width for medium screens
 * @param {number|string} props.lg - Width for large screens
 * @param {number|string} props.xl - Width for extra large screens
 * @param {number} props.offset - Column offset (1-11)
 * @returns {React.ReactElement} GridColumn component
 */
const GridColumn = ({ children, className = '', style = {}, width = 12, sm, md, lg, xl, offset = 0, ...rest }) => {
    // Convert numeric width to percentage
    const getWidthValue = (value) => {
        if (value === undefined)
            return undefined;
        if (typeof value === 'number') {
            return `${(value / 12) * 100}%`;
        }
        return value;
    };
    const widthValue = getWidthValue(width);
    const offsetValue = offset > 0 ? `${(offset / 12) * 100}%` : 0;
    const columnStyle = {
        flexBasis: widthValue,
        maxWidth: widthValue,
        marginLeft: offsetValue,
        ...style
    };
    // Responsive styles via media queries would typically be handled by a CSS framework
    // For simplicity, we're using inline styles here, but in a real implementation,
    // you'd want to use a CSS-in-JS solution or CSS classes
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-grid-column ${className}`, style: columnStyle, ...rest, children: children }));
};
exports.GridColumn = GridColumn;
exports.GridColumn.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    width: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    sm: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    md: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    lg: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    xl: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    offset: prop_types_1.default.number
};
/**
 * CSS Grid layout system component
 *
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {string|number} props.columns - Number of columns or template string (default: 12)
 * @param {string|number} props.gap - Grid gap size (default: '1rem')
 * @param {string} props.rowGap - Row gap size
 * @param {string} props.columnGap - Column gap size
 * @param {string} props.areas - Grid template areas
 * @param {string} props.rows - Grid template rows
 * @returns {React.ReactElement} GridSystem component
 */
const Grid = ({ children, className = '', style = {}, columns = 12, gap = '1rem', rowGap, columnGap, areas, rows, ...rest }) => {
    // Convert numeric columns to grid template
    const gridTemplateColumns = typeof columns === 'number'
        ? `repeat(${columns}, 1fr)`
        : columns;
    const gridStyle = {
        display: 'grid',
        gridTemplateColumns,
        gap,
        gridTemplateAreas: areas,
        gridTemplateRows: rows,
        ...(rowGap && { rowGap }),
        ...(columnGap && { columnGap }),
        ...style
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-grid ${className}`, style: gridStyle, ...rest, children: children }));
};
exports.Grid = Grid;
exports.Grid.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    columns: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
    gap: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    rowGap: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    columnGap: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    areas: prop_types_1.default.string,
    rows: prop_types_1.default.string
};
/**
 * GridArea component - a grid area for the grid system
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {string} props.area - Grid area name
 * @param {string|number} props.column - Grid column position
 * @param {string|number} props.row - Grid row position
 * @param {string|number} props.columnSpan - Number of columns to span
 * @param {string|number} props.rowSpan - Number of rows to span
 * @returns {React.ReactElement} GridArea component
 */
const GridArea = ({ children, className = '', style = {}, area, column, row, columnSpan, rowSpan, ...rest }) => {
    const areaStyle = {
        ...(area && { gridArea: area }),
        ...(column && { gridColumn: typeof columnSpan !== 'undefined' ? `${column} / span ${columnSpan}` : column }),
        ...(row && { gridRow: typeof rowSpan !== 'undefined' ? `${row} / span ${rowSpan}` : row }),
        ...style
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-grid-area ${className}`, style: areaStyle, ...rest, children: children }));
};
exports.GridArea = GridArea;
exports.GridArea.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    area: prop_types_1.default.string,
    column: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    row: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    columnSpan: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    rowSpan: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number])
};
// Export the GridSystem components
const GridSystem = {
    Container: exports.GridContainer,
    Row: exports.GridRow,
    Column: exports.GridColumn,
    Grid: exports.Grid,
    Area: exports.GridArea
};
exports.default = GridSystem;
//# sourceMappingURL=GridSystem.js.map