"use client";
const require_luminance = require("../../../core/MantineProvider/color-functions/luminance/luminance.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_CheckIcon = require("../../Checkbox/CheckIcon.cjs");
const require_ColorSwatch = require("../../ColorSwatch/ColorSwatch.cjs");
const require_ColorPicker_context = require("../ColorPicker.context.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ColorPicker/Swatches/Swatches.tsx
function Swatches({ className, datatype, setValue, onChangeEnd, size, focusable, data, swatchesPerRow, value, ...others }) {
	const ctx = (0, react.use)(require_ColorPicker_context.ColorPickerContext);
	const colors = data.map((color, index) => /* @__PURE__ */ (0, react.createElement)(require_ColorSwatch.ColorSwatch, {
		...ctx.getStyles("swatch"),
		unstyled: ctx.unstyled,
		component: "button",
		type: "button",
		color,
		key: index,
		radius: "sm",
		onClick: () => {
			setValue(color);
			onChangeEnd?.(color);
		},
		"aria-label": color,
		tabIndex: focusable ? 0 : -1,
		"data-swatch": true
	}, value === color && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, {
		size: "35%",
		color: require_luminance.luminance(color) < .5 ? "white" : "black"
	})));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
		...ctx.getStyles("swatches"),
		...others,
		children: colors
	});
}
Swatches.displayName = "@mantine/core/Swatches";
//#endregion
exports.Swatches = Swatches;

//# sourceMappingURL=Swatches.cjs.map