"use client";
import { luminance } from "../../../core/MantineProvider/color-functions/luminance/luminance.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { CheckIcon } from "../../Checkbox/CheckIcon.mjs";
import { ColorSwatch } from "../../ColorSwatch/ColorSwatch.mjs";
import { ColorPickerContext } from "../ColorPicker.context.mjs";
import { createElement, use } from "react";
import { jsx } from "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 = use(ColorPickerContext);
	const colors = data.map((color, index) => /* @__PURE__ */ createElement(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__ */ jsx(CheckIcon, {
		size: "35%",
		color: luminance(color) < .5 ? "white" : "black"
	})));
	return /* @__PURE__ */ jsx(Box, {
		...ctx.getStyles("swatches"),
		...others,
		children: colors
	});
}
Swatches.displayName = "@mantine/core/Swatches";
//#endregion
export { Swatches };

//# sourceMappingURL=Swatches.mjs.map