@shoplflow/base 0.20.0 → 0.21.0

package/dist/index.cjs

@@ -930,10 +930,10 @@ var useOnToggle = (selected, defaultSelected) => {
     }
   }, [isControlled, selected]);
   React3.useEffect(() => {
-    if (defaultSelected !== void 0) {
+    if (!isControlled && defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
-  }, [defaultSelected]);
+  }, [defaultSelected, isControlled]);
   return [isToggle, handleToggle];
 };
 var Switch = (_a) => {
@@ -1920,21 +1920,54 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
+var getStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return react$1.css`
+        min-height: 28px;
+      `;
+    case "S":
+      return react$1.css`
+        min-height: 36px;
+      `;
+    case "M":
+      return react$1.css`
+        height: 48px;
+      `;
+    default:
+      return react$1.css`
+        height: 48px;
+      `;
+  }
+};
+exports.getFontStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return "body2_400";
+    case "S":
+      return "body1_400";
+    case "M":
+      return "body1_400";
+    default:
+      return "body1_400";
+  }
+};
 exports.StyledMenu = styled5__default.default.li`
   display: flex;
-  flex-direction: row;
-  padding: 6px;
   width: 100%;
+  flex-direction: row;
   align-items: center;
+  padding: 6px;
   gap: 4px;
-  cursor: pointer;
   border-radius: 4px;
-  background: ${exports.colorTokens.neutral0};
+  cursor: pointer;
+  background: transparent;
+  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
   &:hover {
-    background: ${exports.colorTokens.neutral100};
+    background: ${exports.colorTokens.neutral400_5};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
-  ${({ isSelected, leftSource }) => isSelected && !leftSource && react$1.css`
+  ${({ isSelected, leftSource }) => isSelected === true && !leftSource && react$1.css`
       background: ${exports.colorTokens.neutral200};
       &:hover {
         background: ${exports.colorTokens.neutral200};
@@ -1949,6 +1982,7 @@ var Menu = (_a) => {
     isSelected,
     defaultSelected = false,
     onClick,
+    sizeVar = "XS",
     disabled = false
   } = _b, rest = __objRest(_b, [
     "leftSource",
@@ -1957,6 +1991,7 @@ var Menu = (_a) => {
     "isSelected",
     "defaultSelected",
     "onClick",
+    "sizeVar",
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
@@ -1967,14 +2002,32 @@ var Menu = (_a) => {
     !disabled && handleToggle();
     !disabled && onClick && onClick(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledMenu, __spreadProps(__spreadValues({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
-    leftSource && LeftSourceClone,
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
-    rightSource && rightSource
-  ] }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.StyledMenu,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      isSelected: selected,
+      leftSource,
+      onClick: handleOnClick
+    }, rest), {
+      "data-shoplflow": "Menu",
+      children: [
+        leftSource && LeftSourceClone,
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { width: "100%", height: "100%", align: "center", className: exports.getFontStylesBySizeVar(sizeVar), children }),
+        rightSource && rightSource
+      ]
+    })
+  );
 };
 exports.Menu = Menu;
-exports.StyledList = styled5__default.default.div`
+
+// src/components/Menu/Menu.types.ts
+exports.MenuSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
+exports.StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;