@shoplflow/base 0.42.16 → 0.42.18

package/dist/index.cjs

@@ -3354,7 +3354,7 @@ var getTagStyleBySize = (size2) => {
     case "XS":
       return react$1.css`
         height: 20px;
-        padding: 0 4px;
+        padding: 0 6px;
         border-radius: 4px;
       `;
     case "S":
@@ -4531,7 +4531,7 @@ var StyledTab = styled6__default.default.div`
   flex-direction: row;
   align-items: center;
   width: fit-content;
-  cursor: pointer;
+  cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
   position: relative;
   gap: 4px;
   user-select: none;
@@ -4596,7 +4596,7 @@ var getActiveTextStyleByStyleVar = (styleVar, activeColor) => {
   }
 };
 var StyledTabText = styled6__default.default(exports.Text)`
-  cursor: pointer;
+  cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
 
   ${({ styleVar }) => styleVar && getTextStyleByStyleVar(styleVar)};
 
@@ -4615,6 +4615,7 @@ var Tab = (_a) => {
     as,
     styleVar = "NORMAL",
     sizeVar = "L",
+    clickable = true,
     onClick,
     activeColor
   } = _b, args = __objRest(_b, [
@@ -4625,6 +4626,7 @@ var Tab = (_a) => {
     "as",
     "styleVar",
     "sizeVar",
+    "clickable",
     "onClick",
     "activeColor"
   ]);
@@ -4638,8 +4640,10 @@ var Tab = (_a) => {
     setIsHover(false);
   }, []);
   const clickHandler = (event) => {
-    onClick == null ? void 0 : onClick(event);
-    setActiveTab(value);
+    if (clickable) {
+      onClick == null ? void 0 : onClick(event);
+      setActiveTab(value);
+    }
   };
   let typography = "title1_700";
   if (styleVar === "INFO") {
@@ -4654,10 +4658,10 @@ var Tab = (_a) => {
       isActive,
       as,
       onClick: clickHandler,
-      onMouseOver: hoverHandler,
-      onMouseLeave: unhoverHandler,
-      onFocus: hoverHandler,
-      onBlur: unhoverHandler,
+      onMouseOver: clickable ? hoverHandler : void 0,
+      onMouseLeave: clickable ? unhoverHandler : void 0,
+      onFocus: clickable ? hoverHandler : void 0,
+      onBlur: clickable ? unhoverHandler : void 0,
       isHover,
       styleVar
     }, args), {
@@ -4672,6 +4676,7 @@ var Tab = (_a) => {
             isActive,
             activeColor,
             styleVar,
+            clickable,
             children: label
           }
         ),

package/dist/index.d.cts

@@ -1294,11 +1294,13 @@ interface TabProps extends TabOptionProps {
 interface TabOptionProps extends LeftAndRightNodeProps, StyleVariantProps<TabStyleVariantType>, SizeVariantProps<TabSizeVariantType>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
     as?: React.ElementType;
     activeColor?: ColorTokens;
+    clickable?: boolean;
 }
 interface TabStyledProps extends StyleVariantProps<TabStyleVariantType> {
     as?: React.ElementType;
     isActive: boolean;
     isHover: boolean;
+    clickable?: boolean;
 }
 interface TabTextStyledProps extends TabStyledProps {
     activeColor?: ColorTokens;
@@ -1306,7 +1308,7 @@ interface TabTextStyledProps extends TabStyledProps {
 
 declare const Tabs: {
     ({ children, initialTab, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
-    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
+    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, clickable, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
 };
 
 declare type TabsContextType = {

package/dist/index.d.ts

@@ -1294,11 +1294,13 @@ interface TabProps extends TabOptionProps {
 interface TabOptionProps extends LeftAndRightNodeProps, StyleVariantProps<TabStyleVariantType>, SizeVariantProps<TabSizeVariantType>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
     as?: React.ElementType;
     activeColor?: ColorTokens;
+    clickable?: boolean;
 }
 interface TabStyledProps extends StyleVariantProps<TabStyleVariantType> {
     as?: React.ElementType;
     isActive: boolean;
     isHover: boolean;
+    clickable?: boolean;
 }
 interface TabTextStyledProps extends TabStyledProps {
     activeColor?: ColorTokens;
@@ -1306,7 +1308,7 @@ interface TabTextStyledProps extends TabStyledProps {
 
 declare const Tabs: {
     ({ children, initialTab, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
-    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
+    Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, clickable, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
 };
 
 declare type TabsContextType = {

package/dist/index.js

@@ -3327,7 +3327,7 @@ var getTagStyleBySize = (size2) => {
     case "XS":
       return css`
         height: 20px;
-        padding: 0 4px;
+        padding: 0 6px;
         border-radius: 4px;
       `;
     case "S":
@@ -4504,7 +4504,7 @@ var StyledTab = styled6.div`
   flex-direction: row;
   align-items: center;
   width: fit-content;
-  cursor: pointer;
+  cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
   position: relative;
   gap: 4px;
   user-select: none;
@@ -4569,7 +4569,7 @@ var getActiveTextStyleByStyleVar = (styleVar, activeColor) => {
   }
 };
 var StyledTabText = styled6(Text_default)`
-  cursor: pointer;
+  cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
 
   ${({ styleVar }) => styleVar && getTextStyleByStyleVar(styleVar)};
 
@@ -4588,6 +4588,7 @@ var Tab = (_a) => {
     as,
     styleVar = "NORMAL",
     sizeVar = "L",
+    clickable = true,
     onClick,
     activeColor
   } = _b, args = __objRest(_b, [
@@ -4598,6 +4599,7 @@ var Tab = (_a) => {
     "as",
     "styleVar",
     "sizeVar",
+    "clickable",
     "onClick",
     "activeColor"
   ]);
@@ -4611,8 +4613,10 @@ var Tab = (_a) => {
     setIsHover(false);
   }, []);
   const clickHandler = (event) => {
-    onClick == null ? void 0 : onClick(event);
-    setActiveTab(value);
+    if (clickable) {
+      onClick == null ? void 0 : onClick(event);
+      setActiveTab(value);
+    }
   };
   let typography = "title1_700";
   if (styleVar === "INFO") {
@@ -4627,10 +4631,10 @@ var Tab = (_a) => {
       isActive,
       as,
       onClick: clickHandler,
-      onMouseOver: hoverHandler,
-      onMouseLeave: unhoverHandler,
-      onFocus: hoverHandler,
-      onBlur: unhoverHandler,
+      onMouseOver: clickable ? hoverHandler : void 0,
+      onMouseLeave: clickable ? unhoverHandler : void 0,
+      onFocus: clickable ? hoverHandler : void 0,
+      onBlur: clickable ? unhoverHandler : void 0,
       isHover,
       styleVar
     }, args), {
@@ -4645,6 +4649,7 @@ var Tab = (_a) => {
             isActive,
             activeColor,
             styleVar,
+            clickable,
             children: label
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.42.16",
+  "version": "0.42.18",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",