"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
require("clsx");
const Box = require("../../../core/Box/Box.cjs");
const ColorSwatch = require("../../ColorSwatch/ColorSwatch.cjs");
const ColorPicker_context = require("../ColorPicker.context.cjs");
const Swatches = React.forwardRef(
  ({
    className,
    datatype,
    setValue,
    onChangeEnd,
    size,
    focusable,
    data,
    swatchesPerRow,
    ...others
  }, ref) => {
    const ctx = ColorPicker_context.useColorPickerContext();
    const colors = data.map((color, index) => /* @__PURE__ */ React.createElement(
      ColorSwatch.ColorSwatch,
      {
        ...ctx.getStyles("swatch"),
        unstyled: ctx.unstyled,
        component: "button",
        type: "button",
        color,
        key: index,
        radius: "sm",
        onClick: () => {
          setValue(color);
          onChangeEnd == null ? void 0 : onChangeEnd(color);
        },
        "aria-label": color,
        tabIndex: focusable ? 0 : -1,
        "data-swatch": true
      }
    ));
    return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ...ctx.getStyles("swatches"), ref, ...others, children: colors });
  }
);
Swatches.displayName = "@mantine/core/Swatches";
exports.Swatches = Swatches;
