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

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

import { ColorSwatch } from "./color-swatch.js";
import { Grid } from "../grid/grid.js";
import { jsx } from "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__ */ jsx(ColorSwatch, {
		"aria-label": "color swatch group",
		layers,
		overflow: "hidden",
		withShadow,
		...rest
	});
	else return /* @__PURE__ */ jsx(ColorSwatch, {
		"aria-label": "color swatch group",
		layers: withShadow ? [{ boxShadow: "inner" }] : [],
		...rest,
		children: /* @__PURE__ */ jsx(Grid, {
			templateColumns: "repeat(2, 1fr)",
			children: items.map((color, index) => /* @__PURE__ */ jsx(ColorSwatch, {
				boxSize: "inherit",
				color,
				gridColumn: threeColors && !index ? "1 / 3" : void 0,
				rounded: "0",
				w: threeColors && !index ? "unset" : void 0,
				withShadow: false,
				...itemProps
			}, index))
		})
	});
});

//#endregion
export { ColorSwatchGroup };
//# sourceMappingURL=color-swatch-group.js.map