@designbasekorea/ui 0.2.21 → 0.2.22

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId, createContext } from 'react';
-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';
+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';
 import { flushSync, createPortal } from 'react-dom';
 
 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}
@@ -5530,26 +5530,49 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
+        // 좌측은 채도 낮고, 우측은 채도 최대치
         const saturation = Math.round((x / rect.width) * 100);
+        // 위로는 밝기 최대, 아래로는 밝기 어둡게
         const lightness = Math.round(100 - (y / rect.height) * 100);
         setSaturation(Math.max(0, Math.min(100, saturation)));
         setLightness(Math.max(0, Math.min(100, lightness)));
         const newColor = hslToHex(hue, saturation, lightness);
         handleColorChange(newColor);
     };
+    // 스포이드 기능 (색상 추출)
+    const handleEyedropperClick = async () => {
+        try {
+            // EyeDropper API 지원 확인
+            if ('EyeDropper' in window) {
+                const eyeDropper = new window.EyeDropper();
+                const result = await eyeDropper.open();
+                const hexColor = result.sRGBHex;
+                handleColorChange(hexColor);
+                updateHSLFromHex(hexColor);
+            }
+            else {
+                // EyeDropper API가 지원되지 않는 경우 대체 기능
+                console.log('EyeDropper API is not supported in this browser');
+                // 여기에 대체 기능을 구현할 수 있습니다
+            }
+        }
+        catch (err) {
+            console.error('EyeDropper failed:', err);
+        }
+    };
     // 컬러 선택 UI
     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: {
                         background: `linear-gradient(to right, 
                             hsl(${hue}, 0%, 50%), 
                             hsl(${hue}, 100%, 50%)),
                             linear-gradient(to bottom, 
-                            transparent, 
-                            hsl(${hue}, ${saturation}%, 0%))`
+                            hsl(${hue}, 100%, 100%), 
+                            hsl(${hue}, 100%, 0%))`
                     }, onClick: handleColorAreaClick, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: {
                             left: `${saturation}%`,
                             top: `${100 - lightness}%`,
                             backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
-                        } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", "aria-label": "Eyedropper tool", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsx("path", { d: "M2 2h2v2H2V2zm4 0h2v2H6V2zm4 0h2v2h-2V2zm2 4h2v2h-2V6zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm-4 0h2v2H6v-2zm-4 0h2v2H2v-2z" }) }) }), 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 }) }))] })] }));
+                        } }) }) }), 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 }) }))] })] }));
     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: {
                                 backgroundColor: showAlpha
                                     ? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`