@yamada-ui/react/dist/cjs/components/color-swatch/color-swatch-group.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_color_swatch = require('./color-swatch.cjs');
const require_grid = require('../grid/grid.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/color-swatch/color-swatch-group.tsx
/**
* `ColorSwatchGroup` is a component that displays color samples.
*
* @see https://yamada-ui.com/docs/components/color-swatch
*/
const ColorSwatchGroup = (({ items = [], layers, withShadow = true, itemProps,...rest }) => {
	if (items.length > 4) console.warn("ColorSwatchMix: doesn't support more than 4 items");
	const empty = items.length === 0;
	const threeColors = items.length === 3;
	if (empty) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_swatch.ColorSwatch, {
		"aria-label": "color swatch group",
		layers,
		overflow: "hidden",
		withShadow,
		...rest
	});
	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_swatch.ColorSwatch, {
		"aria-label": "color swatch group",
		layers: withShadow ? [{ boxShadow: "inner" }] : [],
		...rest,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid.Grid, {
			templateColumns: "repeat(2, 1fr)",
			children: items.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_swatch.ColorSwatch, {
				boxSize: "inherit",
				color,
				gridColumn: threeColors && !index ? "1 / 3" : void 0,
				rounded: "0",
				w: threeColors && !index ? "unset" : void 0,
				withShadow: false,
				...itemProps
			}, index))
		})
	});
});

//#endregion
exports.ColorSwatchGroup = ColorSwatchGroup;
//# sourceMappingURL=color-swatch-group.cjs.map