'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PixelEditor_module = require('./PixelEditor.module.css.js');
var index = require('../packages/ui/dist/index.js');
var pixelEditorTypes = require('./pixelEditorTypes.js');

const PixelEditorToolbar = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(index.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.tool === t.id ? PixelEditor_module.toolBtnActive : ""}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, children: t.icon }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(index.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.shapeFilled ? PixelEditor_module.toolBtnActive : ""}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`, children: api.shapeFilled ? "■" : "□" }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(index.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.miniBtnActive : ""}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, children: m.label.slice(0, 2) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: "relative", width: 28, height: 28, cursor: "pointer" }, title: "Primary Colour (click for HSV)", children: jsxRuntime.jsx(index.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: "relative", width: 22, height: 22, cursor: "pointer" }, title: "Secondary Colour", children: jsxRuntime.jsx(index.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(index.NiceButton, { className: PixelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                        const tmp = api.col1;
                        api.setCol1(api.col2);
                        api.setCol2(tmp);
                    }, title: "Swap (X)", style: { fontSize: 12, width: 24, height: 24 }, children: "\u21C4" })] })] })));
PixelEditorToolbar.displayName = "PixelEditorToolbar";

module.exports = PixelEditorToolbar;
//# sourceMappingURL=PixelEditorToolbar.js.map
