@designbasekorea/ui 0.1.35 → 0.1.36

package/dist/index.d.ts

@@ -3397,6 +3397,8 @@ interface SplitViewProps {
     splitterColor?: string;
     /** 분할선 호버 색상 */
     splitterHoverColor?: string;
+    /** 패널 간 간격 (px, 기본값: 0) */
+    gap?: number;
     /** 전체 너비 사용 */
     fullWidth?: boolean;
     /** 전체 높이 사용 */

package/dist/index.esm.js

@@ -9696,7 +9696,7 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
 });
 Skeleton.displayName = 'Skeleton';
 
-const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterSize = 4, splitterColor, splitterHoverColor, fullWidth = false, fullHeight = false, className, }) => {
+const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterSize = 4, splitterColor, splitterHoverColor, gap = 0, fullWidth = false, fullHeight = false, className, }) => {
     // 각 패널의 현재 크기 상태
     const [panelSizes, setPanelSizes] = useState(() => panels.map((panel, index) => {
         if (panel.size !== undefined)
@@ -9795,6 +9795,7 @@ const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterS
         '--splitter-size': `${splitterSize}px`,
         '--splitter-color': splitterColor,
         '--splitter-hover-color': splitterHoverColor,
+        gap: gap > 0 ? `${gap}px` : undefined,
     };
     return (jsx("div", { ref: containerRef, className: classes, style: style, children: panels.map((panel, index) => {
             const size = panelSizes[index];
@@ -9817,7 +9818,7 @@ const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterS
                     panelStyle.flexShrink = 0;
                 }
             }
-            return (jsxs(React.Fragment, { children: [jsx("div", { className: clsx('designbase-split-view__panel', panel.className), style: panelStyle, children: panel.content }), !isLast && isResizable && (jsx("div", { className: clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`), onMouseDown: handleMouseDown(index), style: {
+            return (jsxs(React.Fragment, { children: [jsx("div", { className: clsx('designbase-split-view__panel', panel.className), style: panelStyle, children: panel.content }), !isLast && isResizable && gap === 0 && (jsx("div", { className: clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`), onMouseDown: handleMouseDown(index), style: {
                             cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
                         } }))] }, index));
         }) }));