@designbasekorea/ui 0.2.21 → 0.2.22
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.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +27 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +26 -3
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +26 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5532,26 +5532,49 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
5532
5532
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
5533
5533
|
const x = e.clientX - rect.left;
|
|
5534
5534
|
const y = e.clientY - rect.top;
|
|
5535
|
+
// 좌측은 채도 낮고, 우측은 채도 최대치
|
|
5535
5536
|
const saturation = Math.round((x / rect.width) * 100);
|
|
5537
|
+
// 위로는 밝기 최대, 아래로는 밝기 어둡게
|
|
5536
5538
|
const lightness = Math.round(100 - (y / rect.height) * 100);
|
|
5537
5539
|
setSaturation(Math.max(0, Math.min(100, saturation)));
|
|
5538
5540
|
setLightness(Math.max(0, Math.min(100, lightness)));
|
|
5539
5541
|
const newColor = hslToHex(hue, saturation, lightness);
|
|
5540
5542
|
handleColorChange(newColor);
|
|
5541
5543
|
};
|
|
5544
|
+
// 스포이드 기능 (색상 추출)
|
|
5545
|
+
const handleEyedropperClick = async () => {
|
|
5546
|
+
try {
|
|
5547
|
+
// EyeDropper API 지원 확인
|
|
5548
|
+
if ('EyeDropper' in window) {
|
|
5549
|
+
const eyeDropper = new window.EyeDropper();
|
|
5550
|
+
const result = await eyeDropper.open();
|
|
5551
|
+
const hexColor = result.sRGBHex;
|
|
5552
|
+
handleColorChange(hexColor);
|
|
5553
|
+
updateHSLFromHex(hexColor);
|
|
5554
|
+
}
|
|
5555
|
+
else {
|
|
5556
|
+
// EyeDropper API가 지원되지 않는 경우 대체 기능
|
|
5557
|
+
console.log('EyeDropper API is not supported in this browser');
|
|
5558
|
+
// 여기에 대체 기능을 구현할 수 있습니다
|
|
5559
|
+
}
|
|
5560
|
+
}
|
|
5561
|
+
catch (err) {
|
|
5562
|
+
console.error('EyeDropper failed:', err);
|
|
5563
|
+
}
|
|
5564
|
+
};
|
|
5542
5565
|
// 컬러 선택 UI
|
|
5543
5566
|
const renderColorSelector = () => (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-field", style: {
|
|
5544
5567
|
background: `linear-gradient(to right,
|
|
5545
5568
|
hsl(${hue}, 0%, 50%),
|
|
5546
5569
|
hsl(${hue}, 100%, 50%)),
|
|
5547
5570
|
linear-gradient(to bottom,
|
|
5548
|
-
|
|
5549
|
-
hsl(${hue},
|
|
5571
|
+
hsl(${hue}, 100%, 100%),
|
|
5572
|
+
hsl(${hue}, 100%, 0%))`
|
|
5550
5573
|
}, onClick: handleColorAreaClick, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: {
|
|
5551
5574
|
left: `${saturation}%`,
|
|
5552
5575
|
top: `${100 - lightness}%`,
|
|
5553
5576
|
backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
|
5554
|
-
} }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(
|
|
5577
|
+
} }) }) }), 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.PaletteIcon, { 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 }) }))] })] }));
|
|
5555
5578
|
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: {
|
|
5556
5579
|
backgroundColor: showAlpha
|
|
5557
5580
|
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|