import { cn } from "./cva.js";
import { Radio, RadioGroup } from "./RadioGroup.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/ColorPicker.tsx
function ColorPicker({ value, onChange, presets, className, ...aria }) {
	return /* @__PURE__ */ jsx(RadioGroup, {
		value,
		onValueChange: onChange,
		className: cn("flex flex-row flex-wrap gap-3", className),
		...aria,
		children: presets.map((preset) => /* @__PURE__ */ jsxs("label", {
			className: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-fg hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)]",
			children: [
				/* @__PURE__ */ jsx(Radio, {
					value: preset.value,
					"aria-label": preset.label
				}),
				/* @__PURE__ */ jsx("span", {
					className: "h-4 w-4 shrink-0 rounded-full border border-border",
					style: { backgroundColor: preset.value },
					"aria-hidden": true
				}),
				/* @__PURE__ */ jsx("span", { children: preset.label })
			]
		}, preset.id))
	});
}
//#endregion
export { ColorPicker };
