@designbasekorea/ui 0.2.19 → 0.2.21
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 +24 -32
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +24 -32
- 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 +24 -32
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5405,20 +5405,6 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
5405
5405
|
const newColor = hslToHex(newHue, saturation, lightness);
|
|
5406
5406
|
handleColorChange(newColor);
|
|
5407
5407
|
};
|
|
5408
|
-
// Saturation 슬라이더 변경
|
|
5409
|
-
const handleSaturationChange = (e) => {
|
|
5410
|
-
const newSaturation = parseInt(e.target.value);
|
|
5411
|
-
setSaturation(newSaturation);
|
|
5412
|
-
const newColor = hslToHex(hue, newSaturation, lightness);
|
|
5413
|
-
handleColorChange(newColor);
|
|
5414
|
-
};
|
|
5415
|
-
// Lightness 슬라이더 변경
|
|
5416
|
-
const handleLightnessChange = (e) => {
|
|
5417
|
-
const newLightness = parseInt(e.target.value);
|
|
5418
|
-
setLightness(newLightness);
|
|
5419
|
-
const newColor = hslToHex(hue, saturation, newLightness);
|
|
5420
|
-
handleColorChange(newColor);
|
|
5421
|
-
};
|
|
5422
5408
|
// Alpha 슬라이더 변경
|
|
5423
5409
|
const handleAlphaChange = (e) => {
|
|
5424
5410
|
const newAlpha = parseInt(e.target.value);
|
|
@@ -5541,25 +5527,31 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
5541
5527
|
'designbase-color-picker--open': isOpen,
|
|
5542
5528
|
'designbase-color-picker--no-input': !showInput,
|
|
5543
5529
|
}, className);
|
|
5530
|
+
// 메인 컬러 선택 영역 클릭 핸들러
|
|
5531
|
+
const handleColorAreaClick = (e) => {
|
|
5532
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
5533
|
+
const x = e.clientX - rect.left;
|
|
5534
|
+
const y = e.clientY - rect.top;
|
|
5535
|
+
const saturation = Math.round((x / rect.width) * 100);
|
|
5536
|
+
const lightness = Math.round(100 - (y / rect.height) * 100);
|
|
5537
|
+
setSaturation(Math.max(0, Math.min(100, saturation)));
|
|
5538
|
+
setLightness(Math.max(0, Math.min(100, lightness)));
|
|
5539
|
+
const newColor = hslToHex(hue, saturation, lightness);
|
|
5540
|
+
handleColorChange(newColor);
|
|
5541
|
+
};
|
|
5544
5542
|
// 컬러 선택 UI
|
|
5545
|
-
const renderColorSelector = () => (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5557
|
-
hsl(${hue}, ${saturation}%, ${lightness}%))`
|
|
5558
|
-
} })] }))] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__preview", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__preview-box", style: {
|
|
5559
|
-
backgroundColor: showAlpha
|
|
5560
|
-
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|
|
5561
|
-
: `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
|
5562
|
-
} }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__preview-info", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__preview-value", children: getFormattedColor() }), 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 }) }))] })] })] }));
|
|
5543
|
+
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
|
+
background: `linear-gradient(to right,
|
|
5545
|
+
hsl(${hue}, 0%, 50%),
|
|
5546
|
+
hsl(${hue}, 100%, 50%)),
|
|
5547
|
+
linear-gradient(to bottom,
|
|
5548
|
+
transparent,
|
|
5549
|
+
hsl(${hue}, ${saturation}%, 0%))`
|
|
5550
|
+
}, onClick: handleColorAreaClick, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: {
|
|
5551
|
+
left: `${saturation}%`,
|
|
5552
|
+
top: `${100 - lightness}%`,
|
|
5553
|
+
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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M2 2h2v2H2V2zm4 0h2v2H6V2zm4 0h2v2h-2V2zm2 4h2v2h-2V6zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm-4 0h2v2H6v-2zm-4 0h2v2H2v-2z" }) }) }), 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 }) }))] })] }));
|
|
5563
5555
|
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: {
|
|
5564
5556
|
backgroundColor: showAlpha
|
|
5565
5557
|
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|