@shoplflow/base 0.42.15 → 0.42.17

package/dist/index.cjs

@@ -2164,7 +2164,7 @@ var MinusButton = React3.forwardRef((_a, ref) => {
 });
 MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
 exports.MinusButton = MinusButton;
-var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered, readOnly) => {
   const domain = exports.getDomain();
   const primaryColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary300;
   const primaryHoverColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary400;
@@ -2177,7 +2177,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
           & > svg > path {
             fill: ${exports.colorTokens.neutral0};
           }
-          ${isHovered && react$1.css`
+          ${isHovered && !readOnly && react$1.css`
             border: 1.5px solid ${primaryHoverColor};
             background: ${primaryHoverColor};
           `}
@@ -2187,7 +2187,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         background: ${exports.colorTokens.neutral200};
         border: 1.5px solid ${exports.colorTokens.neutral200};
         border-radius: 4px;
-        ${isHovered && react$1.css`
+        ${isHovered && !readOnly && react$1.css`
           border: 1.5px solid ${exports.colorTokens.neutral300};
           background: ${exports.colorTokens.neutral300};
         `}
@@ -2205,7 +2205,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
           & > svg > path {
             fill: ${exports.colorTokens.primary300};
           }
-          ${isHovered && react$1.css`
+          ${isHovered && !readOnly && react$1.css`
             border: 1.5px solid ${exports.colorTokens.primary400};
             & > svg > path {
               fill: ${exports.colorTokens.primary400};
@@ -2220,7 +2220,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         & > svg > path {
           fill: ${exports.colorTokens.neutral200};
         }
-        ${isHovered && react$1.css`
+        ${isHovered && !readOnly && react$1.css`
           border: 1.5px solid ${exports.colorTokens.neutral300};
           & > svg > path {
             fill: ${exports.colorTokens.neutral300};
@@ -2249,8 +2249,8 @@ var StyledCheckbox = styled6__default.default.label`
   background: ${exports.colorTokens.neutral200};
   border-radius: 4px;
   box-sizing: border-box;
-  cursor: pointer;
-  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  cursor: ${({ readOnly }) => readOnly ? "default" : "pointer"};
+  ${({ styleVar, isSelected, isHovered, readOnly }) => getStylesByStyleVariant(styleVar, isSelected, isHovered, readOnly)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
 var Container3 = styled6__default.default.button`
@@ -2265,7 +2265,27 @@ var Container3 = styled6__default.default.button`
 exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
 var Checkbox = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
+    var _b = _a, {
+      defaultSelected,
+      isSelected,
+      disabled,
+      onMouseEnter,
+      onClick,
+      onMouseLeave,
+      readOnly,
+      styleVar = "PRIMARY",
+      id
+    } = _b, rest = __objRest(_b, [
+      "defaultSelected",
+      "isSelected",
+      "disabled",
+      "onMouseEnter",
+      "onClick",
+      "onMouseLeave",
+      "readOnly",
+      "styleVar",
+      "id"
+    ]);
     const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
     const [isHovered, toggleHovered] = React3.useState(false);
     const handleMouseLeave = (e) => {
@@ -2293,7 +2313,7 @@ var Checkbox = React3.forwardRef(
         type: "button",
         "data-shoplflow": "Checkbox",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id, readOnly }, rest), { ref })),
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledCheckbox,
             {
@@ -2301,6 +2321,7 @@ var Checkbox = React3.forwardRef(
               htmlFor: id,
               isHovered,
               isSelected: selected,
+              readOnly,
               disabled,
               children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
@@ -4510,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;
@@ -4575,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)};
 
@@ -4594,6 +4615,7 @@ var Tab = (_a) => {
     as,
     styleVar = "NORMAL",
     sizeVar = "L",
+    clickable = true,
     onClick,
     activeColor
   } = _b, args = __objRest(_b, [
@@ -4604,6 +4626,7 @@ var Tab = (_a) => {
     "as",
     "styleVar",
     "sizeVar",
+    "clickable",
     "onClick",
     "activeColor"
   ]);
@@ -4617,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") {
@@ -4633,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), {
@@ -4651,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

@@ -2137,7 +2137,7 @@ var MinusButton = forwardRef((_a, ref) => {
 });
 MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
 var MinusButton_default = MinusButton;
-var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered, readOnly) => {
   const domain = getDomain();
   const primaryColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary300;
   const primaryHoverColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary400;
@@ -2150,7 +2150,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
           & > svg > path {
             fill: ${colorTokens.neutral0};
           }
-          ${isHovered && css`
+          ${isHovered && !readOnly && css`
             border: 1.5px solid ${primaryHoverColor};
             background: ${primaryHoverColor};
           `}
@@ -2160,7 +2160,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         background: ${colorTokens.neutral200};
         border: 1.5px solid ${colorTokens.neutral200};
         border-radius: 4px;
-        ${isHovered && css`
+        ${isHovered && !readOnly && css`
           border: 1.5px solid ${colorTokens.neutral300};
           background: ${colorTokens.neutral300};
         `}
@@ -2178,7 +2178,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
           & > svg > path {
             fill: ${colorTokens.primary300};
           }
-          ${isHovered && css`
+          ${isHovered && !readOnly && css`
             border: 1.5px solid ${colorTokens.primary400};
             & > svg > path {
               fill: ${colorTokens.primary400};
@@ -2193,7 +2193,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         & > svg > path {
           fill: ${colorTokens.neutral200};
         }
-        ${isHovered && css`
+        ${isHovered && !readOnly && css`
           border: 1.5px solid ${colorTokens.neutral300};
           & > svg > path {
             fill: ${colorTokens.neutral300};
@@ -2222,8 +2222,8 @@ var StyledCheckbox = styled6.label`
   background: ${colorTokens.neutral200};
   border-radius: 4px;
   box-sizing: border-box;
-  cursor: pointer;
-  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  cursor: ${({ readOnly }) => readOnly ? "default" : "pointer"};
+  ${({ styleVar, isSelected, isHovered, readOnly }) => getStylesByStyleVariant(styleVar, isSelected, isHovered, readOnly)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
 var Container3 = styled6.button`
@@ -2238,7 +2238,27 @@ var Container3 = styled6.button`
 var CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
 var Checkbox = forwardRef(
   (_a, ref) => {
-    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
+    var _b = _a, {
+      defaultSelected,
+      isSelected,
+      disabled,
+      onMouseEnter,
+      onClick,
+      onMouseLeave,
+      readOnly,
+      styleVar = "PRIMARY",
+      id
+    } = _b, rest = __objRest(_b, [
+      "defaultSelected",
+      "isSelected",
+      "disabled",
+      "onMouseEnter",
+      "onClick",
+      "onMouseLeave",
+      "readOnly",
+      "styleVar",
+      "id"
+    ]);
     const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
     const [isHovered, toggleHovered] = useState(false);
     const handleMouseLeave = (e) => {
@@ -2266,7 +2286,7 @@ var Checkbox = forwardRef(
         type: "button",
         "data-shoplflow": "Checkbox",
         children: [
-          /* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
+          /* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id, readOnly }, rest), { ref })),
           /* @__PURE__ */ jsx(
             StyledCheckbox,
             {
@@ -2274,6 +2294,7 @@ var Checkbox = forwardRef(
               htmlFor: id,
               isHovered,
               isSelected: selected,
+              readOnly,
               disabled,
               children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsx(
                 "path",
@@ -4483,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;
@@ -4548,7 +4569,7 @@ var getActiveTextStyleByStyleVar = (styleVar, activeColor) => {
   }
 };
 var StyledTabText = styled6(Text_default)`
-  cursor: pointer;
+  cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
 
   ${({ styleVar }) => styleVar && getTextStyleByStyleVar(styleVar)};
 
@@ -4567,6 +4588,7 @@ var Tab = (_a) => {
     as,
     styleVar = "NORMAL",
     sizeVar = "L",
+    clickable = true,
     onClick,
     activeColor
   } = _b, args = __objRest(_b, [
@@ -4577,6 +4599,7 @@ var Tab = (_a) => {
     "as",
     "styleVar",
     "sizeVar",
+    "clickable",
     "onClick",
     "activeColor"
   ]);
@@ -4590,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") {
@@ -4606,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), {
@@ -4624,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.15",
+  "version": "0.42.17",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",