@designbasekorea/ui 0.2.10 → 0.2.13

package/dist/index.esm.js

@@ -5277,7 +5277,7 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
 };
 Chip.displayName = 'Chip';
 
-const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
+const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
     const [selectedColor, setSelectedColor] = useState(value || defaultValue);
     const [isOpen, setIsOpen] = useState(false);
     const [hue, setHue] = useState(211);
@@ -5423,6 +5423,11 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#00
     const handleInputChange = (e) => {
         const newValue = e.target.value.trim();
         setInputValue(newValue);
+        // HEX 값이 유효하면 실시간으로 색상 업데이트
+        if (/^#[0-9A-F]{6}$/i.test(newValue)) {
+            handleColorChange(newValue.toUpperCase());
+            updateHSLFromHex(newValue);
+        }
     };
     // 입력 필드에서 포커스 아웃 시 검증 및 적용
     const handleInputBlur = () => {
@@ -5510,7 +5515,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#00
             return;
         setIsOpen(!isOpen);
     };
-    const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, {
+    const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, `designbase-color-picker--${position}`, {
         'designbase-color-picker--disabled': disabled,
         'designbase-color-picker--readonly': readonly,
         'designbase-color-picker--open': isOpen,
@@ -10853,8 +10858,11 @@ Table.displayName = 'Table';
 const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal', size = 'm', fullWidth = false, variant = 'default', className, onTabChange, ...props }) => {
     const [activeTabId, setActiveTabId] = useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
     const [focusedTabId, setFocusedTabId] = useState('');
+    const [isDragging, setIsDragging] = useState(false);
     const tabListRef = useRef(null);
     const tabRefs = useRef(new Map());
+    const dragStartRef = useRef(null);
+    const clickStartRef = useRef(null);
     // 제어 컴포넌트 처리
     useEffect(() => {
         if (selectedId !== undefined) {
@@ -10926,18 +10934,126 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
         }
     }, [items, orientation]);
     const handleTabSelect = useCallback((tabId) => {
+        // 드래그 중이면 탭 선택 무시
+        if (isDragging)
+            return;
         const tab = items.find(item => item.id === tabId);
         if (tab && !tab.disabled) {
             setActiveTabId(tabId);
             onTabChange?.(tabId);
         }
-    }, [items, onTabChange]);
+    }, [items, onTabChange, isDragging]);
     const handleTabFocus = useCallback((tabId) => {
         setFocusedTabId(tabId);
     }, []);
     const handleTabBlur = useCallback(() => {
         setFocusedTabId('');
     }, []);
+    // 드래그 스크롤 핸들러들
+    const handleMouseDown = useCallback((e) => {
+        if (orientation !== 'horizontal' || !tabListRef.current)
+            return;
+        // 클릭 시작 위치와 시간 기록
+        clickStartRef.current = {
+            x: e.pageX,
+            y: e.pageY,
+            time: Date.now()
+        };
+        dragStartRef.current = {
+            x: e.pageX - tabListRef.current.offsetLeft,
+            scrollLeft: tabListRef.current.scrollLeft
+        };
+    }, [orientation]);
+    const handleMouseMove = useCallback((e) => {
+        if (!dragStartRef.current || !tabListRef.current)
+            return;
+        // 아직 드래그가 시작되지 않았다면 드래그 시작 여부 판단
+        if (!isDragging && clickStartRef.current) {
+            const deltaX = Math.abs(e.pageX - clickStartRef.current.x);
+            const deltaY = Math.abs(e.pageY - clickStartRef.current.y);
+            const deltaTime = Date.now() - clickStartRef.current.time;
+            // 5px 이상 이동하거나 200ms 이상 지났으면 드래그 시작
+            if (deltaX > 5 || deltaY > 5 || deltaTime > 200) {
+                setIsDragging(true);
+            }
+        }
+        if (!isDragging || !dragStartRef.current)
+            return;
+        e.preventDefault();
+        const x = e.pageX - tabListRef.current.offsetLeft;
+        const walk = (x - dragStartRef.current.x) * 2; // 스크롤 속도 조절
+        tabListRef.current.scrollLeft = dragStartRef.current.scrollLeft - walk;
+    }, [isDragging]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+        dragStartRef.current = null;
+        clickStartRef.current = null;
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsDragging(false);
+        dragStartRef.current = null;
+        clickStartRef.current = null;
+    }, []);
+    // 터치 이벤트 핸들러들
+    const handleTouchStart = useCallback((e) => {
+        if (orientation !== 'horizontal' || !tabListRef.current)
+            return;
+        const touch = e.touches[0];
+        // 클릭 시작 위치와 시간 기록
+        clickStartRef.current = {
+            x: touch.pageX,
+            y: touch.pageY,
+            time: Date.now()
+        };
+        dragStartRef.current = {
+            x: touch.pageX - tabListRef.current.offsetLeft,
+            scrollLeft: tabListRef.current.scrollLeft
+        };
+    }, [orientation]);
+    const handleTouchMove = useCallback((e) => {
+        if (!dragStartRef.current || !tabListRef.current)
+            return;
+        // 아직 드래그가 시작되지 않았다면 드래그 시작 여부 판단
+        if (!isDragging && clickStartRef.current) {
+            const touch = e.touches[0];
+            const deltaX = Math.abs(touch.pageX - clickStartRef.current.x);
+            const deltaY = Math.abs(touch.pageY - clickStartRef.current.y);
+            const deltaTime = Date.now() - clickStartRef.current.time;
+            // 5px 이상 이동하거나 200ms 이상 지났으면 드래그 시작
+            if (deltaX > 5 || deltaY > 5 || deltaTime > 200) {
+                setIsDragging(true);
+            }
+        }
+        if (!isDragging || !dragStartRef.current)
+            return;
+        e.preventDefault();
+        const touch = e.touches[0];
+        const x = touch.pageX - tabListRef.current.offsetLeft;
+        const walk = (x - dragStartRef.current.x) * 2; // 스크롤 속도 조절
+        tabListRef.current.scrollLeft = dragStartRef.current.scrollLeft - walk;
+    }, [isDragging]);
+    const handleTouchEnd = useCallback(() => {
+        setIsDragging(false);
+        dragStartRef.current = null;
+        clickStartRef.current = null;
+    }, []);
+    // 드래그 이벤트 리스너 등록/해제
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('mouseleave', handleMouseLeave);
+            document.addEventListener('touchmove', handleTouchMove, { passive: false });
+            document.addEventListener('touchend', handleTouchEnd);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('mouseleave', handleMouseLeave);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp, handleMouseLeave, handleTouchMove, handleTouchEnd]);
     const activeTab = items.find(item => item.id === activeTabId);
     items.findIndex(item => item.id === activeTabId);
     const classes = clsx('designbase-tabs', `designbase-tabs--${orientation}`, `designbase-tabs--${size}`, `designbase-tabs--${variant}`, {
@@ -10945,8 +11061,9 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
     }, className);
     const tabListClasses = clsx('designbase-tabs__list', `designbase-tabs__list--${orientation}`, {
         'designbase-tabs__list--full-width': fullWidth,
+        'designbase-tabs__list--dragging': isDragging,
     });
-    return (jsxs("div", { className: classes, ...props, children: [jsx("div", { ref: tabListRef, className: tabListClasses, role: "tablist", "aria-orientation": orientation, "aria-label": "\uD0ED \uBAA9\uB85D", children: items.map((item, index) => {
+    return (jsxs("div", { className: classes, ...props, children: [jsx("div", { ref: tabListRef, className: tabListClasses, role: "tablist", "aria-orientation": orientation, "aria-label": "\uD0ED \uBAA9\uB85D", onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: items.map((item, index) => {
                     const isSelected = item.id === activeTabId;
                     const isFocused = item.id === focusedTabId;
                     const isDisabled = item.disabled;