@carbon/react/lib/components/Grid/CSSGrid.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_GridContext = require("./GridContext.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Grid/CSSGrid.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const CSSGrid = react.default.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, ...rest }, ref) => {
	const prefix = require_usePrefix.usePrefix();
	const { subgrid } = require_GridContext.useGridSettings();
	let mode = "wide";
	if (narrow) mode = "narrow";
	else if (condensed) mode = "condensed";
	if (subgrid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GridContext.GridSettings, {
		mode: "css-grid",
		subgrid: true,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Subgrid, {
			ref,
			as,
			className: customClassName,
			mode,
			...rest,
			children
		})
	});
	const className = (0, classnames.default)(customClassName, {
		[`${prefix}--css-grid`]: true,
		[`${prefix}--css-grid--condensed`]: mode === "condensed",
		[`${prefix}--css-grid--narrow`]: mode === "narrow",
		[`${prefix}--css-grid--full-width`]: fullWidth,
		[`${prefix}--css-grid--start`]: align === "start",
		[`${prefix}--css-grid--end`]: align === "end"
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GridContext.GridSettings, {
		mode: "css-grid",
		subgrid: true,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || "div", {
			className,
			ref,
			...rest,
			children
		})
	});
});
CSSGrid.propTypes = {
	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
	align: prop_types.default.oneOf([
		"start",
		"center",
		"end"
	]),
	children: prop_types.default.node,
	className: prop_types.default.string,
	condensed: prop_types.default.bool,
	fullWidth: prop_types.default.bool,
	narrow: prop_types.default.bool
};
const Subgrid = react.default.forwardRef(({ as, className: customClassName, children, mode, ...rest }, ref) => {
	const prefix = require_usePrefix.usePrefix();
	const className = (0, classnames.default)(customClassName, {
		[`${prefix}--subgrid`]: true,
		[`${prefix}--subgrid--condensed`]: mode === "condensed",
		[`${prefix}--subgrid--narrow`]: mode === "narrow",
		[`${prefix}--subgrid--wide`]: mode === "wide"
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || "div", {
		...rest,
		ref,
		className,
		children
	});
});
Subgrid.propTypes = {
	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
	children: prop_types.default.node,
	className: prop_types.default.string,
	mode: prop_types.default.oneOf([
		"wide",
		"narrow",
		"condensed"
	])
};
const CSSGridComponent = CSSGrid;
//#endregion
exports.CSSGridComponent = CSSGridComponent;