@shoplflow/base 0.32.32 → 0.32.33

package/dist/index.cjs

@@ -4108,8 +4108,8 @@ var getHoverTabStyleByStyleVar = (styleVar) => {
         ::after {
           content: '';
           position: absolute;
-          left: 0;
-          right: 0;
+          left: 0px;
+          right: 0px;
           bottom: -2px;
           height: 2px;
           background: ${exports.colorTokens.neutral500};
@@ -4140,8 +4140,8 @@ var getActiveTriggerStyleByStyleVar = (styleVar) => {
         ::after {
           content: '';
           position: absolute;
-          left: 0;
-          right: 0;
+          left: 0px;
+          right: 0px;
           bottom: -2px;
           height: 2px;
           background: #000;
@@ -4153,17 +4153,32 @@ var getActiveTriggerStyleByStyleVar = (styleVar) => {
     }
   }
 };
+var getPaddingStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return react$1.css`
+        padding: 12px 16px;
+      `;
+    }
+    case "INFO": {
+      return react$1.css`
+        padding: 12px 0px;
+      `;
+    }
+  }
+};
 var StyledTab = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 12px 16px;
   width: fit-content;
   cursor: pointer;
   position: relative;
+  gap: 4px;
   user-select: none;
 
   ${({ styleVar }) => styleVar && getWrapperStyleByStyleVar(styleVar)};
+  ${({ styleVar }) => styleVar && getPaddingStyleByStyleVar(styleVar)};
 
   /* hover style */
   ${({ isActive, isHover, styleVar }) => !isActive && isHover && styleVar && getHoverTabStyleByStyleVar(styleVar)}
@@ -4232,18 +4247,6 @@ var StyledTabText = styled6__default.default(exports.Text)`
   /* active style */
   ${({ isActive, styleVar, activeColor }) => isActive && styleVar && getActiveTextStyleByStyleVar(styleVar, activeColor)}
 `;
-var StyledIndicator = styled6__default.default(framerMotion.motion.div)`
-  position: absolute;
-  bottom: -2px;
-  left: 0px;
-  right: 0px;
-  height: 2px;
-  background-color: black;
-  width: 100%;
-`;
-var Indicator = ({ layoutId }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledIndicator, { layoutId, transition: { duration: 0.2 } });
-};
 var Tab = (_a) => {
   var _b = _a, {
     value,
@@ -4313,8 +4316,7 @@ var Tab = (_a) => {
             children: label
           }
         ),
-        rightSource,
-        styleVar === "INFO" && isActive && /* @__PURE__ */ jsxRuntime.jsx(Indicator, { layoutId: "underline" })
+        rightSource
       ]
     })
   );
@@ -4334,7 +4336,7 @@ var Tabs = ({ children, initialTab, onChange }) => {
         activeTab,
         setActiveTab
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) })
+      children
     }
   );
 };

package/dist/index.d.cts

@@ -1239,6 +1239,9 @@ interface TabsProps extends TabsOptionProps {
     onChange: (tab: string) => void;
 }
 interface TabsOptionProps extends ChildrenProps {
+    /**
+     * 처음에 선택될 탭을 설정합니다.
+     */
     initialTab: string;
 }
 interface TabProps extends TabOptionProps {

package/dist/index.d.ts

@@ -1239,6 +1239,9 @@ interface TabsProps extends TabsOptionProps {
     onChange: (tab: string) => void;
 }
 interface TabsOptionProps extends ChildrenProps {
+    /**
+     * 처음에 선택될 탭을 설정합니다.
+     */
     initialTab: string;
 }
 interface TabProps extends TabOptionProps {

package/dist/index.js

@@ -4081,8 +4081,8 @@ var getHoverTabStyleByStyleVar = (styleVar) => {
         ::after {
           content: '';
           position: absolute;
-          left: 0;
-          right: 0;
+          left: 0px;
+          right: 0px;
           bottom: -2px;
           height: 2px;
           background: ${colorTokens.neutral500};
@@ -4113,8 +4113,8 @@ var getActiveTriggerStyleByStyleVar = (styleVar) => {
         ::after {
           content: '';
           position: absolute;
-          left: 0;
-          right: 0;
+          left: 0px;
+          right: 0px;
           bottom: -2px;
           height: 2px;
           background: #000;
@@ -4126,17 +4126,32 @@ var getActiveTriggerStyleByStyleVar = (styleVar) => {
     }
   }
 };
+var getPaddingStyleByStyleVar = (styleVar) => {
+  switch (styleVar) {
+    case "NORMAL": {
+      return css`
+        padding: 12px 16px;
+      `;
+    }
+    case "INFO": {
+      return css`
+        padding: 12px 0px;
+      `;
+    }
+  }
+};
 var StyledTab = styled6.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 12px 16px;
   width: fit-content;
   cursor: pointer;
   position: relative;
+  gap: 4px;
   user-select: none;
 
   ${({ styleVar }) => styleVar && getWrapperStyleByStyleVar(styleVar)};
+  ${({ styleVar }) => styleVar && getPaddingStyleByStyleVar(styleVar)};
 
   /* hover style */
   ${({ isActive, isHover, styleVar }) => !isActive && isHover && styleVar && getHoverTabStyleByStyleVar(styleVar)}
@@ -4205,18 +4220,6 @@ var StyledTabText = styled6(Text_default)`
   /* active style */
   ${({ isActive, styleVar, activeColor }) => isActive && styleVar && getActiveTextStyleByStyleVar(styleVar, activeColor)}
 `;
-var StyledIndicator = styled6(motion.div)`
-  position: absolute;
-  bottom: -2px;
-  left: 0px;
-  right: 0px;
-  height: 2px;
-  background-color: black;
-  width: 100%;
-`;
-var Indicator = ({ layoutId }) => {
-  return /* @__PURE__ */ jsx(StyledIndicator, { layoutId, transition: { duration: 0.2 } });
-};
 var Tab = (_a) => {
   var _b = _a, {
     value,
@@ -4286,8 +4289,7 @@ var Tab = (_a) => {
             children: label
           }
         ),
-        rightSource,
-        styleVar === "INFO" && isActive && /* @__PURE__ */ jsx(Indicator, { layoutId: "underline" })
+        rightSource
       ]
     })
   );
@@ -4307,7 +4309,7 @@ var Tabs = ({ children, initialTab, onChange }) => {
         activeTab,
         setActiveTab
       },
-      children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children }) })
+      children
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.32.32",
+  "version": "0.32.33",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -90,8 +90,8 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/shopl-assets": "^0.11.0",
     "@shoplflow/hada-assets": "^0.1.3",
+    "@shoplflow/shopl-assets": "^0.11.0",
     "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {