@designbasekorea/ui 0.2.20 → 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 +48 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +47 -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 +47 -32
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId, createContext } from 'react';
|
|
3
|
-
import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, CaretUpdownFilledIcon, DeleteIcon, WarningIcon, InfoIcon } from '@designbasekorea/icons';
|
|
3
|
+
import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, PaletteIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, CaretUpdownFilledIcon, DeleteIcon, WarningIcon, InfoIcon } from '@designbasekorea/icons';
|
|
4
4
|
import { flushSync, createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
@@ -5403,20 +5403,6 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
5403
5403
|
const newColor = hslToHex(newHue, saturation, lightness);
|
|
5404
5404
|
handleColorChange(newColor);
|
|
5405
5405
|
};
|
|
5406
|
-
// Saturation 슬라이더 변경
|
|
5407
|
-
const handleSaturationChange = (e) => {
|
|
5408
|
-
const newSaturation = parseInt(e.target.value);
|
|
5409
|
-
setSaturation(newSaturation);
|
|
5410
|
-
const newColor = hslToHex(hue, newSaturation, lightness);
|
|
5411
|
-
handleColorChange(newColor);
|
|
5412
|
-
};
|
|
5413
|
-
// Lightness 슬라이더 변경
|
|
5414
|
-
const handleLightnessChange = (e) => {
|
|
5415
|
-
const newLightness = parseInt(e.target.value);
|
|
5416
|
-
setLightness(newLightness);
|
|
5417
|
-
const newColor = hslToHex(hue, saturation, newLightness);
|
|
5418
|
-
handleColorChange(newColor);
|
|
5419
|
-
};
|
|
5420
5406
|
// Alpha 슬라이더 변경
|
|
5421
5407
|
const handleAlphaChange = (e) => {
|
|
5422
5408
|
const newAlpha = parseInt(e.target.value);
|
|
@@ -5539,25 +5525,54 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
5539
5525
|
'designbase-color-picker--open': isOpen,
|
|
5540
5526
|
'designbase-color-picker--no-input': !showInput,
|
|
5541
5527
|
}, className);
|
|
5528
|
+
// 메인 컬러 선택 영역 클릭 핸들러
|
|
5529
|
+
const handleColorAreaClick = (e) => {
|
|
5530
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
5531
|
+
const x = e.clientX - rect.left;
|
|
5532
|
+
const y = e.clientY - rect.top;
|
|
5533
|
+
// 좌측은 채도 낮고, 우측은 채도 최대치
|
|
5534
|
+
const saturation = Math.round((x / rect.width) * 100);
|
|
5535
|
+
// 위로는 밝기 최대, 아래로는 밝기 어둡게
|
|
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
|
+
};
|
|
5542
|
+
// 스포이드 기능 (색상 추출)
|
|
5543
|
+
const handleEyedropperClick = async () => {
|
|
5544
|
+
try {
|
|
5545
|
+
// EyeDropper API 지원 확인
|
|
5546
|
+
if ('EyeDropper' in window) {
|
|
5547
|
+
const eyeDropper = new window.EyeDropper();
|
|
5548
|
+
const result = await eyeDropper.open();
|
|
5549
|
+
const hexColor = result.sRGBHex;
|
|
5550
|
+
handleColorChange(hexColor);
|
|
5551
|
+
updateHSLFromHex(hexColor);
|
|
5552
|
+
}
|
|
5553
|
+
else {
|
|
5554
|
+
// EyeDropper API가 지원되지 않는 경우 대체 기능
|
|
5555
|
+
console.log('EyeDropper API is not supported in this browser');
|
|
5556
|
+
// 여기에 대체 기능을 구현할 수 있습니다
|
|
5557
|
+
}
|
|
5558
|
+
}
|
|
5559
|
+
catch (err) {
|
|
5560
|
+
console.error('EyeDropper failed:', err);
|
|
5561
|
+
}
|
|
5562
|
+
};
|
|
5542
5563
|
// 컬러 선택 UI
|
|
5543
|
-
const renderColorSelector = () => (jsxs("div", { className: "designbase-color-picker__selector", children: [
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
hsl(${hue}, ${saturation}%, ${lightness}%))`
|
|
5556
|
-
} })] }))] }), jsxs("div", { className: "designbase-color-picker__preview", children: [jsx("div", { className: "designbase-color-picker__preview-box", style: {
|
|
5557
|
-
backgroundColor: showAlpha
|
|
5558
|
-
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|
|
5559
|
-
: `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
|
5560
|
-
} }), jsxs("div", { className: "designbase-color-picker__preview-info", children: [jsx("div", { className: "designbase-color-picker__preview-value", children: getFormattedColor() }), showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) }))] })] })] }));
|
|
5564
|
+
const renderColorSelector = () => (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: jsx("div", { className: "designbase-color-picker__color-field", style: {
|
|
5565
|
+
background: `linear-gradient(to right,
|
|
5566
|
+
hsl(${hue}, 0%, 50%),
|
|
5567
|
+
hsl(${hue}, 100%, 50%)),
|
|
5568
|
+
linear-gradient(to bottom,
|
|
5569
|
+
hsl(${hue}, 100%, 100%),
|
|
5570
|
+
hsl(${hue}, 100%, 0%))`
|
|
5571
|
+
}, onClick: handleColorAreaClick, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: {
|
|
5572
|
+
left: `${saturation}%`,
|
|
5573
|
+
top: `${100 - lightness}%`,
|
|
5574
|
+
backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
|
5575
|
+
} }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: handleEyedropperClick, "aria-label": "Eyedropper tool", children: jsx(PaletteIcon, { size: 16 }) }), jsx("div", { className: "designbase-color-picker__hue-slider", children: jsx("input", { type: "range", min: "0", max: "360", value: hue, onChange: handleHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue" }) }), showAlpha && (jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsx("input", { type: "range", min: "0", max: "100", value: alpha, onChange: handleAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha" }) }))] }), jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxs("select", { className: "designbase-color-picker__format-select", value: colorFormat, onChange: (e) => setColorFormat(e.target.value), children: [jsx("option", { value: "hex", children: "HEX" }), jsx("option", { value: "rgb", children: "RGB" }), jsx("option", { value: "rgba", children: "RGBA" }), jsx("option", { value: "hsl", children: "HSL" }), jsx("option", { value: "hsla", children: "HSLA" })] })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxs("span", { className: "designbase-color-picker__alpha-percent", children: [alpha, "%"] })), showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) }))] })] }));
|
|
5561
5576
|
return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-color-picker__trigger", children: [jsx("div", { className: "designbase-color-picker__color-display", onClick: togglePicker, children: jsx("div", { className: "designbase-color-picker__color-box", style: {
|
|
5562
5577
|
backgroundColor: showAlpha
|
|
5563
5578
|
? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
|