sellmate-design-system-react 0.3.0 → 0.5.0

package/dist/components/STabs/STabs.d.ts

@@ -11,7 +11,7 @@ export interface STabsProps {
     size?: STabSize;
     /** 서브 탭(밑줄형) 스타일 */
     isSub?: boolean;
-    /** 세로 배치 */
+    /** 세로 배치 (sub 전용 — main 폴더형은 항상 가로) */
     vertical?: boolean;
     className?: string;
     style?: CSSProperties;

package/dist/components/STabs/STabs.js

@@ -2965,6 +2965,7 @@ function STabs({
 }) {
   const s = TAB_MAIN_SIZE[size];
   const blue = TAB_MAIN_COLORS.selected.border;
+  const isVertical = isSub && vertical;
   const tabRefs = useRef([]);
   const moveTo = (target) => {
     if (target < 0 || target >= tabs.length) return;
@@ -2972,19 +2973,17 @@ function STabs({
     tabRefs.current[target]?.focus();
   };
   const containerStyle = { ...style };
-  if (!isSub) {
-    if (vertical) containerStyle.borderRight = `1px solid ${blue}`;
-    else containerStyle.borderBottom = `1px solid ${blue}`;
-  }
+  if (!isSub) containerStyle.borderBottom = `1px solid ${blue}`;
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "tablist",
-      "aria-orientation": vertical ? "vertical" : "horizontal",
+      "aria-orientation": isVertical ? "vertical" : "horizontal",
       className: cn(
-        "inline-flex w-fit",
-        vertical ? "flex-col items-stretch" : "flex-row",
-        isSub ? vertical ? "gap-[16px]" : "gap-[24px]" : "gap-[4px]",
+        // main(가로): baseline(하단 divider)이 100% 너비로 채워지도록 w-full
+        isSub ? "inline-flex w-fit" : "flex w-full",
+        isVertical ? "flex-col items-stretch" : "flex-row",
+        isSub ? isVertical ? "gap-[16px]" : "gap-[24px]" : "gap-[4px]",
         className
       ),
       style: containerStyle,
@@ -3013,22 +3012,12 @@ function STabs({
             color: selected ? TAB_MAIN_COLORS.selected.text : TAB_MAIN_COLORS.default.text,
             border: `1px solid ${border}`,
             // 폴더형: 미선택 탭은 baseline 위에, 선택 탭은 baseline(파란선)을 1px 덮어 연결된 것처럼 보이게
-            ...vertical ? {
-              borderTopLeftRadius: 6,
-              borderBottomLeftRadius: 6,
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-              justifyContent: "flex-start",
-              borderRight: selected ? `1px solid ${selectedBg}` : "none",
-              marginRight: selected ? -1 : 0
-            } : {
-              borderTopLeftRadius: 6,
-              borderTopRightRadius: 6,
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              borderBottom: selected ? `1px solid ${selectedBg}` : "none",
-              marginBottom: selected ? -1 : 0
-            }
+            borderTopLeftRadius: 6,
+            borderTopRightRadius: 6,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            borderBottom: selected ? `1px solid ${selectedBg}` : "none",
+            marginBottom: selected ? -1 : 0
           };
         }
         return /* @__PURE__ */ jsxs(
@@ -3048,8 +3037,8 @@ function STabs({
                 select();
                 return;
               }
-              const nextKey = vertical ? "ArrowDown" : "ArrowRight";
-              const prevKey = vertical ? "ArrowUp" : "ArrowLeft";
+              const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+              const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
               if (e.key === nextKey) {
                 e.preventDefault();
                 moveTo((i + 1) % tabs.length);