@designbasekorea/ui 0.2.22 → 0.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -5573,7 +5573,7 @@
|
|
|
5573
5573
|
left: `${saturation}%`,
|
|
5574
5574
|
top: `${100 - lightness}%`,
|
|
5575
5575
|
backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
|
5576
|
-
} }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: handleEyedropperClick, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.
|
|
5576
|
+
} }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: handleEyedropperClick, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, { size: 16 }) }), jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: "0", max: "360", value: hue, onChange: handleHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue" }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: "0", max: "100", value: alpha, onChange: handleAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha" }) }))] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsxs("select", { className: "designbase-color-picker__format-select", value: colorFormat, onChange: (e) => setColorFormat(e.target.value), children: [jsxRuntime.jsx("option", { value: "hex", children: "HEX" }), jsxRuntime.jsx("option", { value: "rgb", children: "RGB" }), jsxRuntime.jsx("option", { value: "rgba", children: "RGBA" }), jsxRuntime.jsx("option", { value: "hsl", children: "HSL" }), jsxRuntime.jsx("option", { value: "hsla", children: "HSLA" })] })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxRuntime.jsxs("span", { className: "designbase-color-picker__alpha-percent", children: [alpha, "%"] })), showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) }))] })] }));
|
|
5577
5577
|
return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", onClick: togglePicker, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: {
|
|
5578
5578
|
backgroundColor: showAlpha
|
|
5579
5579
|
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|